HTML: Your first HTML page

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>

  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>

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>

    <p>A paragraph of text</p>

      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>

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
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!