Let's say I want to create a simple responsive one page homepage. I find several alternatives to do this, but what is the best option? I have read several articles on the net including the ones fron W3C, but I don't get a clear answer!
I'm going to have two column layout with text to the left and an image to the right. On a desktop computer they will be besides each other, styled left and right. But in smaller devices like a mobile, the right column will be changed to left and be placed below the text column.
Is alternative 1 bad in a HTML5 point of view? My thought was to devide the page with several parts of alternative 1 or 2. There is also a third alternative(I guess there almost endless with other options aswell) to use two article elements inside the section element and use a article element for the image instead of the aside element.
I guess some of you might also suggest me to use article element instead of section elements and use nested article. It's confusing with all this options!
Should I also use article and header element in alternative 1?
Preciate some feedback and guidelines! Sorry for all my questions, I just want to improve my coding skills!
Alternative 1:
<div id="intro">
<div class="content-left">
<h2>Headline</h2>
<p>Text</p>
</div><!-- end class content-left -->
<div class="content-right">
<img src="...."/>
</div><!-- end class content-right -->
</div><!-- end id intro -->
Alternative 2 with HTML5 elements:
<section id="intro">
<article>
<header>
<h1>Headline</h1>
</header>
<p>Text</p>
</article>
<aside>
<img src="...."/>
</aside>
</section>
The answer is: it doesn't really matter much, apart from code readability. Please see Why use HTML5 tags? for more on that.
You could have a <section class="articles"> that contains all <article> elements. You could have a <div class="articles"> that contains all <div class="article"> elements. I think it's safe to say there's no doubt the first one is easier to read for developers. Your pick.
There is, however, one issue: you self-close <img> -- no need for that in html5 anymore. See Are (non-void) self-closing tags valid in HTML5?.
In HTML 5, <foo /> means <foo>, the start tag. It is not a "self-closing tag". Instead, certain elements are designated as having no end tag, for example <br>. These are collectively called void elements. The slash is just syntactic sugar for people who are addicted to XML. Using the slash in a non-void element tag is invalid, but browsers parse it as the start tag anyway, leading to a mismatch in end tags.
Related
Background
Our CMS wraps pieces of content into <article> tags by default.
This also applies when viewing the main page for a piece of content: The main section on the page is wrapped in <article>.
Now we want to split that section, so that one part appears in a "banner" at the top, and another part appears below.
The html in between contains some unrelated elements, and it is controlled by another subsystem, so it would not be straightforward to wrap the entire section into a wider article tag.
(let's not go into detail about technicalities of the CMS we are using, I would like to focus on the semantic html part)
Example
(the real structure would be more complex, with more nesting and wrappers)
<article class="banner">
<h1>Example event</h1>
<p>Event starts next week!</p>
</article>
<div>
Unrelated navigation link, that ends up here for silly technical reasons.
</div>
<article class="main">
<!-- this article tag belongs to the same event as the above. -->
<p>Every year we meet up and it is awesome.</p>
</article>
Question
Is there an attribute or something to indicate that the second <article> tag is a continuation of the first?
Or if that is not possible, what would be an acceptable solution?
I am very new to HTML5 and I need to implement an article container (for example, I need to create the classic structure for the WordPress articles where the user see a series of articles one below another), but I have some doubts about the semantic use of the new HTML5 components.
To do this I thought something like this:
<section>
<h1>My Posts:</h1>
<article>
<header>
<time datetime="2010-11-10" pubdate>10/11/2010</time>
<h2>FIRST POST TITLE</h2>
</header>
<p>
POSTS CONTENT
</p>
<footer>
<address>MY NAME</address>
</footer>
</article>
<article>
<header>
<time datetime="2010-11-01" pubdate>01/11/2010</time>
<h1>SECOND POST TITLE</h1>
</header>
<p>
POSTS CONTENT
</p>
<footer>
<address>MY NAME</address>
</footer>
</article>
</section>
So I have reasoned in the following way:
All the shown posts are contained in an external <section> element (because following the HTML5 specification a <section> represents a generic section of a document, in this case an area where posts are shown), the <sections> have its <h1> title.
Every post is represented by a specific <article> element (should be semantically correct).
Every article element represents a specific post and contains a <header> element that contains the date of publication and the post title. I used a <header> element to contain these information because this element is used to represent "a group of introductory or navigational aids".
Then I have a classic <p> to contain the article textual content (but I can also wrap it into a div or is it better use a new <section> if the text is long and detailed?)
Finally I have put the e-mail contact into a <footer> element because it is an information about the container (the <article> element).
Is this a valid structure for my problem? Is it semantically correct in HTML5?
This looks largely great to me. headers and footers were changed a while ago to allow them to be used in sections and articles.
However, the p element should be used for a single paragraph. In all likelihood, your articles will have more than a single paragraph, and WordPress will generally generate these for you based on line breaks. If you need to wrap all of your article contents into an element, a div will be sufficient. If your article is long and has several sections, you could use these instead.
The address element threw me off a bit first, as not many people use it, but its purpose is to describe the contact address of the author of the document (or part of the document), so your usage is absolutely correct.
For bonus points you can consider implementing the hCard standard for formatting the email: http://microformats.org/wiki/hcard
Basically, aside from the use of the paragraph element to wrap the entire article, this is absolutely fine! You've shown a lot of thoughts behind your decisions, which is quite rare these days.
Your markup is fine.
(Note that for the first article you used h2 and for the second one h1. While both ways are possible, why not stick to one variant?)
is it better use a new section if the text is long and detailed?
Don’t include the whole text in a section! But when you use sub-headings in the article, you are "encouraged" to use explicit section elements to group the heading and its content.
I was just reading the HTML5 spec again to find out if I can nest a nav element inside a header. The paragraph for the header element is a bit strange if you ask me, but probably only because I don't understand it.
In this example, the page has a page heading given by the h1 element,
and two subsections whose headings are given by h2 elements. The
content after the header element is still part of the last subsection
started in the header element, because the header element doesn't take
part in the outline algorithm.
<body>
<header>
<h1>Little Green Guys With Guns</h1>
<nav>
<ul>
<li>Games
<li>Forum
<li>Download
</ul>
</nav>
<h2>Important News</h2> <!-- this starts a second subsection -->
<!-- this is part of the subsection entitled "Important News" -->
<p>To play today's games you will need to update your client.</p>
<h2>Games</h2> <!-- this starts a third subsection -->
</header>
<p>You have three active games:</p>
<!-- this is still part of the subsection entitled "Games" -->
...
Source: http://www.w3.org/TR/html5/sections.html#the-header-element
So, according to the comment, <p>You have three active games:</p> is still part of the subsection that started inside the header because the header by itself does not introduce a new section.
But doesn't this break with the nesting structure that HTML is build on? For example, this is invalid markup because the nesting is wrong:
<div>
<p>
</div>
</p>
But If I would define - theoretically - that the div does not do anything, then it would be fine?
Please don't get me wrong, this is not a rant or anything, I just try to understand whats the sense behind this? Also, why is the header element listed under sections, if its not a sectioning element?
By the way, is HTML5 outlining still as broken as it was about a year ago? Or is there a tool or something that handles it correct by now?
So, according to the comment, You have three active games: is
still part of the subsection.
Keyword here is according to the comment, which is not the code. Technically the paragraph is a child of the body. I'ld agree the coding and comments do not match, but the code is technically not incorrect. And there are no restrictions that comments or content can only exist in one block.
This
<div>
<p>
</div>
</p>
is technically incorrect which you can see more clearly if I add some CSS.
div { height:100px; width:auto; }
p {display:block; height:50px; width:300px}
Given that CSS what is the above code suppose to look like?
What compatible browsers may do is rewrite the above code into
<div>
<p></p>
</div>
<p></p>
After the browser engine rewrite the HTML and CSS can be rendered.
Is this a correct way to use the <section> tag?
<section id="container">
<section id="outer">
<section id="inner">
</section>
</section>
</section>
I'm trying to work out whether or not I should use only one section id, and leave the other two sections as just divs?
If you are just using these elements to place things in some position / style things, then you should probably be using divs.
Section is really for grouping content that belongs together - you shouldn't really have a section without a title (H1 or similar) element describing what the section contains... a few people have made similar mistakes in the past I think:
http://html5doctor.com/the-section-element/
From the spec:
NOTE: 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. A
general rule is that the section element is appropriate only if the
element's contents would be listed explicitly in the document's
outline.
Having said that, it's perfectly acceptable to nest section elements. Maybe something like:
<section>
<h1>Portishead</h1>
<p>Portishead are a cool band from Bristol</p>
<section>
<h1>Dummy (album)</h1>
<p>some info....</p>
<img src="..." />
</section>
<section>
<h1>Portishead (album)</h1>
<p>some other info info....</p>
<img src="..." />
</section>
</section>
Note:
My answer is severely out-of-date, and no longer contains sound advice given the changes to HTML that have happened in the last decade. I will be leaving this answer as-is for historical context, but please be aware that the structure suggested is not best practice—particularly around the use of the obsolete document outline.
Short answer: The code as you've provided is not semantically valid.
Long answer:
section elements are meant to mark up sections of content. Each section of content (i.e. Introduction, Abstract, content, conclusion) could have subsections.
If you're using those elements for structural purpose, you should be using div elements instead. They are semantically meaningless.
This would be more semantic:
<section id="introduction">
<div id="outer">
<div id="inner">
Some content
</div>
</div>
</section>
This would be a semantic way of marking up nested sections:
<section id="content">
<h1>Fizz Buzz</h1>
<section id="chapter-1">
<h1>Foo bar baz</h1>
...
</section>
<section id="chapter-2">
<h1>Lorem ipsum dolor</h1>
...
</section>
....
</section>
My personal recommendation would be to utilize semantic structure as much as possible when you create HTML5 layouts. As other posters have indicated, nesting section elements is totally acceptable, however you need to just make sure it makes sense to do so.
I personally use a few patterns that I've put together based on some research I've done over the course of the last year or so. The most common situation for using nested section elements is to provide ARIA roles for the main content of the document (see "site layout" example below)
Note: assumes body/html elements are present, etc
Site Layout
<header class="header" role="banner">
....
</header>
<!-- used once per page, implies role="main" -->
<main>
<!-- declares page content to be a document and not a web app -->
<section id="wrapper" role="document">
<section class="hero">
....
</section>
....
<section class="content">
</section>
</section>
</main>
<footer class="footer" role="footer">
....
</footer>
Single-Page Content Layout
Note: This layout applies to a page with a singular/topic/object and isn't suitable for all use cases
<article>
<header>
<h1>Page Headline/Title</h1>
</header>
<section class="page-content">
....
</section>
<!-- if this is a post or something with metadata/authorship info... -->
<footer>
....
</footer>
</article>
I use the tag for the class name on the shell header/footer elements as well as landmark roles to insure I can always distinguish them from other header/footer elements within the page (e.g. easy CSS scoping).
References
role="document" https://www.w3.org/TR/wai-aria/roles#document
A region containing related information that is declared as document content, as opposed to a web application.
"Why the <main> element doesn't need a role attribute": https://www.w3.org/TR/2012/WD-html-main-element-20121217/
The main element formalises the common practice of identification of the main content section of a document using the id values such as 'content' and 'main'. It also defines an HTML element that embodies the semantics and function of the WAI-ARIA landmark role=main.
"W3.org/Wiki explanation of nesting <section> elements" - https://www.w3.org/WAI/GL/wiki/Using_HTML5_section_element
The section element is a container for document content that has a related theme, and represents the section of a document that is grouped around a general concept. Everything within a section element is related. Also section elements may be nested if necessary. The section element is a generic semantic element, that can be used to combine portions of a document together into discrete units that are related in some way. For example, the section element may create items inside an outline of a document, or divide page content into related pieces (like an Introduction) followed by some background information on the topic.
A useful way to think through this is to consider how a screen reader would see your site. Imagine (and in fact you should test this for yourself) the screenreader announcing the word 'section' before reading the content inside your <section> tag.
If that doesn't make logical sense then maybe you've got your items ordered wrong.
Check out aria region role.
I don't know exactly how screen readers read nested sections but if the logical
sections on your page don't have a hierarchy then your HTML shouldn't either.
eg. (this is meant to represent HTML structure)
GOOD
section aria-label="dogs"
section aria-label="labradors"
section aria-labels="terriers"
section aria-label="cats"
section aria-label="sphynx"
section aria-label="persian"
BAD
Section used solely to group two other sections, but without a real meaning of its own as a 'section'.
section style="display: flex; flex-direction: row"
section aria-label="news"
section aria-labels="sport"
HTML5 also allows for setups such as:
<section>
<header>Header of section</header>
<aside><ul><li></li></ul></aside><!-- previously known as sidebar -->
<footer>Footer of section</footer>
</section>
multiple times on the same page, so you don't have just the one header, it goes a lot deeper than this, but it's worth checking out.
Check out the http://gsnedders.html5.org/outliner/
An updated method (as far as I understand it) could be something like this:
<main id="content">
<div id="inner-wrapper">
<section>
<h1>Section Title</h1>
...
</section>
<section>
<h1>Section Title</h1>
...
</section>
</div>
</main>
main {
width: 100%;
...
...
}
#inner_wrapper {
max-width: 80%;
margin: 0 auto;
}
See: http://www.w3.org/TR/html-main-element/, http://www.sitepoint.com/html5-main-element/ or http://html5doctor.com/the-main-element/ for more info.
Let's say you want to use a <header> tag for the header part of your site.
But currently your header is made from 3 elements (because of design-related reasons), like:
<div id="header-wrap">
<div id="header">
<div id="header-content">
...
</div>
</div>
</div>
So which one of these DIVs should be replaced with <header> ? And does it matter?
A purpose of HTML5's new tags is to add semantic meaning to your document. On the other hand, generic elements like <div> have been preserved precisely because they have no semantic meaning. They are ideal for adding visual structure without impacting the semantic structure.
The <header> element should envelop the semantic header. I would venture to say it's most likely the outermost element that should be <header> since all elements involved clearly exist to support the header in some fashion, but only you know the semantic meaning of your document best, so you can best answer specifically.