HTML document structure

doctype
HTML element
Head element
Title element
Body element

The time has come to look at the simplest HTML document for example. We will write code that results in the phrase Hello, world! in the browser window. Typically, this coding practice is the first experience in learning a new language. This statement of the problem draws the attention of the student at once to several key points of programming language (in our case markup language), the main of which is the basic structure of the program (in our case, the Web page).

doctype

Each HTML document that meets the HTML specification of any version (we will specify the latest version) must start with the HTML version declaration string, this is done using the <!DOCTYPE> declaration as follows:

<!DOCTYPE html>

This string will help the browser determine how to correctly interpret the code of the resulting web page. In this case, we tell the browser that HTML complies with the last specification standard.

Although the word doctype is placed in angle brackets (< and >), it is not a tag, it is an instruction specifically designed for browsers, and the exclamation point (!) in the beginning distinguishes it from the rest of the code in the HTML document.

HTML element

After declaring the version and document type, it is necessary to indicate its beginning and end, it is done using the <html> element:

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

This element is also called the root, because all other elements of the document reside in it. The root element can have only two child elements: <head> and <body>.

Head element

The <head> element is a container for other elements that provide information about a document known as metadata. This metadata tells the browser about the location of external scripts and style sheets, setting the relationship between the current Documents and other resources, and may provide additional data for browsers. In addition to the mandatory <title> element discussed later in this chapter, browsers do not display any metadata inside the <head> element.

The <head> element must be the first child element of the <html>, and no content or elements should be placed before it:

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

Title element

The <title> element provides a text header for the document. Each HTML document must have exactly one <title> element, which should be located inside the <head> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
</html>

Browsers display the contents of the <title> element as the title (name) of the document, which usually appears at the top of the browser window or in the tab title:

tag title

Body element

The <body> element is a container for the entire content of a Web page. Everything that is displayed in the browser window and sees the user is contained in it (each HTML document can have only one <body> element). Its main purpose-to separate content HTML document from metadata:

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
  </body>
</html>

That's it! Getting Started you got the perfect billet. This will look like a ready-made document structure with the phrase Hello, world! in the browser window:

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    Hello, world!
  </body>
</html>

With this theme look: