: Proper usage of , , and in a HTML5 website? I have been studying this subject for several days and have found many conflicting suggestions with regards to search indexing. I am working
I have been studying this subject for several days and have found many conflicting suggestions with regards to search indexing. I am working on a project which has a lot of different pages ranging from simple product descriptions to in-depth user documentation.
I have broken this question down into sections since I feel that this will make it more useful for future readers of this question.
Some of my findings
Several websites seem to have assumed document outlines like the following:
1. Programmer's Guide (https://www.dartlang.org/docs/)
1. Getting Started
2. Concepts
1. Libraries
2. Fundamental classes
etc.
I find it interesting that the above example does not utilise the <nav> element with a suitable heading. I like the simplicity of the outline and being Google I am fairly certain that they know what they are doing when it comes to this.
But I am confused since the above outline makes no mention of "Dart". The only mention of "Dart" in the semantic sense seems to be within the main document <title> element "Programmer's Guide | Dart: Structured web apps".
The MDN (Mozilla Developer Network) is another brilliant example of a website which follows this principal. Many of the <h1> titles provide full context (Sections and Outlines of an HTML5 Document):
1. Sections and Outlines of an HTML5 Document
1. Untitled Section (nav)
2. Untitled Section (nav)
3. Structure of a Document in HTML 4
4. Problems Solved by HTML5
Whilst others do not make much sense out of context (Obsolete practices to avoid). For example, does the following HTML5 outline relate to CSS, HTML5 or C#... with just the document outline to go by, who knows!
1. Obsolete practices to avoid
1. Untitled Section (nav)
2. Untitled Section (nav)
3. Doctype
4. <meta> element and charset attribute
To make matters worst, what if the MDN contained 2 topics with the same (or very similar) title "Obsolete practices to avoid" where one is part of their CSS guide and the other is part of their HTML guide...
On the other end of the spectrum websites seem to use the main <body>-level heading for the product name (Foo) or the topic container (User Guide for Foo). Where all subsequent pages then use <h2> for the actual page title.
The question
How do search engines infer the context of a webpage like those found on the MDN website using the DOM and the HTML5 outline?
What is the right way to markup the following HTML5 page so that Google can index the page in the suitable context? This includes usage of <title>, <header> and <h1> elements.
Company Name
Product Name
User Guide
Getting Started
The most significant heading in the HTML which gets viewed in a web browser, should this represent the context of the entire website (Company Name or Product Name), the collection of topics (User Guide) or the actual topic in hand (Getting Started)?
My best guess
<!DOCTYPE html>
<html>
<head>
<title>Getting Started | User Guide | Product Name - Company Name</title>
</head>
<body>
<header role="banner"> <!-- Note: Lack of <h1> in here -->
<a id="logo" href="http://example.com">Company Name</a>
<nav>
<h1>Site Navigation</h1>
<ul> ... </ul>
</nav>
</header>
<main role="main">
<div class="product-name">Product Name</div>
<div class="document">User Guide</div>
<h1>Getting Started</h1>
<p>blah</p>
</main>
</body>
</html>
Leading to the outline:
1. Getting Started
More posts by @Reiling115
3 Comments
Sorted by latest first Latest Oldest Best
I would dispute the use of a H1 or any heading level for the 'Product Name' in the header.
The H1 represents the title of the page not the product, application or site.
Both for Accessibility and SEO purposes a repeated H1 on every page would be detrimental. Unfortunetaly in this case there is no semantic HTML tag that means 'site title' so the only option is a <div> or <p> or perhaps even a <strong> tag to give it some semantic emphasis.
<main>
<header>
<div>Logo</div>
<div>Product name</div>
<nav>
<ul> ... </ul>
</nav>
</header>
<section>
<h1>Getting started</h1>
...content
</section>
</main>
During my extensive web searches I have found a quote which I find useful and suspect that future readers of this question will also.
Use <h1> for top-level heading
<h1> is the HTML element for the first-level heading of a document:
If the document is basically stand-alone, for example Things to See and Do in Geneva, the top-level heading is probably the same as the title.
If it is part of a collection, for example a section on Dogs in a collection of pages about pets, then the top level heading should assume a certain amount of context; just write <h1>Dogs</h1> while the title should work in any context: Dogs - Your Guide to Pets.
Original Source: www.w3.org/QA/Tips/Use_h1_for_Title
The above quote seems to suggest that the document-level <h1> element can assume that the context of the current page which is defined using the <title> itself. So presumably if there were multiple pages with the exact same <h1> then this would be okay...
<title>Getting Started | Guide | Uber Product - Company Name</title>
<h1>Getting Started</h1>
<title>Getting Started | Guide | Other Uber Product - Company Name</title>
<h1>Getting Started</h1>
See Also: <title>: the most important element of a quality Web page
Before accepting an answer I would like to wait and see what others think.
There is not one right answer, there are different options.
Below are a few options, but all of them have pros and cons:
This option is more or less the one you presented, but shows a bit more headings and where the content would go, plus the idea that the logo, would be a more complex element than only the image/text, it would have all the related elements to make an impression as the personality of the company, that why the section. Again. it could not be a section, but just a div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Getting Started | User Guide | Product Name - Company Name</title>
</head>
<body>
<section>
<a id="logo" href="http://example.com">Company Name</a>
</section>
<nav>
<ul> ... </ul>
</nav>
<main>
<header>
<h1>Product Name</h1>
</header>
<p>...</p>
<header>
<h1>User Guide</h1>
<p>...</p>
</header>
<p>...</p>
</main>
</body>
</html>
This next one introduces the main tag to show what is the relevant part of the page. This tag is still sketchy on support and future, but gives a clear indication that navigation has nothing to do with the product or page. The section tag could be other container and main could be article for some people.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Getting Started | User Guide | Product Name - Company Name</title>
</head>
<body>
<section>
<a id="logo" href="http://example.com">Company Name</a>
</section>
<nav>
<ul> ... </ul>
</nav>
<main>
<header>
<h1>Product Name</h1>
</header>
<section>
<header>
<h1>User Guide</h1>
<p>...</p>
</header>
<p>...</p>
</section>
</main>
</body>
</html>
The next one uses article since most people are inclined to use that one.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Getting Started | User Guide | Product Name - Company Name</title>
</head>
<body>
<article>
<a id="logo" href="http://example.com">Company Name</a>
<nav>
<ul> ... </ul>
</nav>
<main>
<header>
<h1>Product Name</h1>
</header>
<section>
<header>
<h1>User Guide</h1>
<p>...</p>
</header>
<p>...</p>
</section>
</main>
</article>
</body>
</html>
I would use something like the next one, since I'm very modular and block oriented, so each element would be independent from a database perspective only related by relevant keys. Although I most probably would skip the section tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Getting Started | User Guide | Product Name - Company Name</title>
</head>
<body>
<nav>
<ul> ... </ul>
</nav>
<main>
<header>
<h1>Product name</h1>
</header>
<section>
<header>
<h1>description of product</h1>
</header>
<p>...</p>
</section>
<section>
<header>
<h1>user guide</h1>
</header>
<p>...</p>
</section>
<section>
<header>
<h1>Getting started</h1>
</header>
<p>...</p>
</section>
</main>
</body>
</html>
and still, there are more options.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.