HTML elements

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

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

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

  • <!doctype>
  • <area>
  • <base>
  • <br>
  • <col>
  • <embed>
  • <hr>
  • <img>
  • <input>
  • <keygen>
  • <link>
  • <meta>
  • <param>
  • <source>
  • <track>
  • <wbr>

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 <p> 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 <em> element extends beyond the <p> element:

Example with an incorrectly nested HTML element

Example with the correct nesting:

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

Here the <em> element is correctly nested it is completely in the <p> 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.

Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011-2018 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen