Writing your first HTML page

To begin writing your first HTML page, all we need is a text editor and a Web browser. I am a big fan of Atom editor provided by GitHub.

Let’s create a new file and save it with .html extension, similarly to .doc used by Microsoft Word.

Now, all HTML documents are required to have a certain structure that include the following declaration and elements.

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
  </body>
</html>

Let me explain it to you line-by-line:

  • <!DOCTYPE html> tells the browser the version of HTML we’ll be using. In this case, though we’re just saying we’re going to use the latest version available.
  • <html> tells that we’re a starting a new HTML document. By the way, these identifiers (or elements) enclosed in < and > are called tags. There are different kind of tags, such as headings, paragraphs, links, etc. Here we say we’re starting an HTML document and down there we’re ending it with </html>. Most of the tags have to be closed, except to a few we will see later.
  • Inside the HTML document, we specify the so called <head> tag, which is used as the top of the document for it’s title, links to other resources, and other metadata. This section is processed by the browser, but not visible to the users.
  • Finally, we have the <body> tag, which defines what will be visible to the users looking at this page.

The HTML element reference can be found here.

Now save the file and open it in the browser. Nothing interesting, right?

Let’s add some more tags:

  <head>
    <meta charset="utf-8">
    <title>Netflix Spain - Watch TV Shows Online, Watch Movies Online</title>
  </head>
  ...
  <body>
    <h1>See what's next.</h1>
  </body>
  • Firstly, we’ll add the <title> of the page just like on the Netflix site.
  • Then, we’ll add the <meta> tag defining the character encoding of this document, so that the browser would know how to show special characters in different languages.
  • Finally, we’ll extend the <body> section with something interesting for the users, the main heading <h1> as on the Web site.
Bitnami