What your browser speaks
HTML is the language of the Internet. Whenever you visit a website, what you see is the result of HTML being interpreted and rendered by your browser.
HTML is simply the content you see on the screen, with extra markup around it to help format it. In the example above, the
<p> is an opening tag that denotes the start of a paragraph, and the
</p> closes the paragraph. The whole paragraph can be referred to as an element.
HTML is more than just paragraphs, though. Let's get familiar with some more HTML elements!
One of the best ways to create hierarchy is with headers. At the top of this page, the "HTML" is actually an
h1, so the code looks like
h1's are the biggest options for headers, but there are also
h3's, all the way down to the rarely-used
h6. For example, the gray "Headers" at the top of this section is an
We can use anchor tags to link to other pages!
<a href="http://jumpman.space">Jumpman Jumpman Jumpman</a>
href attribute contains the URL that the link will send you to, and the content inside the tags is what the user actually sees. So, the code above ends up producing this: Jumpman Jumpman Jumpman
If you're linking to another website, it's important to always include the
http:// at the beginning of the link inside the
However, when you link to a different page on the same website, you should always omit both the
http:// and the base URL—so, for example, if I wanted to link to
evan.land/jade/css.html, the tag should look like this:
<a href="/jade/css.html">. This means that if you ever just want to link to the homepage (e.g.
evan.land), the correct
href is simply
Note that the
href goes inside the tag itself! This isn't the only element for which this happens. Another great example is the
It's actually really easy to put pictures on websites—there's a tag for that!
<img> tags do not need need a closing tag, i.e.,
Also, note that the source of the image (a URL specifying the location of the image) goes inside the tag itself. This isn't the only attribute that can be specified inside the tag: we can also set the height and/or width of the image like this!
<img src="http://imgs.xkcd.com/comics/tags.png" width="100%">
<img src="http://imgs.xkcd.com/comics/tags.png" height="300px">
There are several valid formats for these
width attributes, which we'll cover in more detail in our section on CSS.
The container element:
<div>'s are container elements. They offer a way to organize different HTML elements by nesting. In other words, a
<div> will almost always contain other elements inside it, like so:
<div> <img src="http://imgs.xkcd.com/comics/tags.png" width="300px"> </div>
Note that the
img is indented in this code block. It's common practice to indent whenever an HTML element is nested inside another one. When this happens, we refer to the
div as the parent element, and the
img as the child.
We'll learn more about the importance of divs when we move on to styling our pages. For now, we can just think of them as organizational tools.
For anyone who likes typography, this is the fun stuff! You can use tags to make your type bold or italicized.
<strong>I'm bold!</strong> <em>I'm italicized!</em> <strong> <em>I'm bold and italicized!</em> </strong> <em> <strong>I'm bold and italicized, too! The order doesn't matter here.</strong> </em>
OK, we've already learned a lot! There are more useful HTML elements out there, but we still have a pretty good idea of what HTML looks like. Now, let's focus on how to use HTML in practice.
Here's a very minimal skeleton. We can fill it out later once we start building our own pages!
<!DOCTYPE html> <html> <head> <!-- This is a comment. --> <title>Wow!</title> </head> <body> <!-- Put all content here. --> </body> </html>
Check it out! Let's look at this file line-by-line to understand it.
Every HTML file must have exactly this as its first line. Otherwise, your browser won't know how to interpret the file.
Remember how you can nest HTML elements? Well, it turns out that every HTML file is nested inside one
htmlelement! This line of code is almost always the second line of code inside an HTML file, and it must contain exactly two children:
headelement contains information about the HTML page that is important, but shouldn't be rendered inside your browser alongside all the content. For example, this is how your browser knows what text to put in the tab (for this website, “From Zero to Website”), or the little icon next to it (the green J).
<!-- This is a comment -->
Comments can help clarify confusing sections of code. They're a useful way to explain your code to someone else (most often, the “someone else” ends up being you 2 months later, so be nice to your future self).
Comments must begin with
<!--and end with
titleis that small blob of text that's displayed in your browser's tab. It won't affect anything else on the page.
headtag. The head must be closed before the body begins. …That's a weird sentence.
bodyis where all of the content on the page goes. All of the tags we talked about before—
That's what a basic HTML file should look like! We're only missing one thing—the name of the file. The only rule is that the file must end in
.html. However, there is a special case:
index.html. This will fold in nicely to our next mini-topic: the directory structure for websites.
This might be a little complicated, and it's hard to explain without looking at an example. So, let's use this website as an example! The root directory of this website is a folder called
jade/, and it contains six HTML files. Here are the files and their respective URLs:
Note that every page's URL must contain the file name, except for
index.html. When a folder contains a file named
index.html, that is the default page that will be shown when you don't specify a file name.
Also, this is an interesting case, because the jade folder is really a folder that lives inside of my personal website. So what the directory structure really looks like is:
evan.land/ - index.html - jade/ - index.html - html.html - css.html - js.html - git.html - nextsteps.html
There are other files apart from the HTML, so this is a little simplified. Still, this should help clarify the structure.
We're almost ready to build out our own content! But first, we have an important tool to talk about.
This is a huge problem. If something's broken on your site, how do you know what's happening? Or, maybe more interesting, if you see something awesome on another website, is there a way to find out why it looks the way it does?
Fortunately, this problem has already been solved beyond our wildest dreams by very smart people! You can inspect element by right-clicking in Chrome, Safari, or Firefox. (In Safari, you might have to enable this manually).
You can also view the source code in
Tools > Web Developer > Source Code in Firefox,
View > Developer > View Source in Chrome, and
Develop > Show Page Source in Safari.
Try viewing the source for this page now! You'll see some things that look familiar, and some things that might look a little bizarre. It's great practice to do this whenever you come across a website you really like and want to see what's going on under the hood.
If there's something you don't understand, Google it. Always. Every time. Most of the learning we do as developers happens while we're on the job, or building something on our own, not from tutorials like this. Don't be afraid to explore and learn something new.
Let's review some of the language we covered in this lesson. I know this might seem a little silly, but there's actually a great reason to focus on vocabulary, and it's not because I want to treat this like a middle school English class.
It is really important to be able to hold a technical conversation. This is something I wish I'd learned earlier on in my life as a programmer! You'll be able to communicate much more easily with other developers if you understand these words and know when it's appropriate to use them.
- Stands for HyperText Markup Language. A standard developed in 1991 by Tim Berners-Lee.
- A component of an HTML page. Every HTML page is made up of elements.
- The code that opens and closes HTML elements.
<p>is an opening tag;
</p>is a closing tag.
- Also known as headings, although that terminology is getting outdated. Generally speaking, they describe the topic of a section. In decreasing order of priority, they go from
- anchor tags
- More commonly known as links, represented by
- A property of an HTML element, like the
hrefin a link or the
srcin an image.
- HTML elements can be nested inside one another.
- A child element is nested inside its parent.
- Helps to clarify your code. Only visible in the source code. In HTML,
<!--opens a comment and
-->closes a comment. Comments are formatted differently in every language.
- root directory
- The top folder in a file system.
- source code
- Raw code written by a programmer. HTML source code is viewable using the developer tools in your browser.
- inspect element
- You can inspect element using your browser to view the properties of a specific HTML element.
Now it's time to apply what you've learned! Let's build something fun.
Create a folder at the same level as your
Documents folder. It will be your working directory for the remainder of this tutorial.
Open up Sublime Text. You should have downloaded this already, but if not, do so now!
In Sublime Text, create a new file called
index.html and save it inside your working directory.
Working on the file
You can view the HTML file in your browser by right-clicking and choosing "Open with...", then choosing your browser.
Whenever you want to update your file, make sure you save the file! Saving is very important, not only to make sure your work doesn't disappear, but also because your browser will only display the most recently saved version.
- A header with your name in it.
- A picture of you. Or of your favorite food. Or your least favorite rapper.
- A paragraph describing yourself. Or your favorite food, or least favorite rapper.
- At least three links to other websites.