HTML is the language of the web, so, as a user of the web, it’s the language you have spent the majority of your time with, whether you knew it or not. Now we’re going to take a closer look at how it works.
The fundamental building block of HTML is a tag. Tags allow web developers to tell things to the browser like "make this text a header" or "include this image". Tags all follow the same format like this:
It's just some text wrapped in < and > characters. The most basic tag is the "break" tag. This is represented in HTML as
<br> and tells the browser to create a new line. Over the next few lessons, we are going to create a simple profile page for a brand-new Flatiron student.
Go ahead and add in more
<br> tags and see what happens.
While the break tag is very useful, the first thing we really need for our profile page is a header. Good news—there’s a tag for that! It's the
<h1> tag. This will make the text larger and bolder, and make it the most clearly important text on the page. Obviously, we don't want all of our text as a header. To tell the browser which text should be a header, and which shouldn't, we use closing tags. Closing tags are just exactly the same as tags you've seen before but prefixed with a /. The closing tag for
<h1> would be
</h1>. Take a look at this in acton:
Any text you put between the
</h1> will be a header. Great, right?
Most HTML tags work just like this:
So when we talk about “what kind of tag we’re using,” what are our options? How many HTML tags are there? There are a lot! Another useful example is the paragraph tag which is represented with a
<p>. The paragraph tag tells the browser the text in between it is a paragraph and puts two new lines above and below the text.
When we’ve put all these pieces together—opening tag, content, closing tag—we now have a larger piece we call an HTML element.
While most of writing HTML is writing tags like the ones above, there are some special tags that tell the browser about what's coming up. These are tags that are never seen by users, but the browser uses them to understand the external resources your web page needs. Here is a full example of a web page:
You'll notice that the web page looks identical to the one above. If you look at the code you will see three new tags:
<body>. You might have also spotted these tags in the last lesson when we looked under the surface of flatironschool.com and peeked at the HTML underneath. That’s because these three tags are in every single webpage. Here’s what they do:
<html>tag tells the browser "hey contained in here is a bunch of HTML code."
<body>tag tells the browser "contained in here is the stuff I actually want you to show the user."
In many future examples, we will omit these html, body and head tags due to brevity. Be sure to remember them when you create your own websites though!
Congratulations! Now you know how we build HTML. All HTML uses tags, and most tags come in pairs of an opening tag and a closing tag. There are a lot of existing HTML tags we can use to display text on webpages, such as
</p>. A set of HTML tags with enclosed content is an HTML element. We use the
<body> tags to define our overall HTML document structure.
All right, now we’re rolling with HTML. Let’s add something more interesting. Go on to the next lesson to see how we can start pulling images into our webpages.