HTML headers, lines and comments

HTML headers

Headers are an important part of an HTML document, usually a headline is a brief description of what will be presented below on the page. In HTML, the headings are labeled with the heading <h1>, <h2>, <h3>, <h4>, <h5> and that <h6> represent a sort of header hierarchy: from the most important (<h1>) to the smallest (<h6>).

All header tags are block, and when displayed on the page, they will have indentation from the top and bottom, separating them from the other elements of the page, and occupy the entire available width. The text enclosed inside the header tags is displayed in bold font and has a different size corresponding to the importance of the header. By default, the first-level header (<h1>) is displayed in the largest bold font, with each subsequent header being represented in the smaller size:

<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>
Try it »

Use HTML headers only to label the page headers. Do not use them to make text larger or bolder, because search engines use headers to index the structure and content of Web pages.

Note: do not forget to put the closing tag to each of your headers, browsers do not insert them automatically, and skipping the closing tag may result in incorrect display of the text following the title.

Horizontal line

The <hr> tag is used to create a horizontal line across the entire width of the page. Lines are usually used to separate the contents of a document from each other or to demonstrate visual separation:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>
  <body>

    <p>The hr tag defines a horizontal line:</p>
    <hr>
    <p>Paragraph</p>
    <hr>
    <p>Paragraph</p>
    <hr>
    <p>Paragraph</p>

  </body>
</html>
Try it »

By default, the color of the horizontal line is gray, and the width is 1px. To change the color, width, and style of a line, you can use the CSS property border to change all three parameters at once. Or use the: border-color, border-width, and border-style properties to change only one of the parameters:

<p>Horizontal separator line:</p>

<hr style="border: 2px solid blue;">

<p>Change the color of the line:</p>

<hr style="border-color: red;">

<p>Change the width of the line:</p>

<hr style="border-width: 3px;">

<p>HTML dashed line separator:</p>

<hr style="border-style: dashed;">
Try it »

Comments

You can add comments to the HTML code that will not be displayed in the browser. They must start with the characters <!-- and end with the symbols -->. All that is enclosed between these characters, when viewing the page in the browser remains invisible.

There are many reasons to use comments in HTML documents, such as explaining code blocks, temporarily disabling code during debugging, and so on.

Note: comments can span multiple lines. Remember that everything written between <!-- and -->, even the HTML code, will be ignored by the browser.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>
  <body>

    <!-- This comment will not be displayed -->
    <p>Normal paragraph</p>

  </body>
</html>
Try it »
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 - 2021 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen