HTML Basics: Your first HTML page

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.

In the previous HTML example, we rushed a bit to avoid getting lost in too much discussion.

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 quickly 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 one 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 two spaces for nested tags.

Nested tags should be indented.

In the example, the ul tag contains the li tags, so li tags are nested.

Use two or four spaces, 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:	Using CodePen
10:	Using VS Code
11:	What is the Doctype