HTML: the basics

Presented by Samantha Kannegiser & Meaghan Moody

What is HTML?

HyperText Markup Language: HTML controls the structure of a webpage. Hypertext pertains to the link structure of the text and the way we navigate on the web by clicking from link to link. HTML is composed of tags that markup the content they surround.

Ex. <title>This is a title tag that is marking up this content and labeling it as a title! Whoa!</title>

Why learn HTML?

In our increasingly digital world, knowing a little bit of coding can take you a long way. There are tons of reasons to learn html! Even if you don't become a web designer, knowing the concepts and terms at a basic level will allow you to communicate more effectively and access more control over any digital project.

What's next? What do we need to get started writing HTML and creating websites?

  • Code Editor: A text program designed for editing source code. Some FREE code editors we like are Notepad++ (Windows) and TextWrangler (OSX and Windows).

To begin writing html, all you really need is the text editor, but you may want to eventually move your webpages online. Here's what you'll need:

  • Web Hosting: A web hosting service provides space on its server for your website files and will connect them to the internet. This may involve some cost and certainly deserves some consideration.
  • File Transfer Protocol (FTP): FTP will transfer files to and from a server. We like FileZilla. It's free.
  • Domain Name: This will also involve some cost, but you'll want your domain name to be clear and representative of the content of your website.

HTML Tag Cheat Sheet

<!DOCTYPE html>Tells your browser that it's looking at an HTML page. Goes at the top of every page.</html>

<meta charset="utf-8">Character encoding for HTML. You need it.

<head>Contains content about the page.</head><body>Content goes here.</body>

<title>Appears inside head and is the title of the page.</title>

<p>Paragraphs!</p> <br>Line breaks!</br> <em>Emphasis!</em> <strong>Bold!</strong>

<h1>Headings. H1 is most important. </h1> h2 through h6 Less important things. Order matters.

<img src=""> Don't forget width, height, alt attribute!

LINKS: <a href="">HTML Dog</a>

LISTS: Unordered (bullets): <ul> <li>list item here</li> </ul> Ordered (numbered): <ol> <li>list item here</li></ol>

TABLES: <table></table> Rows: <tr><td> tags hang out here. </tr> Table data: <td>Cell data hangs out here.</td>


  • HTMLdog: Offers tutorials, techniques, and examples for HTML, CSS, and Javascript.
  • W3Schools: Self-proclaimed world's largest web developer site. Offers definitions, examples, and try-it-yourself options.
  • Code Academy: Learn to code. Free step-by-step tutorials on a variety of topics.
  • Skillcrush: Offers a free 10-day coding bootcamp
  • Free service that will check your html for errors.