Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm new to web layout so forgive me if my question seems amateurish. I am trying to layout a landing page consisting of text boxes which will contain links to other pages on the site. The rough design is here:
http://silvercoastlife.com/wptest/landing-page-tester/
So far I have been using div to define the elements on the page but now I have come across article and wonder if I should be using this instead, especially as for SEO purposes I would like each box to have individual h1 headlines.
Thank you in advance for any advice you can offer.
Article would generally be wrapped in a <div> in HTML4, and the subsections would only be suggested by <h1>-<h6> elements. In HTML5 the article should be wrapped in <article>, and the subsections of the <article> should be explicitly indicated by wrapping them in <section> elements, perhaps in ordered list items if you’d like section numbering.
<article>
<h1>Title</h1>
<section>
<h2>Section title</h2>
<p>Content</p>
</section>
<section>
<h2>Section title</h2>
<p>Content</p>
</section>
<section>
<h2>Section title</h2>
<p>Content</p>
</section>
</article>
For more you can use this reference.
HTML5 is made for exactly the thing you want my friend, the new HTML5 elements certainly serve a SEO purpose in that they can define a lot of portions of your website.
Here is a list of HTML5 tags
HTML5 tags can be used in a very flexible way as long as they serve the correct purpose.
For instance the <header> tag.
It could be used as a header for your website but could also be used as a header for an article. It's multi-purpose but still defines what it is.
I'm pretty sure that if you have a <header> tag within an <article> tag a smart search engine will know the difference between the information in the one within the <article> and a website <header> for instance.
Also - there's tags for every basic definition in a website (as seen in the list above)
Some of the more useful ones I'll list here
<header>
<footer>
<aside>
<nav>
<section>
<main>
These are just some examples and they all serve a semantically different purpose like the <main> tag which is supposed to represent the main content of website or as MDN puts it:
The HTML <main> element represents the main content of the <body> of
a document or application. The main content area consists of content
that is directly related to, or expands upon the central topic of a
document or the central functionality of an application. This content
should be unique to the document, excluding any content that is
repeated across a set of documents such as sidebars, navigation links,
copyright information, site logos, and search forms (unless the
document's main function is as a search form).
Each link above in the list goes to the MDN page for the specified HTML element, you can read up on the semantics per element if you want to know exactly how they should be used.
Furthermore the <div> tag is just a convenient tag to use when things start to get vague or you just need a container that only serves positioning purposes etcetera, it's not wrong or bad to use a <div> tag anywhere either - It's just better to use tags that fit the actual content of your site for SEO purposes.
A small side-note would also be that using these new HTML5 tags could cause incompatibility with older browsers but so far everyone's caught up pretty well. so In general that shouldn't be a problem unless you need to support older browsers.
Maybe the relevant element you are looking for is actually the <section> element as you are defining different sections related to the same page instead of separate articles on different topics.
The below is taken from the following article: http://oli.jp/2009/html5-structure1/
<div> — the generic flow container we all know and love. It’s a block-level element with no additional semantic meaning.
<section> — a generic document or application section. A <section> normally has a heading (title) and maybe a footer too. It’s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp’s tabbed interface.
<article> — an independent part of a document or site. This means it should be able to ‘stand alone’, and still make sense if you encountered it somewhere else (e.g. in an RSS feed). Examples include a weblog article (duh), a forum post or a comment. Like <section> these generally have a header, and maybe a footer.
You should just take into consideration that article will not be recognized in IE8. As to SEO, HTML5 tags are easier to understand by a machine. Not just the word but the intent and if used properly, like in the Suvro's example and reference, it can actually help.
Related
I've done a few searches for my answer to my question, but I can't seem to get a straight answer other than the cut-and-pasted responses which DO NOT answer my question.
My question is, "Can I use the <main> tag in different pages of my website?"
The websites I've researched state:
"The <main> tag specifies the main content of a document.
The content inside the <main> element should be unique to the document.It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.Note: There must not be more than one <main> element in a document. The element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element."
So...
I understand the <main> tag specifies the main content of a document.
I understand that the content inside the <main> element should be unique to the document.
I also understand it should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
And here is where my question arises...what does it mean by "document?"
Does the word "document" mean:
A) I could use it in my index.html, about_us.html and contact.html, but only once in each of those pages.
or does it mean
B) I cannot use <main> within other pages of the website. Which would mean that if I use it on my index.html then I would not be able to use it in my other pages like about.html or contact.html...?
Websites researched:
https://www.w3schools.com/tags/tag_main.asp
http://blog.teamtreehouse.com/use-html5-sectioning-elements
Thank you for clarifying.
Yes you can use <main> tag in different pages of a website.
Answer A.
A document is short for HTML document, it means a valid html file. Not a html fragment.
There are 3 good uses for the <main>. It can help algorithms that scan web pages be more efficient. Quickly identify the main content, and as a consequence not process what is outside the main. It can be styled with a CSS rule. It can help users with screen readers.
Update: Inside work in progress, html specification, it is possible to have multiple <main>, as long as only 1 is visible.
https://w3c.github.io/html/grouping-content.html#elementdef-main
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I'm really struggeling to get the HTML5 outline right and also keeping SEO in mind. I only want 1x H1 on the page, and this has to be the content article title. But HTML5 Outline forces me to give the header and nav section a title. Else it will say "Untitled Body" or "Untitled Nav section". But it doesn't feel right to have 2x H1's on my page.
This is the structure now:
<body>
<header>
<h1>Company name</h1>
Logo img
</header>
<nav>
<h2>Main nav</h2>
<ul></ul>
</nav>
<main role="main" id="main">
<section>
<header>
<h1>Article</h1>
</header>
<p>Content</p>
<h2>Article subtitle</h2>
</section>
</main>
<footer>
<nav>
<h2>Footer nav</h2>
<ul></ul>
</nav>
</footer>
</body>
The outline looks like this:
1. Company name
1. Main nav
2. Article
1. Article subtitle
3. Footer nav
The outline looks alright, but the HTML code with multiple H1 headings doesn't feel right. Any thoughts about this?
If you don’t want headings in the first header and in nav, then just drop them. You don’t need to care about any developer tools that show the “HTML5 outline”, because browser don’t do anything with the HTML outline algorithm and neither do screen readers or any other tools for end users.
Structuring your markup correctly with headings is important to screen-reader users. But the best-practice way to do that in the right way for screen-reader users means using explicit h1-h6 headings and not using them out of order — and not using nested h1. In particular, if you’re using section, structuring your markup correctly with headings means doing things like this:
<body>
<h1>My document</h1>
…
<section>
<h2>Foo</h2>
…
<section>
<h3>Bar</h3>
…and structuring your markup correctly with headings means not doing things like this:
<body>
<h1>My document</h1>
…
<section>
<h1>Foo</h1>
…
<section>
<h1>Bar</h1>
That is, if you care about screen-reader users, then do not use the h1 in nested sections like that.
The reason you should not do that is: The “HTML5 outline” in the HTML spec says, for assistive-technology (AT) purposes (screen readers), browsers must follow an outline algorithm for assigning heading levels such that those nested h1 headings are instead exposed as h2-level and h3-level headings — but browsers don’t actually follow that outline algorithm in the HTML spec.
Instead, browsers expose the heading levels of any nested h1 headings to AT just as h1-level headings — no matter how far down you have them in nested section elements.
That means, when screen-readers user try to navigate the example above, they will just see it as a document with only h1-level headings — they won’t see any more structure for the headings than that, because browsers do not actually follow the HTML5 outline algorithm.
That is, browsers do not assign different heading levels to those nested h1 headings — despite the HTML spec saying that they must. Browsers just ignore that requirement.
I only want 1x H1 on the page, and this has to be the content article title.
I don't know where you heard that you should have only one H1 on the page for SEO reasons. This has not been true at least since we entered the new millennium. You give the search engines far too little credit. They can index your page just fine whether it has zero, one or fifty H1's.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
W3C doesn't explicitly say how exactly are we supposed to use headings or I can't find such information.
Resources:
http://www.w3.org/TR/html401/struct/global.html#h-7.5.5
http://www.w3.org/TR/WCAG-TECHS/H42.html
http://www.w3.org/TR/WCAG-TECHS/G141
This is very brief and raises many questions such as:
"Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped." - so, should we skip them or not?
When designing a sidebar - what headings should be used? H2?
When designing a footer - what headings should be used? H2?
Headings are meant to be used for lists (like a list of posts in a footer) anyway?
Should H1 be used only once on a page?
When designing a "posts listing page" - each entry usually consists of TITLE and EXCERPT - should we use H1 for titles? Or H2 or DIV?
Since headings are block-level elements, I assume that links go inside? Same for span's that are supposed to style headings in an unusual way?
If anyone could shed some light on that, it would be great :) Thanks.
1.Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped." - so, should we skip them or not?
Like Richard said, it is up to the programmer. In general, headings build structure into your page, like an outline you would make for a paper in school. There is a site, that creates an outline for you based on headings. Further WebAIM found that people using technology like knowing what level they are on, so jumping around, may confuse some.
2.When designing a sidebar - what headings should be used? H2?
I normally put a <h2> in so people can navigate to it easier/faster. To be honest, I haven't actively designed a page in a year or so, so if I was to do something, I would probably use ARIA instead if the sidebars really didn't need headings, and assign the "complementary" role. Using HTML5 I could simply use the <aside> tag, which natively has the complementary role.
3.When designing a footer - what headings should be used? H2?
I normally don't use headings in the footers. You can either assign the contentinfo role to the footer div, or use the HTML5 <footer> tag which again, has it native. This blog post on ARIA is helpful.
4.Headings are meant to be used for lists (like a list of posts in a footer) anyway?
Sure, you can do:
<h3>My favorite Movies</h3>
<ol>......</ol>
5.Should H1 be used only once on a page?
Long and unending debate. I am in the camp that H1's should be only used for the title of the content, such as only the question title here on SO. There was a discussion in the HTML5 group that new tags, such as <section> resets the heirarchy/outline that I mentioned above, and h1 can be used. I am not a fan or in favor of this.
6.When designing a "posts listing page" - each entry usually consists of TITLE and EXCERPT - should we use H1 for titles? Or H2 or DIV?
I'd use h2's
7.Since headings are block-level elements, I assume that links go inside? Same for span's that are supposed to style headings in an unusual way?
The proper way is <h_><a>Words</a></h_>.
You should read the section "Headings and sections" of the HTML5 spec. Getting the headings right is an important aspect of accessibility.
With headings (and sections) you are telling various user-agents how your page is structured, which content belongs together and which is separate from each other.
Think of a typical website with 3 columns. In the first column you have the site navigation, in the second column you have the main content and in the third column you have secondary content. Now, humans able to see might grasp immediately that there are three "areas" on the page, thanks to a different background color, margins, borders, whatever. But visually impaired or blind humans can't get clues from the graphical design of the page. Machines (like search engines) neither. Therefor we use heading/sectioning elements, so they can get the information (how the page is structured) from the markup.
Each HTML5 document has an outline, which gets created by the use of the headings h1-h6 (and hgroup) and/or the sectioning elements (section, article, nav, aside). You can think of it as some kind of TOC.
While a human able to see gets a first idea about the page structure by looking at the graphical design, humans using screenreaders and machines get this idea by reading the page outline, e.g.:
(1.) John Doe's Example Blog
(1.1) Navigation
(1.2) My first year at ACME
(1.3) Recent blog posts
This could be the outline of the following example documents:
Using headings only:
<body>
<h1>John Doe's Example Blog</h1>
<h2>Navigation</h2>
<h2>My first year at ACME</h2>
<h2>Recent blog posts</h2>
</body>
Using sectioning elements and headings with the level according to the calculated outline:
<body>
<h1>John Doe's Example Blog</h1>
<nav>
<h2>Navigation</h2>
</nav>
<article>
<h2>My first year at ACME</h2>
</article>
<aside>
<h2>Recent blog posts</h2>
</aside>
</body>
Using sectioning elements with h1 everywhere:
<body>
<h1>John Doe's Example Blog</h1>
<nav>
<h1>Navigation</h1>
</nav>
<article>
<h1>My first year at ACME</h1>
</article>
<aside>
<h1>Recent blog posts</h1>
</aside>
</body>
(The latter two are semantically equivalent!)
When using sectioning elements, you could even omit the headings altogether, the outline would still be the same, although "unnamed" (which is not very helpful!):
<body>
<nav></nav>
<article></article>
<aside></aside>
</body>
This would be the corresponding outline:
(1) (Untitled Section)
(1.1) (Untitled Section)
(1.2) (Untitled Section)
(1.3) (Untitled Section)
You can play with this online outliner to see which documents create which outlines.
so, should we skip them or not?
Why would you want to skip levels in the first place? It's probably never good, so no, you should not skip levels. But if it would happen, I wouldn't consider it a serious error.
Note however, depending on how exactly you skip, especially if you don't skip all headings of that level, a wrong outline could be created. See for example this simple document:
<body>
<h1>Interesting stories</h1> <!-- this is the site heading -->
<h2>My first snow</h2> <!-- this is a story -->
<h3>What I thought snow would be like</h3> <!-- this is a subsection of that story -->
<h3>How I experienced it actually</h3> <!-- also subsection -->
<h3>Why I'm disappointed by snow</h3> <!-- also subsection -->
<h2>More stories about snow</h2> <!-- this is not part of the story, but a kind of "See also" for the site/page -->
</body>
Now, if you'd change the last h2 to h3, suddenly this "More stories" section would become a subsection of the story. If you'd change it to h4, it would become a subsubsection.
When designing a sidebar - what headings should be used? H2?
When designing a footer - what headings should be used? H2?
These questions can't be answered in general. It depends on your site and your page and your content. But yes, in many cases for a "typical page" h2 would be the right candidate. The page heading (not to confuse with main content heading!) is h1, the main content is h2, the secondary content (sidebar etc.) is h2. If your footer would need a heading (not each one does), it would be h2 also in this case.
Headings are meant to be used for lists (like a list of posts in a footer) anyway?
It really depends on the content and the context.
The important question you have to ask (in general, for all heading decisions):
Does this content "belong" to the previous heading?
If yes:
Is it some kind of sub-section? → use a heading one level higher, resp. use a section element (and optionally a heading inside of it)
Is there no natural "sub-heading" for this content? → don't use a heading here
If no: use a heading one level lower, resp. use a sectioning element that is not a child of the sectioning element in question
(you'd have to repeat this step until your heading/section is a child of a heading that it belongs to)
Should H1 be used only once on a page?
Nope. As I explained, you could use h1 for all your headings on a page (if you use sectioning elements!).
When designing a "posts listing page" - each entry usually consists of TITLE and EXCERPT - should we use H1 for titles? Or H2 or DIV?
You should probably use an article element for each entry. So you'd get an heading automatically (= an entry in the outline), so to speak, as article is a sectioning element. Now, you could use h1 for it (no matter where the article is placed!), or you could use the calculated heading level (if the article is a direct child of body, you'd use h2. If it is one level deeper, h3. And so on.).
Use sectioning elements and headings so that a useful outline is created.
If you mark-up a webpage, look for a minute at the created outline only: Does it make sense? Do you understand by that how the page is structured, what sections it got? Is the hierarchy correct? Is a separate area/section of the page missing in this outline? Is a section a child of a section it doesn't belong to? (for example, often you see that the site navigation is a child of the page's main content, which is not correct, of course: typically they should be on the same level, both being childs of the site heading).
The <h_> tags are sort of redundant from the perspective of their original usage. With the ubiquity of CSS, a tag like <h4> is pretty much descriptive for all intents and purposes.
If you have a page with multiple sections then it makes sense to denote this somehow, and until the HTML5 <section id=""> tag is fully adopted a heading can be useful for some-thing reading the source code. Considerations might include:
Search Engine Optimisation: if you make some piece of text a heading, you are telling search engines, "hey, this is important!". To what extent this matters is for another discussion.
Code readability: if multiple people are working on the project, a heading is a good way to understand where breaks in the page copy occur. You can do this with <!-- Sidebar Here --> to a similar effect, but to some this is overkill.
"Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped." - so, should we skip them or not?
This is at the discretion of the programmer. You might decide to use <h1> for page headings, <h2> for section headings, but this is not written in stone. You can restyle the headings with CSS anyway, so you can favour hierarchy over appearance. If you think your sidebar is of equal importance to your tag cloud, give them the same heading classification.
Since headings are block-level elements, I assume that links go inside? Same for span's that are supposed to style headings in an unusual way?
This is absolutely correct.
The gist of what I'm saying is that W3C standards are there for reference. The development teams that make web browsers, RSS readers, etc. care about them because it means they don't have to discuss a new tag with each other. Imagine Google, Microsoft and Apple holding cross-party talks about when a <h4> or <span> tag should be used... nightmare fuel!
If a topic like those found in questions 2-6 above aren't written in stone, common sense is the fail-safe. That, and talking to your colleagues and agreeing a way forward. Sorry to repeat myself, but standards are for reference.
Hope that helps!
I have this website I am designing and I want to make it to the newest HTML5 standards.
The general layout is pretty simple as you can see in the image.
So, since the content of #main is not always a blog article (more often it's a "static" page) which tag should I use?
Any other recommendations?
Thanks!
You should use <section>.
Those tags aren't limited to this usage.
You can, for example, have this kind of tree :
<header />
<section>
<article>
<header />
<footer />
</article>
</section>
<footer/>
<section> is here to help search engines to identify the most important divs, so show this one is important.
Take a look at these two articles from html5doctor.com:
Designing a blog with html5
The section element
In particular, the "designing a blog post" article describes a page layout almost exactly like the layout in your question. Two pertinent quotes regarding the main content area are:
The section element represents a generic document or application section... The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.
and
Rules of thumb for using section:
Don't use it just as hook for styling or scripting; that's a div
Don't use it if article, aside or nav is more appropriate
Don't use it unless there is naturally a heading at the start of the section
I suggest using an article for the main content. If you have multiple items in the main content and they thematically related and can be grouped under a common title then use a section; otherwise use a div.
Why would a HTML5 website adopt the following structure? I am specifically interested in the use of the outer <section> element.
I realise that this validates as HTML5, but I do not understand why a section would contain an article. I thought that a section was to be thought of like a "chapter" of an article. Why wouldn't one just use <div id="main"> ... </div>? Is there a semantic advantage (perhaps for SEO) of using the outer section element?
Note: I have simplified the source by removing various container / inner wrapper DIV elements.
<div id="wrapper">
<section id="main">
<article id="home">
<section class="block">
<h1>Heading</h1>
<p>Content...</p>
<p>Content...</p>
</section>
<section class="block">
<p>Content...</p>
<p>Content...</p>
</section>
</article>
</section>
</div>
I am unable to provide a link to the website in question because it contains content that some viewers may find offensive.
From the spec:
The section element represents a generic document or application
section…The section element is not a generic container element. When
an element is needed for styling purposes or as a convenience for
scripting, authors are encouraged to use the div element instead.
And:
Examples of sections would be chapters, the various tabbed pages in a
tabbed dialog box, or the numbered sections of a thesis. A Web site's
home page could be split into sections for an introduction, news
items, and contact information.
So in my opinion, what you have demonstrated is not really a valid semantic use for the section element, and div would be better (or nothing at all, considering there is already the wrapper div). However, the two child section elements are probably used more as the spec intended.
I don't believe any of the HTML5 elements (article, section etc.) have any real bearing on SEO at the moment, although they could in the future. And I may be wrong. I'm not an SEO expert.
without seeing it in action, kinda hard to say exactly but here goes: the outer section element is more than likely establishing the sites desired document outline. if that is not the desired outcome then i agree with #james allardice, a div would be better there (especially since there is no headline for the outer section). if that is the desired outcome, then using the outer section establishes a generic section in the sites document outline, with its child elements nested inside, so that it can generate the appropriate document map. user agents can then use the document map to generate a table of contents, which can then be used by at's.
you can test a documents outline here: http://gsnedders.html5.org/outliner/
This seems pretty semantic. A Web site's home page could be split into sections for an introduction, news items, contact information.
At the moment I don't think any weight is gained for HTML5 semantics with SEO, but in the future - it will probably be key.