HTML5 Tutorial - HTML Headings

Posted by Ridwan Fadilah on Jul 05, 2020 - 01:26 pm

HTML Headings

Learn about 'Headings' in HTML5. The important element for Search Engine Optimization.

HTML Headings are important and useful for Search Engine Optimization. HTML headings are used by the search engine to index the structure and content on a website.

The heading is a title or subtitle that will display on a web page.

HTML Heading Tags

HTML headings defined by the <h1> to <h6>.

Example:

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

The example above will display by the browser like this:

Heading Tags

The H1 is the most important because it used as the main title. The headings are big and bold but, don't use the heading elements to make a text BIG except you use the heading for a title.

If you add a heading the browser will automatically add some white space.

Styling The Heading Elements

HTML5 allows you to add some styles to the heading elements. You can set the size, color, and background-color to the heading elements.

Use the HTML5 'style' attribute then add the font-size, color, and background-color CSS property inside the style attribute.

Font Size

You can specify the size of the heading using the style attribute and the CSS font-size property to make it bigger or smaller.

Example:

<h1 style="font-size: 69px;">Heading 1</h1>
<h1>Heading 1</h1>

The example above will display by the browser like this:

Heading Size

Heading Colors

Add the CSS 'color' property to change the text color.

Use this following syntax to change the text color of the heading elements:

<h1 style="color: red;">Heading 1</h1>
<h2 style="color: blue;">Heading 2</h2>

Now, the headings will display by the browser like this:

Heading Colors

Heading Background Color

We still use the style attribute to set the background color. The difference with the example before is on the CSS property.

Use the CSS background-color property to change the background.

Example:

<h1 style="background-color: grey;">Heading 1</h1>

The example above will display by the browser like this:

Heading Background Color

Combine The Heading Style

Last but not least, you can also combine your multiple styles for the HTML5 heading element.

Example:

<h1 style="font-size: 69px; color: white; background-color: grey">Heading 1</h1>

The code above will display by the browser like this:

Heading Styles

Okay, that's the basic tutorial about the HTML5 Headings. Find another tutorial of HTML5 on the related article below.

You can also find another tutorial on our YouTube Channel.

Thanks for reading this tutorial.


Related Articles