Grouping and Nesting HTML Elements
Elements convey meaning. And in order to display your content well, everything should be inside of an element, not just words you want emphasized.
For example, let's make "Calamondins are delicious!" the header at
the top of our page. To do that, we'll use a header 1
element aka the h1 element.
Put <h1>Calamondins are delicious!</h1>
into the editor, so that it looks like this:
Calamondins are delicious!
Okay, that looks pretty good, but now the emphasis on delicious is gone. How will people understand just how delicious they are without that emphasis??
Clearly, this is a web page in crisis.
Good news: even though your
Calamondins are delicious!
text is inside
of an h1 element, you can still use the
em element in there like before.
Try adding back the em element around
delicious!.
I've highlighted the changed part of the code
below with a
black background
to make it easier to see:
When you have elements inside other elements like this, make sure the opening and closing tags are always correctly nested — outer elements always open first and close last.
This is good:
<h1>Calamondins are <em>delicious!</em></h1>
This is bad:
<h1>Calamondins are <em>delicious!</h1></em>
The inner element (em in this example) always needs to
close before the outer element (h1 in this example) closes.
When you're done, the preview should look like this:
Calamondins are delicious!
Darn tootin'.
So our audience knows calamondins are delicious. Mission accomplished. But do they know why? Not yet! Let's help them out by adding some details (the new code is the code with a black background):
Calamondins are delicious!
They are so tiny and so wonderfully sour!Now let's try adding a few more lines to our calamondin page. How about this:
They are so tiny and so wonderfully sour!
And you don't even have to peel them or anything!
Calamondins are delicious!
They are so tiny and so wonderfully sour! You can eat one in a single bite! And you don't even have to peel them or anything!Notice how in the preview, all of those sentences are on the same line, even if you put them on different lines in your HTML?
To get them on different lines, you'll need to put them
inside p elements, also known as "paragraph"
elements. Try this next:
<p>They are so tiny and so wonderfully sour!</p>
<p>You can eat one in a single bite!</p>
<p>And you don't even have to peel them or anything!</p>
Calamondins are delicious!
They are so tiny and so wonderfully sour!
You can eat one in a single bite!
And you don't even have to peel them or anything!
There, that's better!
Since we seem to be building a list
of awesome things about calamondins,
let's make it look like an actual list
with some ul ("unordered list")
elements
and some li ("list item")
elements.
The way this works is the
ul element surrounds the entire list,
and one li element goes around each individual
item in the list. Although it's not required,
traditionally we indent elements that
are inside other elements, as you
can see with the li elements here:
<p>Awesome things about calamondins:</p>
<li>they are delicious</li>
<li>they are sour</li>
<li>they are small enough to eat in one bite</li>
</ul>
Calamondins are delicious!
Awesome things about calamondins:
- they are delicious
- they are sour
- they are small enough to eat in one bite
Thanks to the ul and li
tags, we've got an actual bulleted list!
So fancy.
Elements for Every Occasion
While it was originally used only for simple documents, these days HTML has elements for just about anything you can think of to do on a website: video and music playback, showing images, filling out forms, and all kinds of other useful things.
You just used some well-known tags, h1 for a
headline, p for a paragraph, and ul
and li for a list.
But there are a ton of other tags you might use:
| Tag | Purpose |
|---|---|
a |
A link (the 'a' stands for "anchor"). |
h1 to h6 |
Various headers, h1 is the most important, h6 the least. |
ul |
Start a bulleted list (an 'unordered list'). |
ol |
Start a numbered list (an 'ordered list'). |
li |
A single thing within a list (a 'list item'). |
table, tr,
td |
Tables (like this one) with table rows and data cells. |
form |
A form that can collect data from user input. |
input |
A text input, a button, or a checkbox in a form. |
div |
A section marker that doesn't do anything specific to the contents itself, but does make a new line after. (a 'division'. More on this later) |
span |
Another section marker that doesn't do anything to its contents, but is inline - it does not make a new line after. |
The latest version of HTML, HTML5, introduced lots of new tags to make the HTML more semantic, meaning the tags should describe the content they contain. Some of the new elements introduced by HTML5 include:
| Tag | Purpose |
|---|---|
section |
A section of a document: a thematic grouping of content. |
nav |
A navigation section, containing links to other pages or to parts within the current page. |
header |
The header for a page or section of a page. (This is different from the head element, which contains information about the page!). |
footer |
The footer for a page or section of a page. |
main |
The main content of a page. |
aside |
Content that's related to the main content, but could be considered separate from it. |
You don't need to memorize all the tags! You can always look them up or learn more about them on sites like these:
HTML5 Doctor Mozilla Developer Network
Try this
What happens if you change the <ul>
in your HTML to <ol>?
(don't forget to change the closing tag, too!)
Next
Alright, now that we've got our fancy list, let's get a little more advanced in the lesson about HTML Structure.