Monday, 22 April 2013

HTML Headings



HTML Headings

Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.

Headings are important in HTML documents.

Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages.
Since users may skim your pages by its headings, it is important to use headings to show the document structure.
H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.



Description HTML Headings

A heading in HTML is just what you might expect, a title or subtitle.
By placing text inside of <h1> (heading) tags, the text displays bold and the size of the text depends on the number of heading (1-6). Headings are numbered 1-6, with 1 being the largest heading and 6 being the smallest.


1.   Heading tags will be recognised by browsers which don't recognise style sheets (or use a user-defined style sheet).
2.   Heading tags are used by search engines to identify words which are more important than the rest of the page text. The theory is that headings will sum up the topic of the page, so they are counted as important keywords.
3.   Screen readers and magnifiers (for the visually impaired) rely on headings to navigate the page.
4.   Heading tags make it easy to make global changes to headings. Although you could theoretically achieve this by defining a new css class, it makes more sense and tends to be easier to define a style for heading tags.




Example

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<p><b>Tip:</b> Use the &lt;h1&gt; to &lt;h6&gt; tags only for headings. Do not use them just to make something bold. Use other tags for that.</p>

</body>
</html>


Display

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6


0 comments:

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More