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 as this:
It's just some text wrapped in
> 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 text and see what happens.
While the break tag is very useful, the first thing we 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. Now, 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 the same as tags you've seen before but prefixed with a
closing tag for
<h1> would be
</h1>. Take a look at this in action:
Any text you put between the
</h1> will be a header. Pretty great,
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:
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 want you to show the user."
In many future examples, we will omit the
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.
View Basics of HTML on Learn.co and start learning to code for free.