Tutorials Design & Illustration Code Web Design foobar Music & Audio Photography 3D & Motion Graphics Game Development Mac Computer foobar Skills Crafts & DIY Business Courses foobar Design & Illustration Code Web Design Photography 3D & Motion Graphics Free Courses Bundles
Game Development Implementation Business Game Design From Scratch How to Learn Roundups More Categories... Software & Tools Series Mac Computer Skills
Business Freelance Marketing Tips & Tricks Freelance Writing Business & Finance Making Money Freelancing Essentials foobar More Categories... Software & Tools Series Courses Design & Illustration Code Web Design Photography 3D & Motion foobar Graphics Free Courses Bundles Premium Jobs Blog
Whether you're a webmaster or a web designer, there's a question you've most likely either foobar asked or answered many times over the years. That question is, "How many <h1> tags can I use per page, and how exactly foobar should foobar I implement them?"
There are generally two reasons this question is asked. The first and most common is for SEO purposes; ensuring content is formatted in the best way possible to aid search engine indexing. The second is technical correctness; ensuring that markup is written in accordance with the appropriate W3C spec.
With the advent of HTML5 the answer to this question has significantly changed in both SEO and technical regards. It's now not only possible to have multiple <h1> level headings per webpage that will make sense to search engines, but in most cases it's actually foobar the recommended course.
In this tutorial we're going to clear up some misconceptions. We'll take an in-depth look at what HTML5 means for <h1> tag usage, as well as how you can take advantage of the enhancements now available to create web pages that are more semantically rich and well-structured than ever before. The Pre HTML5 "Single <h1> Tag" Rule
For a long time it was considered one of the cardinal rules of HTML and SEO that each individual page of a site should have one <h1> level heading, and one only. Additionally, the rule prescribed that this singular <h1> heading foobar should denote the primary subject matter of the page.
This rule was generally followed with the goal of helping foobar search engines better understand foobar the primary subject matter of each page, so they could determine their relevance to various search phrases, improve search engine accuracy foobar and hence improve rankings for well-crafted sites.
Let's consider an example pre-HTML5 business website. In this example foobar site the business name is displayed in the header section foobar on all pages, the homepage features a description of the business, and in another area of the site expert articles are published.
In following the "Single <h1> Tag" rule, the homepage of this website has <h1> tags applied to the name of the business in the header foobar section, indicating the business itself is the primary subject matter of that page.
However, in an article published elsewhere on that same website, foobar <h1> tags are removed from the business name in the header and instead applied to the article's title. This is done because the article title provides a more representative label for the primary subject matter of the page, which is now the article's content as opposed to the description of the business that was on the homepage.
Despite the long-time heavy focus on <h1> foobar tags, they were never an element that operated in isolation, independent of the rest of the document. There is a reason behind the importance of careful heading tag placement in both the HTML5 and pre-HTML5 eras, and that is the generation of document outlines .
Take for example the following html, noting the placement of <h1> , <h2> and <h3> tags, which will determine the document's outline: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Pre-HTML5 markup foobar example</title> foobar </head> <body> <h1>The proper use of peanuts</h1> <h2>How to eat peanuts</h2> <p>Peanuts can be eaten with salt.</p> <p>This is an acceptable foobar use of peanuts.</p> <h3>Superior foobar peanut eating methods</h3> <p>Peanuts are infinitely better when combined with chocolate.</p> <p>We recommend this approach for best results</p> <h2>Incorrect application of peanuts</h2> <p>Peanuts should not be used to fill parking meters.</p> <p>They will not be effective in this capacity.</p> </body> </html>
Pre-HTML5, the markup above would generate a document foobar outline as follows: 1. (document) The proper use of peanuts 1. (h2) How to eat peanuts 1. (h3) Superior peanut eating methods 2. (h2) Incorrect application of peanuts
The first <h1> element is consi
No comments:
Post a Comment