HTML: The H1-H6 Heading Tags

0
522
HTML h1-h6 tag

The heading tags, <h1>-<h6>, are used to differentiate different headings and sub-headings of a HTML document.

When you think about heading tags, think about how you want to present the document structure for information use. These tags form a top down hierarchy to create structured sections of topics. Make sure that you create the proper hierarchy because if you skip a heading, that is bad SEO and your document will be not get a high ranking by search engines.

The <h1> tag is a very important tag for SEO purposes. Generally, you should only have one instance of it in your document to give all the SEO weight it can muster. In search engines, and RSS feeds, they show up in the results as being bolder text and clearly an eye grabber. This is your means to market your document to the masses – don’t screw it up. In HTML 5, there can be multiple <h1> tags assigned to <section> and <article> tags but is generally not a good idea to layout a document this way because it makes the document have many different topics that may not be totally related to the document title. In a home page say for a news site, this may be fine. But with individual news articles, it can be confusing.

It is recommended that you put the most important keyword(s) in the <h1> tag. Do not overdo it by keyword stuffing this tag. Also, do not have the title and your <h1> tag having the same text – make both unique. You do not want your document to look keyword spammy. A good guideline is to pretend that you are writing an English paper as a homework assignment. Just write like you do, fully knowing what looks good and reads good to the audience.

It is suggested that you don’t go more than three levels deep to avoid confusing the user when he reads the page. Readability should be a strongly considered. The headings are styled in a larger font and style with the higher level headings larger than the smaller. When you start getting into the <h4>-<h6> range, you have to really start fussing with the font size. When those font sizes start being smaller than the paragraph text itself, it becomes really hard to read. Some may then want to start an <h6> heading at the same font size as a paragraph text and then scale up. But then, as you graduate (say in em’s or percentages) higher for the font-size, you either create enormous size <h1&gt and <h2> fonts or the change in em’s or percentages are so small that to the naked eye, there really is no difference.

For a practical example of the proper use of heading tags, imagine a document that is about Mexican food. The title may be “Mexican Food Categories”. It can start off with a little description and then talk about all the different types. Each one of those types would be assigned a heading tag. When you create the overall structure of your documents, always get in the habit of creating the topics of your page in an outline fashion.

Do so in a tree like hierarchy and put careful thought in how you wish to communicate your ideas. Each level can be assigned a heading associating with the depth and styled with CSS to make the page more readable.

Mexican Foods
  Burritos
    Beef
    Chicken
    Pork
    Vegetarian
  Tacos
    Beef
    Fish
  Salsa
    Guacamole
    Tomato
  Soups

Example Code:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Mexican Food Categories</title>
  5.     <link href='https://fonts.googleapis.com/css?family=Hind' rel='stylesheet' type='text/css'>
  6.     <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:700' rel='stylesheet' type='text/css'>
  7.     <link href='https://fonts.googleapis.com/css?family=Droid+Serif:700italic' rel='stylesheet' type='text/css'>
  8.     <style>
  9.       h1 {
  10.         font-family: 'Source Sans Pro', sans-serif;
  11.         font-size: 2em;
  12.       }
  13.       h2 {
  14.         font-family: 'Hind', sans-serif;
  15.         font-size: 1.6em;
  16.       }
  17.       h3 {
  18.         font-family: 'Droid Serif', serif;
  19.         font-size: 1.2em;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <main>
  25.       <h1>Mexican Foods</h1>
  26.       <p>Many different types of Mexican foods exist in the world.</p>
  27.  
  28.       <h2>Tortilla</h2>
  29.       <p>A tortilla is a soft flat bread made from wheat flour.</p>
  30.  
  31.       <h3>Burritos</h3>
  32.       <p>Description about a burrito here.</p>
  33.  
  34.       <h3>Quesadillas</h3>
  35.       <p>Description about a quesadilla here.</p>
  36.  
  37.       <h2>Tacos</h2>
  38.       <p>A taco is tortilla made from wheat flour.</p>
  39.  
  40.       <h3>Tacos de Cabeza</h3>
  41.       <p>Description about tacos de cabeza here.</p>
  42.  
  43.       <h3>Tacos de Asador</h3>
  44.       <p>Description about tacos de asador here.</p>
  45.  
  46.       <h3>Tacos Al Pastor</h3>
  47.       <p>Description about tacos al pastor here.</p>
  48.     </main>
  49.   </body>
  50. </html>

Of Interest