In the previous HTML example, we rushed a bit to avoid getting lost in too much talk.
This was the HTML we wrote:
<p>A paragraph of text</p>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
I want to give you results, fast, and quick, and get you in motion as soon as possible. You now have an HTML page you can look at!
But that HTML file we saved didn’t really have all the elements a proper HTML file needs.
What do I mean?
Here’s a more correct version of that:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>A paragraph of text</p>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</body>
</html>
The elements we had before are wrapped into the body tag.
That, along with head (in this example empty), is contained in the html tag, which is the root tag.
body contains the visible elements of the page.
head is used to contain special information about the content and more, as we’ll see later.
In a document, we can have only 1 appearance of html, body and head.
Finally, at the top we have the doctype: <!DOCTYPE html>. This tells the browser “this is an HTML file”.
Notice I used an indentation of 2 characters for nested tags.
Nested tags should be indented.
In the example, the ul tag contains the li tags, so li tags are nested.
Use 2 or 4 characters, or the tab character to indent those nested elements, depending on your preference, but keep a “tree structure”. That will make it much easier to visually parse an HTML file.
Lessons in this unit:
| 0: | Introduction |
| 1: | ▶︎ Your first HTML page |
| 2: | Text tags |
| 3: | Attributes |
| 4: | Links |
| 5: | Images |
| 6: | Lists |
| 7: | Head tags |
| 8: | Container tags |
| 9: | DEMO Using CodePen |
| 10: | DEMO Using VS Code |