In the previous lectures, you learned about the most common HTML tags. It’s hard to imagine a web page without headings, paragraphs, links, lists, and tables.

Today, I’m going to tell you about tags that are not so obvious.

Document type

HTML has been around for a long time and exists in several versions. Usually, at the very beginning of an HTML document, there’s a tag that indicates the type or version of HTML that is used on this site is indicated. The special element <!DOCTYPE> is used for this. Here’s an example for HTML5:

<!DOCTYPE html>

In this example, everything is very simple - we tell the browser that the document type is html. Older versions of HTML (like HTML4) are a little more complicated, but let’s not waste time on that.

Just remember to always add the <!DOCTYPE> tag with a single html attribute at the beginning of an HTML document.

The <html> tag

After the document type, there is an <html> tag that defines the start and end of the HTML file.

Inside the <html> container, everything can be divided into two blocks: the header and the body. The header is defined by the <head> tag, the body - by the <body> tag.

Document title

<head> is a paired tag. It is also called a container for metadata.

Metadata is the data about data; information about scripts used on the page, styles, and so on. The information specified in <head> is not displayed on the page. Everything except the title tag.

The <title> tag defines the title of the document. The title should be text only.

The use of the header is very important:

  • it’s displayed in the browser tab
  • it’s used as page title when adding to favorites
  • it’s displayed in search results, for example on google.com
<html>
  <head>
    <title> First Page </title>
  </head>
</html>

Take a note that <h1> - <h6> tags that define text headers are very different from the <head> tag. Don’t confuse them!

Meta tags

Also inside the <head> tag you can often see the <meta> tags.

This is an unpaired tag. We provide all data to it using attributes.

— What can I specify using the <meta> tag?

— For example, the author of the page:

<meta name="author" content="Hero">

The name attribute specifies the name of the metatag, which also indirectly sets its purpose. The content attribute sets the value of the metatag specified with name.

You can also specify a page description, or keywords that will help search engines like Google find your site for certain queries:

<meta name="description" content="My first website">
<meta name="keywords" content="HTML, CSS, JavaScript, Coderslang">

Pay attention to the keywords metatag and its content attribute. We needed to specify several values for the attribute and we listed them in a single string separated by commas.

The structure of our document has changed and looks like this:

<!DOCTYPE html>
<html>
  <head>
    <meta name="author" content="Hero">
    <meta name="description" content="My first website">
    <meta name="keywords" content="HTML, CSS, JavaScript, Coderslang">
    <title>First Page</title>
  </head>
</html>

Document body

<body> - is a paired tag that contains everything that a visitor to your site will see: all headings, paragraphs, images, links, tables, lists, etc. There can be only one <body> tag in a document…

Let’s add some inner tags to the <body and get a page with one paragraph and heading:

<!DOCTYPE html>
<html>
  <head>
    <meta name="author" content="Hero">
    <meta name="description" content="My first website">
    <meta name="keywords" content="HTML, CSS, JavaScript, Coderslang">
    <title>First Page</title>
  </head>
  <body>
    <h1>First heading</h1>
    <p>First paragraph. Also in this paragraph there is text written in <b>bold</b> font</p>
  </body>
</html>