HTML elements

HTML element syntax
Nested elements
Whitespace characters

An HTML element is the basic structural unit of a Web page written in HTML.

HTML element syntax

Syntax of HTML elements consisting of paired tags:

Syntax of paired HTML tags

The element begins with the opening tag.
The element ends with a closing tag.
The content of an element is everything between the opening and closing tags. Content can be text and/or other HTML element.

Note: Do not forget to put the / symbol in the closing tag, it tells the browser that your item is over and that what will be written after it is already another element. If you do not put the / symbol in the closing tag, the browser will take it for a new element nested in the previous one, which the browser thinks is still not closed.

HTML syntax of elements consisting of single tags:

Syntax of empty HTML tags

An element consists only of an opening tag. In HTML, using a closing tag on an empty element is usually invalid. For example, is invalid HTML.

Elements consisting of single tags are called empty element. Total HTML 16 such elements:

<!doctype>
<area>
<base>
<col>
<embed>
<hr>
<img>

<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>

Nested elements

HTML elements, consisting of paired tags, can either contain any other elements, or they can be nested in other elements, and the depth of nesting of elements is not limited.

The following example consists of three elements, two of which are nested:

<html>
  <body>

    <p>My first paragraph</p>

  </body>
</html>

In this example, the element is nested within the <body> element, which, in turn, is nested within the <html> element.

When one element is positioned inside another, you must ensure that the nested element starts and ends within the same element. For example, the following code is incorrect:

<p>My <em>first</p> paragraph</em>

Here the element extends beyond the element:

Example with an incorrectly nested HTML element

Example with the correct nesting:

<p>My <em>first</em> paragraph</p>

Here the element is correctly nested it is completely in the element:

Example with a properly nested HTML element

Whitespace characters

The browser ignores the white space characters in the HTML, so you can use them to your advantage by giving your code a readable look. Whitespace symbols include: tab characters, line wrapping, and normal spaces, which can be used in any number. Example of code that uses whitespace characters:

<html>
  <head>
    <title>Header</title>
  </head>
  <body>

    <h1>My first headline</h1>
    <p>My first paragraph</p>

  </body>
</html>

The example code could be written without using whitespace, but the code would be less readable:

<html><head><title>Header</title></head><body><h1>My first headline</h1><p>My first paragraph</p></body></html>

Because the HTML document code becomes more and more complex over time, it becomes apparent that using whitespace actually improves the readability of the code.

With this theme look: