Every page on the Internet starts as a humble HTML file. HTML (HyperText Markup Language) is the backbone of the web, and the beginning of any website. In this standalone lesson, you'll learn the basics of HTML and be on your way in creating a website.

A text editor is a program that allows users to create and edit plain text files. Plain text files don’t have stylistic formatting; you won’t find code written in Comic Sans or Wingdings, which is one of the ways text editors are different from programs like Microsoft Word. We recommend using SublimeText . It's shareware .

Using a modern web browser ensures that you can see the website the exact way the people who built it meant for you to see it by complying with standards for displaying web pages. All latest versions of major web browsers (Google Chrome, Safari, Mozilla Firefox, Internet Explorer, Opera) are considered modern.

In the beginning, there was the word, and the word was !DOCTYPE. Only, it wasn't a word, it was an HTML tag. And it wasn't God, it was the W3C . In this section, we're going to look at the stuff that must be included in every HTML document. This first part is all about definitions and referrals: it tells the browser what's in the document and links to other crucial info.

What we do

We're inserting the non-negotiable structure for every HTML document you'll ever put together, ever. You might as well save this somewhere easy because you'll need it again and again and again ...

Why we do

Without this first part, the browser has no idea what it's looking at. Many different file types make up a website—HTML, CSS, JS, data, images, etc.—so we have to identify them ourselves and give the browser its marching orders.

How we do

Open the index.html file in your text editor and paste in the following code. We're essentially dividing our page into two sections: a browser-related information section (the <head> ), and our visible content (the <body> ).

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html>

That wasn't you blindly cutting and pasting, was it? Please say no. Let's go over each one:

<!DOCTYPE html>

Tells the browser that this is an HTML5 document.

<html lang="en"> ... </html>

Announces to the browser that anything in between them is HTML, and that the webpage is in English.


Head elements go in between these tags, including the title of the webpage and links to stylesheets or scripts.

<meta charset="utf-8">

A meta tag contains metadata—or, the data about your data. Whoa.


The tag we've all been waiting for. This monster contains the content of the document: text, images, etc.

What we do

We're adding our initial content to the page. First up is the title , and we'll throw in a paragraph for kicks.

Why we do

Before you get carried away, it's good practice to make a couple of small changes to your document just so you know everything's up and running properly—that you're editing the right file, and that you're able to see those changes. If you can't see those changes, you know something is wrong with your workflow.

