Proper Use of Headings

Web Designers have used many different methods to markup headings on their web pages. We are going to take a look at three different options and talk about which one is best.

Option1:

<span class="header">Web Design 101</span>

.header {

Font-size: 18px;

Font-weight: Bold;

Color: Brown;

}

This works just fine except those for who use alternate web browsing devices such as mobile phones or screen readers both of which may or may not use CSS properly or at all. Another problem with this is search engines see text inside a <span> tag as just text, not important information which all headings should be seen as important. A <span> is also an inline item and if you wanted the heading to be on its own line you would need to add extra code to put it on its own line.

Option 2:

<p><b>Web Design 101</b></p>

Although this option does make the text bold without the use of CSS still does not look any more important to a search engine than any of the other text on the page. Using this method will also make it very hard to style any of the other <p> and <b> tags without affecting the headings style.

Option 3:

<h1>Web Design 101</h1>

YES! This is by far the best way to markup a heading, with a heading tag. It's simple, understood by all browsers, and search engines recognize the text as important information. There are six different types of heading tags <h1> through <h6>. <h1> is the most important heading and is used for the most important heading on the page the next important heading should be and <h2> tag and so on and so forth. Using a heading tag will also give you the most flexibility when it comes to styling.



*REMEMBER! : <h1> though <h6> should only be used for headings not to make text bigger. You should also not use a smaller heading tag for your main heading b/c you want the text to be smaller. Remember Content and design should be separate from each other. First mark up your content properly. Second style your content with CSS as you see fit.