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
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
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 this unit:
|1:||▶︎ Your first HTML page|
|9:||DEMO Using CodePen|
|10:||DEMO Using VS Code|