How we do

  1. Edit the title of your web page by naming it inside the <title> tags. Titles usually describe the purpose of your webpage, and can be anything from your name to “Shrine to Steve Buscemi.” <title>[Your Name]’s Personal Website</title>
  2. Inside the <body> tag, create a <p> tag with your name (from here on, we're going to be putting everything in the body unless we specifically state otherwise). If you don’t know your name, that’s okay too. A little-known fact is that Steve Buscemi’s entity is in the public domain, so anyone can assume his identity without fear of copyright infringement. <body> <p>Your Name</p> </body>

Most HTML elements have an opening tag and a closing tag, which hold other tags or content. So unless you hear otherwise ( <br> cough cough <img> ), you'll need both the opener and the closer. Like so: <p>Here are my thoughts.</p>

What we do

The img tag instructs the browser to go fetch an image file—like a JPG , PNG , or GIF .

Why we do

The image tag is different from what we've seen so far. First, it's "self-closing," meaning it does not have a partner closing tag like /img. It's also got a mandatory attribute called src that points to where the browser can find the image file.

How we do

  1. Find an image to use. For now, grab something that has a full URL—something on the web, not on your machine.

    When you right-click on an image online, you should see a menu pop up. Look for language like "Copy Image URL". Select that option, and it should give you the exact web address for that image. If you want to double-check, feel free to paste it into your browser bar like you would any other URL.

  2. Using the self-closing <img> tag, insert an image into the <body> . Paste the image URL as the source attribute for the <img> tag. <img src='https://upload.wikimedia.org/wikipedia/commons/a/aa/Steve_Buscemi_%281996%29.jpg'>

No problem. Simplify the name so it has no caps and spaces, like this: stevie.jpg . Make sure you put the image in the same folder as your index.html file . Then just put the image name instead of the url. So you'd have something like, src="stevie.jpg" .

What we do

If HTML is about being as semantic as possible, you'll realize that sometimes you want to mark off collections of similar things—a bunch of links that make up your navigation, icons that link to your social media accounts, or a series of definitions.

Why we do

We group these things together as "lists." There are three major kinds: unordered lists, or <ul> ; ordered lists, or <ol> , and definition lists, or <dt> .

Unordered means that order or sequence doesn't really matter. Ordered lists you'd notch off with 1, 2, 3 ... and definition lists pull together terms and definitions. It's kind of a specialized form of unordered lists.

How we do

We're about to make an ordered list telling you how to do an unordered list. Whaaaaat.

  1. Create a list of your social media accounts with the <ul> tag.
  2. Each item is nested inside, and gets its own <li> tag, which stands for list item . <ul> <li>Twitter</li> <li>Facebook</li> <li>LinkedIn</li> <li>Tumblr</li> <li>Email</li> </ul>
  3. When you refresh your browser, you should see your list with a bunch of bullets setting each of these on a new line.

Or, Check Yourself Before You Get Super Tangled Up in Your Own Code and No Longer Have a Clear Sense of Which Way is Up and then Spend Five Hours Debugging Only to Discover You Just Forgot to Close a Tag Somewhere.

A good practice when building websites is to save and check your work often. Take a moment now to save your code and open your HTML file in the browser. (Or if it's already open, refresh.) Do this compulsively. If anything looks off, look through your code again and make sure it matches the examples.

What we do

We're using the <a> tag to establish a link between words (or images) on our site to another URL. Aka, Gawker's bread and butter.

Why we do

Linking things together is what the internet's all about! It puts the web in world wide web.

How we do

We're using another attribute here— href . This is for the URL we want to link to. The <a></a> tags go around the text or image you want to link up. So, this text , for example, goes somewhere awesome.

  1. Let’s go one level deeper with nesting. Using <a> tags inside your <li> tags, add links to send people directly to your social media accounts. <ul> <li><a href='http://www.twitter.com'>Twitter</a></li> <li><a href='http://www.facebook.com'>Facebook</a></li> <li><a href='http://www.linkedin.com'>LinkedIn</a></li> <li><a href='http://www.tumblr.com'>Tumblr</a></li> <li><a href='mailto:you@you.com'>Email</a></li> </ul>
  2. Head into your browser and refresh, then test each one of those links to make sure the page redirects to the right URL.
  3. For kicks, add an extra attribute to one of these that tells the browser to open the link in a new window. That's the norm these days. <ul> <li><a href='http://www.twitter.com' target='_blank'>Twitter</a></li> </ul>
  4. Great question. An email address just gets a URL of "mailto:youraddress@yo.com". For linking on the same page, it's a two-part system we'll get into later.

There are a wide range of tags that serve a multitude of purposes. For a complete list, see the list of tags at w3schools . Some useful tags in journalistic contexts include <article> , <blockquote> , and <cite> , among others. Don’t worry about memorizing them all—no one needs to know all the tags, and they’re all available for you to look up whenever you need it. You're BFFs with Google, right? That's sad, but we understand.

Used for structure, typically as a generic way to identify a section off similar elements. You can read more about divs in just a bit.
Adds links to your text.
<h1> to <h6>
Headings! Journalists take note: These are used for headlines, section heads, and the like. It signals content more important than the lowly paragraph, with h1 being the most important and h6 being the least. You can use them multiple times, with the exception of the superlative h1 .
Paragraphs , though people use them for general purpose things like bylines, as well.
Tells the browser to retrieve and display an image .
<ul> and <li>
Create and populate an unordered list , most commonly used for navigation bars. Review that here.
This bad boy creates a submittable form . Submit to me, people of the internet.
Creates an element on the page for user input, and comes with a variety of types .
You guessed it, this makes a button on the page. HTML is so hard!
A quick way to wrap a few words in a particular style. Just throw <span> around the words, add a class, and style it via CSS.
This new HTML5 tag is for articles . Could be useful for journalists.
This typically wraps around images, graphics, code samples ... think about a "figure" you might have seen in textbooks.
If you're quoting several sentences. Great for display text.
Use this tag to cite the title of a work, such as a film or a painting.
This denotes a code snippet appearing on the screen.
Used to break apart sections of content, usually within an article.
Not to be confused with a headline! This names the page for Google et al, and it typically appears at the top of the tab or window. This isn't something you style.
This links to another file—used mostly to link stylesheets to the HTML document.
You can replace the ellipses here with comments that won't be displayed ... or to "mute" code that's not working to come back to later.

What we do

HTML deals with two things: content and structure. All the tags we’ve seen so far deal with actual content, but there are also some very useful tags that are used to structure your HTML, like the <div> tag.

Why we do

Thinking forward to CSS , you might want to group certain items together to make them look alike. In traditional layouts, for example, you might have a sidebar. And you want that sidebar to look different—and to appear in a different place—than your main bar. To be able to "grab" all of that content, you'd use a <div> tag and clump it all together. These paragraphs, browser, are part of the sidebar. Treat them as a group, or block.

How we do

  1. Use a <div> tag to group all your introductory material together. That’ll include your <h1> , <img> , and <p> tags at the beginning of your body.
  2. When it’s done it should look like this: <div> <h1>My Personal Website</h1> <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Steve_Buscemi_2009_portrait.jpg/220px-Steve_Buscemi_2009_portrait.jpg'> <p>Hi! This is my personal website!</p> </div>
  3. If you refresh your page at this point, you’ll notice that it doesn’t look any different than it did without the <div> tag. And you’re totally correct! While adding <div> s don’t visually affect the page when applied (aside from creating a break if you added a <div> within an inline element), they will become extremely useful when it comes time to organize and style your website. If you don’t understand it 100 percent right now, that’s fine. Just trust us. We would never steer you wrong.

And that's it! Review the index.html file in your browser and make sure that everything is showing up. If something isn't appearing, check your code to see if there are any syntax errors or if you forgot to close any tags. Then bask in the glory of your fine work.

Oh, you noticed that too? Right—because HTML doesn't care about looking good. It's just markup. It says what is what and gets on with its life. You, however, still have work to do. Head back into the project to continue to CSS.

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset='utf8'> <title>My Personal Website</title> </head> <body> <ul> <li><a href='http://www.twitter.com'>Twitter</a></li> <li><a href='http://www.facebook.com'>Facebook</a></li> <li><a href='http://www.linkedin.com'>LinkedIn</a></li> <li><a href='http://www.tumblr.com'>Tumblr</a></li> <li><a href='mailto:you@you.com'>Email</a></li> </ul> <div> <h1>My Personal Website</h1> <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Steve_Buscemi_2009_portrait.jpg/220px-Steve_Buscemi_2009_portrait.jpg'> <p>Hi! This is my personal website!</p> </div> </body> </html>