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.
Related
Is it an acceptable practice to use section tag as a child anywhere in the page
or it should be always a main tag???
For example:
<section class="software-development">
<h2>
<span>Software</span>
<span>Development</span>
</h2>
<div class="development-areas">
<section class="web-apps">
<h2>Web Applications</h2>
<p>dolor ipsum........</p>
</section>
<section class="mobile-apps"></section>
<section class="desktop-apps"></section>
</div>
</section>
You can use almost any HTML tag for anything you want, but the idea of semantic tags is to give meaning to the content of your page.
In this particular case, you can use the section tag (or even the article) to define any self-contained part of your page, there's nothing wrong with that, in fact it IS a section after all with its own title. Don't think of the use of the tags as a hierarchy all the time; think of what the element your creating actually is in the page and use the appropiate tag;
This is a great article that can help you clear everything regarding semantic tags:
https://www.lifewire.com/why-use-semantic-html-3468271
Just a quote from the same article:
Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph. This is both semantic and presentational, because people know what paragraphs are and browsers know how to display them.
More information for the section tag based on Mozilla's Docs:
Each should be identified, typically by
including a heading (<h1>-<h6> element) as a child of the
element.
If it makes sense to separately syndicate the content of a <section>
element, use an <article> element instead.
Do not use the <section> element as a generic container; this is what
<div> is for, especially when the sectioning is only for styling
purposes. A rule of thumb is that a section should logically appear in
the outline of a document.
You can read more in this question as well: https://stackoverflow.com/a/53229971/8437694
No, not anywhere. The specs say the following (emphasis mine):
The section element represents a generic section of a document or
application. A section, in this context, is a thematic grouping of
content, typically with a heading.
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.
Authors are encouraged to use the article element instead of the
section element when it would make sense to syndicate the contents of
the element.
The section element is not a generic container element. When an
element is needed only 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.
So <section> could easily be put almost anywhere without fighting against its semantics.
Technically, you can use <section> anywhere "where flow content is expected".
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.
Is it necessary to have a heading of <section> in HTML5 like mentioned here http://blog.whatwg.org/is-not-just-a-semantic
Sometime on a page we have some elements which are related and can be combined in a <section id="semantic name"> instead <div id="semantic name"> But we don't have any Heading for that..
Is it OK to use <section> without having <h1>, <h2>, <h3> inside
According to the HTML5 Doctor, you should not use <section> if there is no natural heading for it. Also, they say:
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.
Also, check out this nifty flowchart to decide what element is best to use in your situations.
No, it is not required.
You can easily check this by reading the definition of the section element ("should" is not "must") or by validating your HTML.
The W3C validator will report a warning when no heading is used, but a warning is not an error.
Its only necessary if it wont [validate] (http://validator.w3.org)
The use of section tags is to convey the structure of your content, like a book is split into chapters, paragraphs, etc
If your page is mash of images to look like a magazine cover you may not have a need for adding any sections. You'll most likely still want structure for navigation but that's not done using sections.
I would say any page containing chunks of text (most pages) should use a section tag rather than a div. keep the divs for controlling layout only.
My best advice is to see how your site looks in a text only browser, or other accessible client. It amazing how rubbish most sites are designed for accessibility. My take is that section tags are an attempt to improve that.
What is the difference between <section> and <div> in HTML? Aren't we defining sections in both cases?
<section> means that the content inside is grouped (i.e. relates to a single theme), and should appear as an entry in an outline of the page.
<div>, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes.
So no: using a <div> does not define a section in HTML.
From the spec:
<section>
The <section> element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. Each section should be identified, typically by including a heading (h1-h6 element) as a child of the <section> element.
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.
...
The <section> element is not a generic container element. When an element is needed only 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.
(https://www.w3.org/TR/html/sections.html#the-section-element)
<div>
The <div> element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.
Note: Authors are strongly encouraged to view the <div> element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the <div> element leads to better accessibility for readers and easier maintainability for authors.
(https://www.w3.org/TR/html/grouping-content.html#the-div-element)
Sections are most relevant in landmark navigation for assistive technology. To appear in the document outline or landmark list, they need a name, which can be assigned by means of aria-label, aria-labelledby or title:
<section aria-labelledby="s3-h2">
<h2 id="s3-h2">Introduction</h2>
…
For example VoiceOver on Mac then can provide an outline to navigate directly to that section.
<section> marks up a section, <div> marks up a generic block with no associated semantics.
Just an observation - haven't found any documentation corroborating this
If a section contains another section, a h1-header in the inner section is displayed in a smaller font than a h1- header in outer section.
When using div instead of section the inner div h1-header is diplayed as h1.
<section>
<h1>Level1</h1>
some text
<section>
<h1>Level2</h1>
some more text
</section>
</section>
-- the Level2 - header is displayed in a smaller font than the Level1 - header.
When using css to color h1 header, the inner h1 were also colored (behaves as regular h1).
It's the same behaviour in Firefox 18, IE 10 and Chrome 28.
<div> Vs <Section>
Round 1
<div>: The HTML element (or HTML Document Division Element) is the generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element (such as <article> or <nav>) is appropriate.
<section>: The HTML Section element (<section>) represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.
Round 2
<div>: Browser Support
<section>: Browser Support
The numbers in the table specifies the first browser version that fully supports the element.
In that vein, a div is relevant only from a pure CSS or DOM perspective, whereas a section is relevant also for semantics and, in a near future, for indexing by search engines.
In the HTML5 standard, the <section> element is defined as a block of related elements.
The <div> element is defined as a block of children elements.
Take caution not to overuse the section tag as a replacement for a div element. A section tag should define a significant region within the context of the body. Semantically, HTML5 encourages us to define our document as follows:
<html>
<head></head>
<body>
<header></header>
<section>
<h1></h1>
<div>
<span></span>
</div>
<div></div>
</section>
<footer></footer>
</body>
</html>
This strategy allows web robots and automated screen readers to better understand the flow of your content. This markup clearly defines where your major page content is contained. Of course, headers and footers are often common across hundreds if not thousands of pages within a website. The section tag should be limited to explain where the unique content is contained. Within the section tag, we should then continue to markup and control the content with HTML tags which are lower in the hierarchy, like h1, div, span, etc.
In most simple pages, there should only be a single section tag, not multiple ones. Please also consider also that there are other interesting HTML5 tags which are similar to section. Consider using article, summary, aside and others within your document flow. As you can see, these tags further enhance our ability to define the major regions of the HTML document.
<div>—the generic flow container we all know and love. It’s a block-level element with no additional semantic meaning (W3C:Markup, WhatWG)
<section>—a generic document or application section. A 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. (W3C:Markup, WhatWG)
My suggestion:
div: used lower version( i think 4.01 to still) html element(lot of designers handled that).
section: recently comming (html5) html element.
Using <section> may be neater, help screen readers and SEO while <div> is smaller in bytes and quicker to type
Overall very little difference.
Also, would not recommend putting <section> in a <section>, instead place a <div> inside a <section>
The section tag provides a more semantic syntax for html. div is a generic tag for a section.
When you use section tag for appropriate content, it can be used for search engine optimization also. section tag also makes it easy for html parsing. for more info, refer. http://blog.whatwg.org/is-not-just-a-semantic
<section></section>
The HTML <section> element represents a generic section of a
document, i.e., a thematic grouping of content, typically with a
heading. Each <section> should be identified, typically by including
a heading (<h1>-<h6> element) as a child of the <section>
element. For Details Please following link.
References :
http://www.w3schools.com/tags/tag_section.asp
https://developer.mozilla.org/en/docs/Web/HTML/Element/section
<div></div>
The HTML <div> element (or HTML Document Division Element) is the
generic container for flow content, which does not inherently
represent anything. It can be used to group elements for styling
purposes (using the class or id attributes), or because they share
attribute values, such as lang. It should be used only when no other
semantic element (such as <article> or <nav>) is appropriate.
References:
- http://www.w3schools.com/tags/tag_div.asp
- https://developer.mozilla.org/en/docs/Web/HTML/Element/div
Here are some links that discuss more about the differences between them:
http://html5doctor.com/avoiding-common-html5-mistakes/
https://teamtreehouse.com/community/use-div-or-section-element
http://webdesign.about.com/od/html5tags/fl/div-vs-section.htm
The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
whereas:
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used to group block-elements to format them with CSS.
Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer. So <div> was used to define different parts of a web page in html4 but <div> doesn't mean anything particular therefore html5 introduced many semantic elements <section> is one of them which give enough information to screen readers, search engines and browsers etc, to identify the different part of websites.
the main difference is if you use only <div> to define website parts. it's less readable.
if you use semantic elements instead of div tag. they can help to improve readability of your website not only to humans for other programs(screen reader, search engine etc) also. we still can use <div> inside semantic elements as a container.
I like the new tags from the HTML 5 standard. Can I use them more than once?
Like 3 <nav> tags, or two <sidebar> tags, and can I invent new tags like <fuu> ?
In xhtml I had:
<div class="nav-wrap">
<div class="nav">
...
</div>
</div>
so I could do something like:
<nav class="wrap">
<nav> <!-- can <nav> have <li>'s ? -->
...
</nav>
</nav>
?
The <nav> element is defined in the html5 spec, but the <sidebar> element is not. You can use as many <nav> elements as you'd like (so long as they aren't nested), but the other ones you'd have to provide a DTD and hope that the browser your users use is flexible enough to accept new elements.
I would recommend not defining new elements, and just use the existing semantic elements to create the effects you are after.
<div class="sidebar"></div> is good enough and will be treated as secondary content if you're wrapping your primary content in <main>, which effectively cues the browser into understanding that the region is not a header, footer, or primary content, which on most sites equates to a sidebar.
However, in most cases, the <aside> element is appropriate for use as a sidebar.
Per the spec:
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
Emphasis mine
The 'nav' element should be used wherever there is 'main' navigation going on, usually that's in the header of your website, but it can also be in places where you let the user navigate the current page.
It's normally not needed to put it in your footer (as it's not usually considered your primary navigation), although it can't really hurt.
zzzzBov's answer is not entirely correct, so let me try to give a more accurate example.
As alternative for 'sidebar', you should use the 'aside' tag, which normally contains secondary content (like side navigation, links, ad's, things like that).
<div class="sidebar"></div>
This is not semantically a sidebar, far from it. The div element is used as a hook for styling or JavaScript and has no semantic meaning, that's why the 'aside' element was introduced, please use that!
If you only need a wrapper for styling, then a div is perfect (even preferred).
As a rule of thumb, your HTML should contain elements that describe your content. You can usually read it out loud and it will make sense.
For example: "I have a list of navigation elements on the side of my page", would translate to:
<aside>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="/someplace">Link to someplace</li>
<li><a href="/someplace-else">Link to someplace else</li>
</ul>
</nav>
</aside>
So to summarize: in general you use the nav element on major navigation area's, like the navigation found in the header of websites and sometimes navigation found to navigate the current page.
Sections of a page that are not your main content (but might be related) are usually put in an 'aside' element.
Hope this helps!
It's more common to nest an unordered list of links within your nav:
<nav class="wrap">
<ul>
<li>...
</ul>
</nav>
You can have as many nav elements as you need in your page, but you don't need to wrap every link or set of links in a nav - only 'major navigation' should be in a nav element. There's a good introduction to nav in this HTML5 Doctor post.
For sidebars there's no need to invent your own element, use the aside element for them.
You can invent your own elements and still have your markup work in an HTML5 compliant browser, the HTML5 tokenization algorithm doesn't care about what tag names you use as long as they follow the rules, but you wouldn't then be writing HTML5 so it's sort of pointless. I recommend having a read through the section "Conformance requirements for authors" at the start of the spec, particularly the bit "Cases that are likely to be typos":
When a user makes a simple typo, it is
helpful if the error can be caught
early, as this can save the author a
lot of debugging time. This
specification therefore usually
considers it an error to use element
names, attribute names, and so forth,
that do not match the names defined in
this specification.