What is the up to date correct usage of the H tags?
I was originally told that it was only one H1 tag per page.
Now I am being told that you can use more than one h1 tag as long as it is only one per sectioning root or content section and that it is better than the former way.
What is the correct usage!
According to mdn
In HTML5, use the <section> element to define the outline of a
document. Headings provide titles for sections and subsections. You
can also group a heading and its content using the <div> element.
So you can use multiple H1 as long as they are in different <section>
<section>
<h1>Hi</h1>
<p> ... </p>
</section>
<section>
<h1>Hello</h1>
<p> ... </p>
</section>
Related
Here is my code:
<html>
<head>
<style>
div p h1 {
background-color: red;
}
</style>
</head>
<body>
<div>
<p><h1>hello2</h1></p>
</div>
</body>
</html>
I think thats why:
The <p> tag can only contain inline elements. The header tags are block-level elements, and cannot go inside <p> tags even when you style them to display inline.
This is basic HTML (or any other markup language). You should separate the paragraph, <p></p> from the heading, <h1></h1> element.
If you want to put a sub heading below your main heading, I suggest you do something like
<div>
<h1>Main heading</h1>
<h2>Smaller heading</h2>
<p>Some information or a quote</p>
</div>
It's important to CLOSE the html elements before creating new ones. Unless it's a div, span or section which is meant for gathering topically similar elements.
A lot more could be said, but I suggest you get ahead and read more about HTML and markup language. A good place to start is http://www.w3schools.com/html/html_basic.asp and http://www.w3schools.com/html/html_elements.asp …
If you specifically wonder what elements can be nested inside a paragraph check out the answer on this question: List of HTML5 elements that can be nested inside P element?
Having a H1 element inside a p element is invalid mark-up. When the browser encounters this mark-up, it tries to fix it automatically by moving the H1 outside of the p. Once this has occurred, the selector no longer matches anything.
Use the W3C markup validator to ensure the validity of your document
<div>
<h1>hello2</h1>
<p>im the best</p>
</div>
Because your header is like the title of an article - you don't put the title in a paragraph. Using the <p> tags, you're just writing the content for the article, so you wont be able to style a header tag in a p tag as you will most likely be styling your header and content differently
If you are having issue with HTML Structure See the Lynda HTML5 course really worth Your Time It Clarifies how to structure your document. Along with reasons why. You will have a better understanding of What is Style and what is structure which most people struggle with I would include myself.
Also has links to the official web standards "World Wide Web Consortium", Yes I know it's a paid for service but it help me avoid or understand why HTML and CSS react the way it does when you move element in to invalid place.
Understand that h1-h6 Tag are not meant for styling as I previously thought from my earlier days in HTML. Yes we used them because it seemed to make since or easyer to target with CSS. But the h1-h6 are more to structure of importance off the section or content on the page. I would use a div if it's or a span or Bold tag.
Great resource is developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
Here is a good example: Of structure from the link above!
<body>
<!-- Main header used across all the pages website -->
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li>Home</li>
</ul>
<form>
<input type="search" name="q" placeholder="Search query">
<input type="submit" value="Go!">
</form>
</nav>
<!-- Here is our page's main content -->
<main>
<!-- It contains an article -->
<article>
<!-----------***** As you can see the h1-h6 is for structure not style****** -->
<h2>Article heading Rank2</h2>
<p>This is Paragraph</p>
<h3>subsection Rank3</h3>
<p>This is Paragraph </p>
<p>This is Paragraph </p>
<h4>Another subsection Ranked</h4>
<p>This is Paragraph </p>
<h3>Another subsection Ranked</h3>
<p>This is Paragraph </p>
<p>This is Paragraph </p>
</article>
<aside>
<h2>Related</h2>
<ul>
<li>beside the seaside</li>
<li>beside the sea</li>
</ul>
</aside>
</main>
<!-- main footer that is used across all the pages of site -->
<footer>
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
But really Check out the Lynda HTML 5 Essentials Tutorials!
When a document it's structured correctly it's readable and more applications and devices. Like Readers.
Is the article (or section) element appropriate on a homepage?
I am not sure since the content of homepage is mostly a bunch of summaries referring to the content that should be included in an article element (on a separate page).
A rule of thumb I follow is to only use <article> or <section> if there is a corresponding <h#>.
So this is more appropriate:
<h1>Home Page</h1>
<p>
Hi.
</p>
<article>
<h2>Sub-Head</h2>
<p>
Hello.
</p>
</article>
Than this:
<h1>Home Page</h1>
<p>
Hi.
</p>
<article>
<p>
Hello.
</p>
</article>
Do not add a heading just to make it work. The value of a heading should be determined by the nature of the content, not a desire to shoehorn the elements you want.
With an example URL or image of your intended layout and content, I could offer more context.
Also, consider that if you have one contiguous piece of content (like how a sub-page generally is about one thing), you would not wrap the entire page in <article> but you would wrap it in <main> instead.
For a bit more, check out this piece on <section> from W3C HTML5, WCAG, and ARIA spec participant and accessibility advocate Léonie Watson.
There are a lot of different answers and after a week I am more confused than before.
The main problem is section and articles.
Let's make an example, this page describes a town:
<h1>TownName</h1>
<p>Description</p>
<h2>What to see</h2>
<h3>Sightseeing Nr1</h3>
<p>Its description</p>
<h3>Sightseeing Nr2</h3>
<p>Its description</p>
...
<h2>How to get</h2>
<h3>By car</h3>
<p>Description</p>
<h3>By train</h3>
<p>Description</p
<h2>Map</h2>
<p>Description</p>
<h2>...</h2>
...
etc.
There are h3 for some h2, for some nope. Should I use article for each h2 and a nested article for h3 too? (The context can be separated, so..)
Or should I use sections for h3?
Or should I use section for blocks of "h2" and article for each h3?
h1 with its description is an article or section too?
It's so difficult, also I have added an image of a page that I projected, I am almost sure that I don't have to use section to wrap aside and main elements..
Zhenya, This is from W3 Schools
**Nesting Semantic Elements**
In the HTML5 standard, the <article> element defines a complete, self-contained block of related elements.
The <section> element is defined as a block of related elements.
Can we use the definitions to decide how to nest elements? No, we cannot!
On the Internet, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <sections> elements.
You will also find pages with <section> elements containing <section> elements, and <article> elements containing <article> elements.
Despite reading pages upon pages about the <article> and <section> tags I really don't understand how to apply them to my site.
I have a product page with related products at the end of the page. First I thought about doing something like this:
<section>
<header><h1>Product title</h1><header>
<img src="image.jpg"/>
<p>Description</p>
<p>Price</p>
<p>Order</p>
</section>
<section>
<header><h1>Related products</h1></header>
<article>
<img src="image1.jpg"><br/>Product 1<br/>Price
</article>
<article>
<img src="image2.jpg"><br/>Product 2<br/>Price
</article>
<article>
<img src="image3.jpg"><br/>Product 3<br/>Price
</article>
</section>
But, then I read some other blogs and it occured to me that maybe I should replace the <section> tags with <article> tags.
Which is right and why? Thanks.
<article> is for an independent piece of content that should make sense even if all of it's surrounding content is stripped away. <section> is more of a generic container that's quite similar to div tag and mostly used for content structuring. So the right code should be like this:
<article>
<header><h1>Product title</h1><header>
<img src="image.jpg"/>
<p>Description</p>
<p>Price</p>
<p>Order</p>
</article>
<article>
<header><h1>Related products</h1></header>
<section>
<img src="image1.jpg"><br/>Product 1<br/>Price
</section>
<section>
<img src="image2.jpg"><br/>Product 2<br/>Price
</section>
<section>
<img src="image3.jpg"><br/>Product 3<br/>Price
</section>
</article>
Also HTML 5 doctor's got a great Flowchart if you get confused picking the right HTML5 semantic element for your need. You can give it a try and see if it helps.
Section
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.
Article
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.
Straight from the W3 http://www.w3.org/html/wg/drafts/html/master/sections.html
In their example, they have an article nested within a section within an article. I would say you are definitely using it correctly.
<article>
<header></header>
<section>
<h1></h1>
<article></article>
<article></article>
</section>
</article>
In the HTML5 standard, the <"article"> element defines a complete, self-contained block of related elements.
The <"section"> element is defined as a block of related elements.
Can we use the definitions to decide how to nest elements? No, we cannot!
On the Internet, you will find HTML pages with <"section"> elements containing <"article"> elements, and <"article"> elements containing <"sections"> elements.
You will also find pages with <"section"> elements containing <section> elements, and <article> elements containing <"article"> elements.
Right From : http://www.w3schools.com/html/html5_semantic_elements.asp
If a header section contains only heading (eg. h1, h2..), and no other information. Should it still be wrapped it in the header tags? Or the header tags should be used if it has more content than just the headings?
For example, should this be used?
<section>
<h2> .... </h2>
<div>
...
</div>
</section>
or this?
<section>
<header>
<h2>...</h2>
</header>
<div>
...
</div>
</section>
Here's that HTML5 doctor article:
Avoiding common HTML5 mistakes
...as linked to by #simoncereska.
To save folks some time, here's the relevant quote:
If your <header> element only contains a single heading element, leave
out the <header>. The <article> (for example) ensures that the heading will be shown
in the document outline, and because the <header> doesn’t contain
multiple elements (as the definition describes), why write code when
you don't need to? Simply use this:
<article>
<h1>My best blog post</h1>
<!-- Article content -->
</article>
The article is definitely worth reading, but if your looking for a quick answer, then see the bold text in the above quote. :)