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
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
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 ...
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.
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>
).
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
<html lang="en"> ... </html>
Announces to the browser that anything in between them is HTML, and that the webpage is in English.
<head>
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.
<body>
The tag we've all been waiting for. This monster contains the content of the document: text, images, etc.
We're adding our initial content to the page. First up is the
title
, and we'll throw in a paragraph for kicks.
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.
<title>
tags. Titles usually describe the
purpose of your webpage, and can be anything from your name to “Shrine to Steve Buscemi.”
<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.
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>
The
img
tag instructs the browser to go fetch an image file—like a
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
src
that points to where the browser can find the image file.
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.
<img>
tag, insert an
image into the
<body>
. Paste the image URL as the source attribute for the
<img>
tag.
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"
.
If HTML is about being as
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.
We're about to make an ordered list telling you how to do an unordered list. Whaaaaat.
<ul>
tag.
<li>
tag, which stands for
list item
.
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.
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.
Linking things together is what the internet's all about! It puts the web in world wide web.
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.
<a>
tags inside your
<li>
tags, add links to send people directly to your social media
accounts.
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.
<div>
<a>
<h1>
to
<h6>
h1
being the most important and
h6
being the least. You can use them multiple times, with the exception of the superlative
h1
.
<p>
<img>
<ul>
and
<li>
<form>
<input>
<button>
<span>
<span>
around the words, add a class, and style it via CSS.
<article>
<figure>
<blockquote>
<cite>
<code>
<section>
<title>
<link>
<!——...——>
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.
Thinking forward to
<div>
tag and clump it all together.
These paragraphs, browser, are part of the sidebar. Treat them as a group, or block.
<div>
tag to group all your
introductory material together. That’ll include your
<h1>
,
<img>
, and
<p>
tags at the beginning of your body.
<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.