HTML elements
To markup our page content, we take the text to which we want to apply some structure and we insert it into an HTML element. The element we use determines the structure and meaning of that content.
There are different elements for each type of structural component.
Let’s start with the most obvious unit of structure: the paragraph. The HTML element used to markup a paragraph of text is the p element.
Boxes nested in boxes
You can think of each HTML element as a sort of “box”. We will create the “box” by marking the start and end of the box and putting our content—the paragraph’s text—between these two “tags”.
We create these tags using a pair of angle brackets: <>. To make clear whether we are “opening” or
“closing” the element, we add a slash to the closing tag: <></>. Finally, we add the name of the element as a label to both tags:
<p></p>. Note that the label comes after
the slash in the closing tag.
And that’s it! Most of the rest is just learning the various element names. Easy peasy.
So we can mark up a couple paragraphs of text like this:
p elements. <p>Donec nisi sem, malesuada ut erat eu, placerat elementum sapien. Ut euismod molestie sapien, eu luctus eros feugiat ut.</p>
<p>Sed ultrices leo vel ornare rutrum. Aliquam mollis erat sit amet semper aliquam.</p>
And here is how those paragraphs will appear on our page:
Donec nisi sem, malesuada ut erat eu, placerat elementum sapien. Ut euismod molestie sapien, eu luctus eros feugiat ut.
Sed ultrices leo vel ornare rutrum. Aliquam mollis erat sit amet semper aliquam.
Note how the whitespace is collapsed! That’s important.
Final note: there are around 115 HTML elements, plus some old “deprecated” ones. Deprecated means on the way out. Don’t use deprecated elements.
There are also a few experimental elements and attributes. It is a good idea to wait until they are available in most browsers. You can check availability on the Can I use website.
But whatever you do, do not try to memorize all the HTML elements. There are many you will rarely if ever need. The ones you need regularly, you will remember just through common use.
You can always look up elements from a list to find what you need. The best source is Mozilla Developer Network (MDN).
Next: Block vs. inline elements
Previous: Basic HTML