HTML H1 to H6 Tags

How to use the HTML h1 to h6 headings to create sections and headlines.

The h1 to h6 Elements are used for Headlines. When the header elements are used alone, they create a section in a page.

The heading elements should be used together with the sectioning elements, such as article, and section.

Headings are important for certain devices, such as screen readers, who depend on their correct use to navigate properly on a site.

Atributtes

Atributte:	Value:	Description:
HTML Attributes	Global Attributes	Global, I18n, Event

Using HTML h1 to h6

Note. Generally its best to use h1 first, then h2, h3 ETC.

<h1>h1 - Headline1</h1>
<h2>h2 - Headline2</h2>
<h3>h3 - Headline3</h3>
<h4>h4 - Headline4</h4>
<h5>h5 - Headline5</h5>
<h6>h6 - Headline6</h6>

Removing the space after headings

To remove, or reduce the space after headings, you should use the Margin and Padding Properties, like shown in the below example.

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>How to remove space after headings - Brugbart Vision</title>
    <meta name="description" content="How to remove margin on the h1-h6 elements of HTML.">

    <style type="text/css">
    * {
      /* CSS Reset code, for browser compatibility. */
      margin:0;
      padding:0;
    }
    article, section {
     /* fix for older browsers */
     display: block;
    }
    h1 {
    }
    h2, h3, h4 {
     margin: 0 0 1.5em 0;
    }
    </style>
  </head>

  <body>
    <article>
      <h1>How to remove remove space after headings</h1>
      <p>This Vision shows how to remove, or alter the space after headings, also known as the <a href="http://brugbart.com/References/css-margin-property" title="How to use CSS Margin.">margin</a> of the element.</p>
      <p>The bottom <a href="http://brugbart.com/References/css-margin-property" title="How to use CSS Margin.">margin</a> is set at 1.5em, to achieve a bottom margin on the h2-h4 elements.</p>
     <section>
       <h1>The HTML heading of a subsection</h1>
       <p>Sections should be made using the section element, which allows for much deeper sections then the normal headings.</p>
     </sections>
     <section>
       <h1>To comment on this Vision</h1>
       <p>If you want to comment on this Vision, then be sure to check out the <a href="http://brugbart.com/References/html-h1-h6-tags" title="How to use the HTML headings.">h1-h6 element</a>reference.</p>
     </sections>
    </article>
  </body>

</html>

Brugbart Vision!

Atributtes

Using HTML h1 to h6

Removing the space after headings

Links