Is the structure below correct or is the section tag not needed?
For SEO, assuming the relevant keywords are the page title not the site title, is the structure bellow the best optomisation? Thanks
<header>
<h1>Site Title</h1>
</header>
<section>
<h1>Page Title</h1>
<p>Page Content Here</p>
</section>
Don't abuse the usage of section and article tags using them for structure, instead keep using divs.
In html5, when using headings and sections, you must check that each section has its own title. You can use the outliner to see how is the structure.
http://gsnedders.html5.org/outliner/
According to your case you'll notice that the Site Title has still more relevancy than the Page Title. That's okay. But better use a div for dividing the header from the content.
// Reply 12/03/01
You can try using some weird position absolute to achieve your goal:
First of all, the section must have a heading, if not it will be null.
<header>
<h1 id="position-me-in-section">Page Title h1</h1>
</header>
<div id="content">
<section>
<h6 id="position-me-in-header">Site Title h6</h6>
<p>Page Content Here</p>
</section>
</div>
This is how I would do it. The <article> tag links the related content together, you can also have multiple articles on one page etc
<header>Site Title</header>
<article>
<header>Page Title</header>
<p>Page Content Here</p>
<footer>Page Footer</footer>
</article>
<footer>Site Footer</footer>
Really depends on how or if you plan to componetize and/or syndicate your content and then it's however it suites you best. There are no "issues" with how you have it now other than you only want to use a single "H1" per document. On the flip side - the "H2", "H3" etc can be used multiple times with no negative SEO.
The html5doctor link about section shared is a good resource but also consider these:
http://html5doctor.com/the-article-element/
http://www.impressivewebs.com/html5-section/
http://webdesign.about.com/od/html5tags/a/when-to-use-section-element.htm
Related
Forgive me if I misspelled it and please correct it.
I do not know exactly how to use these two elements (Article | Section)
Now I want to launch a site that has completely standard HTML code,
Now, how do you think an article from my site should be structured? And where can I put the site header better?
I am stuck between these two options.
<!-- 1 -->
<section>
<header>
<h1>title of page</h1>
</header>
<article>
<p>some text</p>
</article>
</section>
<!-- 2 -->
<section>
<article>
<header>
<h1>title of page</h1>
</header>
</article>
<p>some text</p>
</section>
If both are incorrect, what do you suggest?
My English is very poor. So I could not use any more questions. But I understand the coding. Please explain to me by writing the code and simple sentences, and do not say that there is an answer to your question.
Read more about the HTML element article of Mozilla:
The HTML element represents a self-contained composition in
a document, page, application, or site, which is intended to be
independently distributable or reusable (e.g., in syndication)... each
post would be contained in an element, possibly with one or
more s within.
Unlike the article element, the section element:
The HTML element represents a generic standalone section of
a document, which doesn't have a more specific semantic element to
represent it.
Thus, the article element can contain section elements. But the section element cannot contain any other semantic elements.
Accordingly, your example can be presented like this:
<header>
<h1>The article News from Valinor of Gandalf</h1>
</header>
<article>
<h2>News from Valinor</h2>
<p>A short introduction to the content of the article.</p>
<section>
<h3>The name of section</h3>
<p>The content of section.</p>
</section>
<section>
<h3>The name of section</h3>
<p>The content of section.</p>
</section>
...
</article>
<footer>
<h2>Publisher and copyright holder</h2>
<p>Publisher and © 2021 Gandalf</p>
</footer>
Plot: When building a coupons website I realize that their can be content that is not unique to the page but should be used inside the <main><article> ..here..</article></main>.
Problem: Just because w3schools state :
The content inside the element should be unique to the
document. It should not contain any content that is repeated across
documents.
But i have content which will be inside article. Like every time for example A coupon can be used by entering its code but a deal can only be activated by going to landing page.
This will be repeated in every 'coupon' post I will publish.
So now what I tried to use was.
<main><article><main>Unique content</main>
<aside>A coupon can be used by entering its code but a deal can only be activated by going to landing page</aside></article></main>
But again :
Note: There must not be more than one <main> element in a document.
The <main> element must NOT be a descendent of an <article>, <aside>,
<footer>, <header>, or <nav> element.
So what is the best way to format the UN-UNIQUE content inside <main> and/or <article>.
The main tag should be used to group those article and aside elements.
<main>
<article>
The unique document content.
</article>
<aside>
Related content for that document.
</aside>
</main>
tl;dr - use your common sense :)
This article on the actual w3 site has a good overview of what should go where. The overall structure is:
<body>
<header>
<!-- header content goes in here -->
</header>
<nav>
<!-- navigation menu goes in here -->
</nav>
<section id="sidebar1">
<!-- sidebar content goes in here -->
</section>
<main>
<!-- main page content goes in here -->
</main>
<aside>
<!-- aside content goes in here -->
</aside>
<footer>
<!-- footer content goes in here -->
</footer>
</body>
Option 1 - <section>s
They go on to say that <section>s, fairly obviously, can contain multiple <articles>, but that it is also possible to put <section>s inside an <article>, for example to define the introduction or summary:
<article>
<section id="introduction">
</section>
<section id="content">
</section>
<section id="summary">
</section>
</article>
So one option is to put a <section id="content"> and <section id="terms"> inside your article.
Option 2 - <footer>s
It does appear valid to use a <footer> for this sort of content. You said it is just for author, date, category, but w3 states in its spec for <footer>:
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Your text is terms and conditions of a coupon, which could be considered as semantically similar to copyright data. It's a judgement call I think.
Option 3 - <div>s et al...
As a get-out, in the first link they do also say about <div>s:
You should use [a div] when there is no other more suitable element available for grouping an area of content...
So if it really isn't clear what to use, another possibility could be:
<article>
Blah blah
<div class="terms"></div>
</article>
Summary
To be honest, after all this, it seems there is no definitive answer and sites are unlikely to become super-strict in how they semantically parse documents for a while yet, because they know there are legions of people out there who will do it completely wrong. If you just stick a <p> with the same terms in at the end of each article, it probably won't make any real difference because the main text is unique.
I personally think as long as you use your common sense and choose something which doesn't completely go against the recommendations, you can't go too wrong.
According to the WHATWG (the informal group behind the HTML Living Document Standard), there is no problem in using a main element inside an article. The HTML Living Document says:
There is no restriction as to the number of main elements in a document. Indeed, there are many cases where it would make sense to have multiple main elements. For example, a page with multiple article elements might need to indicate the dominant contents of each such element.
Consequently, you can write
<body>
<header>My Page Header</header>
<main>
<article><h1>My First Article</h1>
<main>My first article's content...</main>
<aside>A sidebar</aside>
</article>
<article><h1>My Second Article</h1>
<main>My second article's content...</main>
<aside>Another sidebar</aside>
</article>
</main>
</body>
However, the W3C HTML 5.3 Draft disallows this and states that "There must not be more than one visible main element in a document."
This is an interesting case of a disagreement about a central element of HTML. Amazing! It seems that there is again a schism between W3C authors and the web/browser developer professionals behind the WHATWG. In such a case, I would go with the WHATWG.
I would go with something like this :
<main>
<div class='article'>
<article>Unique content</article>
<footer>This coupon can be used only once..</footer>
</div>
<div class='article'>
<article>Unique content</article>
<footer>This coupon can be used only once..</footer>
</div>
</main>
Anyway I think having multiple <main> tags is worse than having non-unique content in an <article> tag.
You can also take into consideration Schema.org for proper mapping your content with additional attributes ( itemprop ... )
I want to know if it would be ok to have a section tag contain no heading tags inside of it. I have looked at couple of examples and they all have heading tags inside of them.
The structure I implement for my section tag at the moment is:
<section>
<article>
<div>
</div>
</article>
<article>
<div>
</div>
</article>
</section>
HTML5 does not require the use of headers within an article element however it can be useful if you want to publish additional details such as date of publishing as well as you could include a nice footer to each article as well.
This would be useful:
<section>
<article>
<header>
<hgroup>
<h1>This is the Article Header</h1>
<h2>This is a tagline header</h2>
</hgroup>
<time class="dtstart" datetime="2011-10-05T09:00Z">9am Oct 5th</time>
</header>
<div>
<p>This is the content</>
</div>
<footer>
<p>Article Authored by Username<br>
Twitter Link<br>
Google Plus Author Link</p>
</footer>
</article>
By using the above code you can style the site without making hardly any addition classes due to the fact the main header and footer of your site won't be contained within a section, or least I hope you don't have it.
So styling article footers and headers and everything else in their is possible without making addtional classes which is very code freindly for example
article header h1 {font-size:20px;}
article header h2 {font-size:12px;}
article div h1 {font-size:36px;}
article div h2 {font-size:26px;}
article footer {font-size:12px;}
article time {fonts-size:9px;}
article hgroup {padding:20px;}
section article {padding:20px;}
Notice how with the above code there is no need for classes to be made, its pretty awesome and very flexible.
This would not be useful:
<section>
<article>
<header>
<h1>The Header</h1>
</header>
<div>
<p>I am the content</p>
</div>
</article>
</section>
The instructions on using HTML5 is very vague and many people agru if header should even be used at all within an Article but headers are useful if you have a lot of content to stick in their such as publish date, author, more than one H1, and H2 etc.
Footers in articles I find more useful but generally if I'm using the footers I use the headers as well, generally you should always code with as little code as possible and you should always consider Googles snippets as an alternative over some HTML5's if you want the benefit from those.
You should factor in what is easiest to style your site, using header can be easier to use without making additional classes for example.
The current spec only says that it typically has a header. There's nothing that says it requires one.
Sources:
http://www.w3.org/TR/html51/sections.html#the-section-element
http://developers.whatwg.org/sections.html#the-section-element
http://html5doctor.com/the-section-element/
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. :)
I want to change
<section>
<header>...</header>
<p class="tweet">This is a tweet preview. You can... <em>6 Hours ago</em></p>
</section>
into
<section>
<header>...</header>
<article class="tweet">
<p>This is a tweet preview. You can... <time pubdate>6 Hours ago</time></p>
</article>
</section>
But after reading some articles on the <article> tag, I'm not sure that this is the best move. What would be better practice?
The important thing to understand about articles and sections is that they are sectioning elements. Each follows a common pattern:
<sectioning_element>
<heading_or_header>
... the body text and markup of the section
<footer>
</sectioning_element>
The footer is optional. Sectioning elements should have a "natural" heading. That is, it should be easy to write an <h?> element at the start of the section/article, that describes and summarises the entire content of the section/article, such that other things on the page not inside the section/article would not be described by the heading.
It's not necessary to explicitly include the natural heading on the page, if for example, it was self evident what the heading would be and for stylistic reasons you didn't want to display it, but you should be able to say easily what it would have been had you chosen to include it.*
For example, a section might have a natural heading "cars for sale". It's extremely likely that from the content contained within the section, it would be patently obvious that the section was about cars being for sale, and that including the heading would be redundant information.
<section> tends to be used for grouping things. Their natural headers are typically plural. e.g. "Cars for Sale"
<article> is for units of content. Their natural headers are usually a title for the whole of the text that follows. e.g. "My New Car"
So, if you're not grouping some things, then there's no need, and it's not correct, to use another sectioning element in between the header and footer of the section and your correct mark-up would be
<article class="tweet">
<header>...</header>
<p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</article>
assuming you can find a natural heading to go inside the <header> element. If you can't, then the correct mark-up is simply
<p class="tweet">This is a tweet preview. You can... <em>6 Hours ago</em></p>
or
<div class="tweet">
<p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</div>
* There's a case for including the natural heading anyway, and making it "display:none". Doing so will allow the section/article to be referenced cleanly by the document outline.
<article> content
represents a 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.
(from the html5 working spec)
in fact one of the examples illustrates nested <article> elements where the inner <article> is inside a <section>
Why don't you think it's a good move? It seems to me that a Tweet would fit perfectly in the W3C spec on what should be in an article. It would most likely depend on the context your sample code is in (which we can't tell from what you've provided).
It could also be put this way.
The semantics don't matter THAT much. You could very well do that if you wanted to and it would be fine. The thing with the article vs. section usage debate is that it's all subjective, to a point. I would recommend against how you're doing it in the second version though because it seems as though that just clutters the code more. What you could do is just replace the section tag with an article tag.
I went through quite a bit of head scratching to understand it because it seems to be confusing to quite a few but it really should be looked at a bit more literally. Here is an easy way to look at it:
Sections can contain elements from different topics.
Articles should contain elements from the same topic.
For example:
<section>
<section>
<article id="article_ONE">
<header>...</header>
<p>Not directly related to article_TWO</p>
<footer>...</footer>
</article>
</section>
<section>
<article id="article_TWO">
<article>
<header>...</header>
<p>Part 1 of article TWO</p>
<footer>...</footer>
</article>
<article>
<header>...</header>
<p>Part 2 of article TWO</p>
<footer>...</footer>
</article>
</article>
</section>
</section>