When using the <aside> tag in HTML 5, do we need to add float:right (or left) attribute for it? Because most of the time, it's used as sidebar, I think.
It's basic question, but I just want to figure out the right way to use it.
You don't need to add anything. HTML is a language to define the structure of a document. You should pick HTML tags based on their semantic meaning, not how they are to be displayed, which is what CSS is for.
You would use an <aside> tag where the content contained within is auxiliary to the main content of the page.
To further elaborate my explanation, <div>, <header>, <footer>, <main>, <article>, <nav>, <aside>, and <section> all render identically, but they have vastly different semantic meaning.
The aside element is not called so because of positioning it gets it's name for being designed to contain secondary content. It can be styled any way you like but is supposed to be placed semantically in your DOM based on its content.
Have a read of the excellent article here on Html5Doctor for a further explanation.
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".
It is not entirely clear to me what the best usage of the <header> tag is.
I have had this minor discussion with someone at my internship and he said you would only like to use the <header> tag inside an <article> tag element. I told him it would not be wrong to use it as the element containing the navigation etc. After talking about this, I am still not sure wether I should use it the way I thought it can be used or the way he tried telling me. On school I also learned that HTML5 is turning to a more semantic way of describing ones document. Is the <header> tag not supposed to be a part of that?
Take a look at the official documentation.
The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.
When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.
The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
A sectioning content can be <article>, <aside>, <nav> or <section> (https://www.w3.org/TR/html5/dom.html#sectioning-content-0)
It isn't mandatory to use it on an <article> section. Even the examples provided shows that:
<header>
<p>Welcome to...</p>
<h1>Voidwars!</h1>
</header>
Regarding you saying
I told him it would not be wrong to use it as the element containing the navigation etc
the definition tells us that is absolutely ok to use it for navigational aids (aka <nav>).
The header element typically contains the headings for a section (an h1-h6 element or hgroup element), along with content such as introductory material or navigational aids for the section.
Source
http://www.w3schools.com/tags/tag_header.asp
Here it even says that the header tag is new in HTML5.
And it is used in articles.
The example here uses article:
http://www.w3schools.com/html/html5_semantic_elements.asp
But it is possible to use it within other semantic tags like nav
Is having a single section within the main tag acceptable or is redundant?
<main>
<section>
<section>
...
</section>
<section>
...
</section>
</section>
</main>
Or should I just put the two section tags within the main... even though all the content within it is relatable.
Also, is having a <header> within every single section acceptable? It is classified as “a group of introductory or navigational aids”. But seems like if I were to use it as I've described, it'd be just like using <h1>-<h6>.
The <section> element is used to represent a group of related content. There shouldn't be any issue in nesting these tags. You could also make use of other tags like <article>, <aside> etc.. The idea behind using these elements is to give more semantic meaning to your pages, allowing computer browser to understand your content better.
There are no restrictions on how to nest them and what tags to use in them. You can have the whole set of html tags with in them (you can use h1-h6, or other elements).
You might want to have a look at these articles:
How to Use The HTML5 Sectioning Elements
http://html5doctor.com/the-section-element/
Question: is the single section inside main redundant?
It depends on the semantic meaning of your page. Describe your
desired page layout in natural language. If you say "the main area
has a section that contains many sub-sections", then your HTML is
right on the money. If you say "the main area is broken down into a
few sections", then your single section sounds like an evolved form
of the div-itis virus - the one that left a lot trash behind: wrappers,
containers, container-wrappers, content-wrappers, main-content-wrappers,
wrapping-containers, containing-wrappers...
Question: is header within every section acceptable?
Yes. But again, do the above natural language litmus test to
determine if it is suitable.
There's also some confusion between <h1>-<h6> vs <header>. Think of header as an "introductory part" within a section. It may or may not be necessary in your markup. If your introductory part of the section consists of, say, only a <h1>, you should probably omit use of the <header>; but if your introductory part includes a few items, e.g. a heading, a logo, a nav bar, then it's probably a good idea to wrap them in a <header> tag.
What is the difference between the div tag and the new HTML5 aside tag?
W3Schools has a very similar description for the two -
Aside
Div
I have also seen many sites use the aside tag where a div tag would be perfectly fine.
Although, when I put them both into practise, they behave the same way, like so:
<aside>
<h4>This is a heading</h4>
<p>This is a very short paragraph.</p>
</aside>
<div>
<h4>This is a heading</h4>
<p>This is a very short paragraph.</p>
</div>
WORKING EXAMPLE
So my question is, what is the main difference between the two? When should one be used over the other?
Short answer:
<div> tag defines a general division or section in HTML.
<aside> tag has the same representations as a div, but contains content that is only related to the main page content.
Difference
Both have the same behavior but have a different meaning logically.
Similarities:
Both of them also supports the Event & Global Attributes in HTML.
<aside> and <div> elements have no default rendering (and presentation qualities). So you will need to make them a block element and adjust their appearance and layout with style sheet rules. By default, browsers always place a line break before and after them. However, this can be changed with CSS. Most browsers will display these elements with the following default values:
div {
display: block;
}
Differences
The <aside> element identifies content that is related but tangential to the surrounding content. In print, its equivalent is a sidebar, but they couldn’t call the element sidebar, because putting something on the “side” is a presentational description, not semantic.
According HTML5, <aside> element is a Sectioning Content, so its content defines the scope of headings and footers. Each Sectioning Content element potentially has a heading and an outline. When a browser runs across a sectioning element in the document, it creates a new item in the document’s outline automatically.
The <div> element is used to create a logical grouping of content or elements on the page. It indicates that they belong together in some sort of conceptual unit or should be treated as a unit by CSS or JavaScript.
It is a difference between HTML 4.01 and HTML5, The <aside> tag is new in HTML5.
All versions of every browser support <div> element.
The only practical difference (for now at least) is that old browsers do not recognize aside at all. They will treat it as undefined, not as a block element like div. Old versions of IE do not even let you style an aside element, though there are JavaScript-based ways to fix this.
The theoretical difference is explained in HTML5 drafts such as the current HTML5 LC. Note that w3schools.com is not an authority of any kind; see http://w3fools.com.
A div tag has no semantic weight and can contain any type of content. In HTML5 you can advantageously use section tags instead to add semantic weight. The aside tag should be used for content that is not related to the main content of a page
The main use that I see for
<aside>
is that this is giving more clarity to the HTML code. You might recognize the link between a main text and a subordinate text.
All HTML5 new elements intention is to make it easier to index your data.
With <aside> tag, it's very easy for program to identify that it is a aside data of the page.
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.