Web design Dorset from Websites by Mark

The h4 html tag – Websites by Mark

01305 881027 / 01993 820005

The h4 html tag

Overview

In HTML h tags stand for heading and this is split into 6 different h tags (h1, h2, h3, h4, h5 and h6). The <h4> tag itself is considered to be a small repeating sub header for a webpage. By default it is displayed as bold version of the body text and smaller than the <h3> header. As with all h tags it is considered important for SEO.When text is put between the opening and closing <h4> tag it is displayed as a Small heading. Unlike <h1> a <h4> tag can be used multiple times on a webpage as its job is to be the heading for a web pages sub topics.

Basic Usage

<h4>Small header text</h4>

Any text between the opening and closing tag will be displayed as a small heading.

Advance Usage

It is possible to style and add functionality to the <h4> tag, this is done by adding an attribute to after the h4 in the opening <h4> tag

Attributes allowed for the <h4>tag include :-class, dir, id, lang, style and title.

In most cases class and id are used and its basic usage is shown below

<h4 id=”header”>Small header text</h4>

With all attributes there is a space after the initial h4 then the attribute name, then an equal’s sign and the identifier of the attribute in double quotes.

Both id and class attributes refer to CSS styling of the element and is either stored in the <head> of the webpage on in an external file.

With id this usually refers to a single instance on a page where as class usually refers to a repeating element on a page, it is for this reason for the <h4> tag the class attribute is nearly always used over the id attribute although in practice it makes no difference.

The attribute style allows you to include css style information for a single <h4> tag.

The dir attribute allows for left reading and right reading text, lang allows you to specify a language for the tag and title allows you to include extra information for a tag.

It is possible to attach scripts to tags, as well adding functionality to a webpage, these scripts tend to be written in Javascript and therefore outside the scope of this document

Examples

<h4>Small header text</h4> – basic usage example.

<h4 id=”header”>Small header text</h4> – heading 4 which is styled by the id header.

<h4 class=”headerclass”> Small header text </h4> – heading 4 which is styled by the class headerclass.

<h4 id =”header” class=”headerclass”> Small header text </h4> – heading 4 which is styled by the class headerclass and the id header.

<h4 style=”color:#F00″>Small header text</h4> – heading 4 which has a custom colour of red.

<h4 dir=”rtl”>Small header text</h4> – heading 4 where the text reads from right to left.

<h4 lang=”uk”>Small header text</h4> – heading 4 where the language has been tagged as UK.

<h4 title=”ptitle”>Small header text</h4> – heading 4 where the tag has been titled ptitle.

Final Thoughts

Touching on just the surface of the <h4> HTML tag it is easy to see how versatile it is. To take full advantage of it an understanding of CSS is an advantage.