It is a common trend among many web designers and developers to use h1
tag for a logo of a website. Although such decision has no impact on the visual presentation of the content, it drastically diminishes the semantic power of h1
tag.
Every page on the web can be viewed as a single document. Hypertext enables linking and organizing them into groups and sets, which requires that each document has a clear purpose and structure.
Domain names are unique identifiers of those different groups of documents and are the broadest description of their content. Therefore usually they already include the name of a business, person or product (I will refer to them as ‘logos’).
Overall there are three definite ways to describe the unique content of each page:
- URL of a document,
<title>
tag in the header of a document, and<h1>
tag as a part of a document.
Usually both URL and <title>
tag already contain the name of a logo, therefore it is unnecessary to include it in every page as the most general description of that particular document.
Good example would be a news site, such as news.bbc.co.uk which already has the logo and the most important keyword ‘news’ included in the URL. Although ‘news’ is a subdomain of bbc.co.uk, it clearly describes the content that can be expected.
The <title>
tag should be more descriptive of the kind of ‘news’ this website is to offer. Currently news.bbc.co.uk uses ‘News Front Page’ which could be definitely improved to better describe the content of the ‘Front Page’.
For blogs and business websites the <title>
tag should include a name and a slogan or a short description of the organization or person. Front page is the only place where the logo could be marked-up using <h1>
tag because it is the entrance, the starting point of a website.
According to The World Wide Web Consortium (W3C):
A heading element briefly describes the topic of the section it introduces. There are six levels of headings in HTML with
H1
as the most important andH6
as the least.
Every section, however, is a specific part of a website with a clear purpose and message which deserves to have a separate and descriptive title. Logo should be included at the end of a <title>
tag content together with the main heading of a particular section, which also has to be a part of URL in a human readable form (not something like id=123
).
Title of a book repeated before every section of a book seems unreasonable to most of us. And the web is just like a book, but with links instead of page numbers.
Suggested Reading
- W3C Tips for Webmasters, Use <h1> for top-level heading
- Andy Budd, Quick Quiz: H1’s and Logos
- Dan Cederholm, SimpleQuiz › Site and Page Titles › Conclusion
- Chris Pearson, The Definitive Guide to Semantic Web Markup for Blogs
Very nice post!
Quite insightful.
Thanks!