I'm learning about HTML5, and honestly I can't say I'm really impressed. Semantics are nice and all, but I think that they introduced new elements with a very thin line between them, and a even thinner line between them and the old divs.
Everything is very clear if you do a generic purpose site, like a blogging engine, news publishing portal, and similar, but web apps... I'm having a lot of dilemmas about new html elements.
Here is my situation. I'm developing an ordering system. On the sellers interface I have 3 columns (inline), which represent the status of the order. When the status is changed element is moved from one column into another (background ajax, and js manipulation).
In Html4 I would use 3 divs and put a heading with a title on top of each one. Elements inside the columns would also be divs.
But what about HTML5? I have been looking at the section element, but I'm not really sure how to use it. Here are the options:
Put everything inside one section - I don't think that is the way to go
Put a section around each of the column divs, and heading inside the section
Replace the divs with sections
Put sections inside column divs
So, which way to go?
EDIT: first of all thanks everyone for your quick replies. In the end I'll probably go with Ian Devlins suggestion, and put each column as section. Anyway, just to point out my dissatisfaction with html5, multiple permitted options aren't always a good thing. I'm afraid what will the html5 web look like in a few years, when we can't fully agree on a simple question like this.
EDIT2: one more thing. I'll ask it here so I don't have to open another question. In addition to these 3 columns I have another div which contains order details, when any of the orders are selected. Should it be an article since its self-contained content, or to use an aside tag?
div is a perfectly valid HTML5 tag. If the new tags don't make any sense in your project, don't feel forced to use them.
To quote the w3.org spec:
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.
And another quote from the w3.org people:
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.
Given the definition for section by w3 we can conclude that your example would be a good use of section because:
The elements have a header
It is a thematic grouping of content
It is a part of the document outline.
EDIT:
To expand upon your comment below, the new HTML5 elements are NOT supposed to replace the old HTML4 elements. For example, going through a page and replacing all the div elements with section elements would be flat out wrong. The section element was, in my opinion, intended to make it easier for machines to parse certain pages (think: feedburners) by giving a more semantic structure to a page. After all, what's easier to parse, a page with 30 div elements, or a page with 10 div 5 header 5 section 5 article and 5 footer elements?
In this particular case I would have an overall div around them, and then each column as a section as each one has a different meaning, each of which I assume has a heading indicating its status.
e.g.
<div>
<section id="col1">
<header><h1>Column 1</h1></header>
content....
</section>
<section id="col2">
<header><h1>Column 2</h1></header>
content....
</section>
<section id="col3">
<header><h1>Column 3</h1></header>
content....
</section>
</div>
Related
While studying the HTML 5 semantic tags, I've ran upon some doubts on how to proper utilize the main and section tags, and since the W3Schools reference seems a little vague and other references on the Web seems to diverge I would like to know if there is a proper guideline to the following questions or if its pretty much up to the programmer:
Does the main tag also has the meaning of grouping related elements or in that case should it be within a section tag?
Does it make sense to wrap single elements, such as an image, into a section tag?
It's pretty common to have a header and footer of the page (not inside any section), in that case, should the remaining in between those tags be wrapped inside a section tag, as if delimiting the "content" of the page?
Does the main tag also has the meaning of grouping related elements
Only to the same extent that <div> groups related elements. The primary purpose of <main> is to indicate where the dominant content of the page starts. (and additionally, according to the WHATWG spec but not the W3C one, where the dominant content of the page resumes).
or in that case should it be within a section tag?
A section tag is one way of grouping your content, to indicate that its contents are on a particular theme, in a way that differs from the content which is not in the section. Typically, you can and should give the section a heading using a <h[1-6]> element, which states what that theme is.
Does it make sense to wrap single elements, such as an image, into a
section tag?
Rarely. For one thing that would mean that the section didn't contain a heading. See above. It's unlikely that any new information would be conveyed by wrapping an image on its own in a section tag.
It's pretty common to have a header and footer of the page (not inside
any section), in that case, should the remaining in between those tags
be wrapped inside a section tag, as if delimiting the "content" of the
page?
No. The "content" of the section is the section less its header and footer. There's no need to add another sectioning element container.
I read in the HTML5 specification that the generic div tag should only be used as "last resort," when a more specific element is unavailable. For example, the tags header, footer and section are preferred for grouping content thematically.
But it seems like the vast majority of websites still use div as the primary element. My question is, how often and in what contexts is it appropriate to use a div? And which other elements should be used in its place?
I'm looking for answers based on the specification rather than personal opinions. Thanks!
There isn't anything that takes the place of <div> (theres a reason its still in the spec), but HTML5 has more elements available that are more specific.
In addition to <header>, <footer>, and <section> there is:
<nav>
<article>
<aside>
<main>
<details>
<summary>
<figure>
<dialog>
<menu>
and more!
Basically any new HTML5 element can take the place of a <div>.
When should you use a div? You answered it yourself:
when a more specific element is unavailable
MDN has a HTML5 element list which contains all standard HTML5 elements, and indicates which elements are new with HTML5.
The thing to remember is that div tag is still a part of HTML5 and it’s not obsolete, yet.
However, div element has been abused a lot with HTML4, and rightfully so as there were never any alternates to it. Now that HTML5 has included some great new structural elements, div is no longer the best option for creating layouts.
The main disadvantage with div is that the element has no meaning due to which creating application-ready layouts is very difficult. The new structural elements introduced in HTML5 will surely help a lot with that issue.
The section element will most likely be used more than the other structural elements like header, footer etc. mainly because it is not specific as others. Also there is no limit as to how many structural elements you can add but the thing to remember is that section is not a complete div replacement.
div still has a role in HTML5. It is great for grouping similar elements as well as dividing elements as needed. Also section should not be used just for styling because section was not intended to be a wrapper.
The reason header, section, footer, and other such elements were created is to help with referencing them in css and scripting languages. W3C looked at the most common IDs web developers were using for divs and made the new elements in HTML5 accordingly. The reason divs and IDs is widely considered bad practice is because all those attributes clutters up the code. And as we all know, cluttered coding leads to mistakes and errors.
Where do you use them? That's pretty self explanatory. Take the header for example. It's most common use is the top of the web page. Right click on the stack overflow logo at the top and view the source. They're actually using a div with an ID of 'header'. Technically, that's bad practice.
A great use for divs is to create a wrapper around your entire content like this.
<div id="wrapper">
<!--content-->
</div>
Then you can reference it in css to center:
#wrapper{margin:20px auto;}
Hoped this helped!
I am working on a new blog's design and markup right now and I have found a place where I'm tempted to nest two anchor tags within a single heading tag:
<h3><a>Popular<a/>|<a>Recent</a></h3>
Which looks like this:
(source: autochemky.com)
The purpose of doing this would (obviously) be to enable "POPULAR" as a link to display popular articles and "RECENT" a link to display recent articles. . . clicking one or the other would only change the visible content (article list) on the sidebar and not link to a new page (either via ajax or having them both already loaded and one being a hidden div).
Doing this is a measure to avoid additional potentially unnecessary code involving more than one h3 element or more than one visible list of articles.
I suppose my questions to go along with this are (in order of importance and assuming HTML5):
Is the markup valid/acceptable?
Would this have any realistic/noticeable effect on SEO?
Would you prefer to achieve the same result in a different way?
Assuming HTML5 - it's acceptable, HTML5 introduced that any element can be inside an <a> tag (pretty sure)
Changes in HTML5
Although previous versions of HTML restricted the a element to only containing phrasing content (essentially, what was in previous versions referred to as “inline” content), the a element is now transparent; that is, an instance of the a element is now allowed to also contain flow content (essentially, what was in previous versions referred to as “block” content)—if the parent element of that instance of the a element is an element that is allowed to contain flow content.
Not a noticeable effect on SEO, it's a minor detail, as minor as you probably should be using a <h1> tag if that is the header of a section seeing as that is the base in the new HTML5 semantics.
I'd stick to what you have there definitely.
Well, yes, it's valid to have several a elements inside a heading (as long as you don't nest the a elements).
But I think your heading doesn't make sense. It's either "Popular" or "Recent", not both at the same time, right? So your heading is missing its purpose: describing the content of its section.
You should use a content toggler that is not part of the heading:
<section>
<h1>Popular</h1>
<nav>Or see recent content</nav>
<ul>
<li>…</li>
<li>…</li>
</ul>
</section>
(If you wish, you could change the wording and style it that way that it looks like your example, by positioning the link to the other content next to the heading.)
Clicking at "recent content" should change the heading from "Popular" to "Recent", and changing the link to popular content
If you don't use the URL anchor + CSS to hide/show the corresponding content, and you don't have a fallback for users/bots without JS, you should display both at the same time, popular and recent content, for users with disabled JavaScript.
Regarding:
The h3 is because it is one of the sections in the sidebar and my sidebar sections are all headed by h3. I have seen some sites that use h2 and some that use h3, I chose h3.
Just to get sure: You are not free to use any heading level you like. You need to follow your document outline. If the use of h3 is correct depends on your whole page structure.
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.
I see the <p> tag used a lot in the code of others but have never used it in my own work.
I'm wondering what advantage this gives over using a <div> tag?
Are there any benefits I could get
from incorporating the <p> tag
into my pages?
Is there any disadvantage in only
using <div> tags without <p>?
DIV indicates a separate section on a page, which is not semantically connected to the others. With P tags you indicate that this piece of text is broken into paragraphs but it still stays a single entity.
ADDED: With "semantics" people usually refer to the possibility to extract information from HTML as to what various elements of a page represent and how they are related to each other, as opposed to treating the whole HTML as just a markup to be rendered. For example, when you do menus it is recommended that you use ULs (unordered list) for that purpose, because it will be possible to learn from the markup that all LIs (list items) contained within a particular list probably mean choice options of the same level. I know it is helpful for screen readers for impaired people that you try to make your markup as semantic-rich as possible.
If you're not concerned with this, then it is virtually no difference for the rendered result whether you use DIVs or Ps. You can style both with CSS to achieve the same look and feel.
Semantic HTML is still not "the absolute good" to be strived for. For many people semantics does not add any value as they wish just that their pages are rendered correctly. That's why the ever-lasting discussion on whether to use tables for markup (and add semantics where it does not belong) or stick to CSS is not going to end any soon.
p means 'paragraph', div means 'division'. That's as complicated as it gets. It's a way of telling search-engines, scrapers, tools, etc that this is a paragraph of text.
div is undesirable when you're actually marking up a 'paragraph' of text.
Both tags have a different purpose.
p indicates a paragraph, usually for
organising content (text and
images,mostly)
div on the other hand is a
rectangular space on the canvas,
usually for layout purposes.
Example: You would put your navigation panel in a div, making it easy to move it from the left to the right of the page, or switching to a 3 column layout. The different sections in your navigation (first the general site navigation, next specific hotlinks to the most recent blog post or whatever) could be seperated by putting them in defferent paragraphs.
(I know, bad example, because the navigation is better represented by unordered lists, but what the hey).
In direct answer to your question, they give you the advantage of differentiating between organising your layout and organising your content, in a way that becomes clear in the HTML source.
If you are tagging content so you can lay it out with CSS, you probably want <div>; <p> should be used to indicate a paragraph of text and that's it.
Beyond just the semantics of it (which are important), you will also want to consider validation problems. According to the HTML4 spec, you are not allowed to nest other block-level elements (<div>, <ul>, other <p>, etc) inside a <p> without invalidating your HTML.
I've seen a number of instances where parsers will choose to prematurely close the <p> to allow the other nested block element to begin.
Are there any benefits I could get
from incorporating the tag into my
pages?
Yes, provided that you use it correctly -- because the use of semantic HTML is always a benefit.
There are a range of reasons why this is so, but the primary one for people who need a quick explanation is SEO. Search engines will understand your page better if you use semantic HTML.
p tags are for paragraphs. p tags often contain additional CSS styling regarding the textual content that goes into them, and this styling can be defined in various places in the css documentation. for example, a p usually has a bit of extra space below it. if you try laying something out with p tags, you'll end up with uneven padding.
It is better to use divs if you want to have more control over the content in your page from a programmatic perspective. sticking to divs for all layout concerns will also allow you to use p tags exclusively for paragraphs.