Creating a Basic HTML5 Document

But First …

You’ll need someplace to save your document — preferably on GitLab.

Step by Step

Add a <!doctype html> element to the very first line of your index.html file.

<!doctype html>

This tells the web browser that this is an HTML5 web document.

Now add an html element, which goes around everything else.

<!doctype html>
<html>
</html>

The html element has two tags, an opening <html> and a closing </html>. Most elements have two tags.

All HTML5 docs have two main parts

  1. head
  2. body

The head and body elements go inside the html element.

<!doctype html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

First let’s deal with the head, which is a place to put meta information about the content in the page.

Let’s start with a title for bookmarking.

  <head>
    <title>My Web Page</title>
  </head>

Now we need the actual content, which does in the body element.

For now let’s just add some simple text.

  <body>
    My Web Page
  </body>

Now preview your document.

Even though it is fine for My Web Page to just be text, let’s give it some semantics.

  <body>
    <h1>My Web Page</h1>
  </body>

Better but what good is heading without some paragraphs.

  <body>
    <h1>My Web Page</h1>
    <p>Well hello there.</p>
  </body>

You’ve finished a basic HTML5 document with all the critical pieces. Of course, this is just the beginning.