What would be semantically correct way of marking up products in HTML5?
This is how I do it currently. I am using BEM in the following example:
<div class="product__box">
<h2 class="product__box-title">
Chair
</h2>
<img class="product__box-img" src="but-can-it-do-this.jpeg" alt="image-of-chair">
<p class="product__box-price>
$399
</p>
<a href="#" class="product__box-button role="button">
Add To Cart
</a>
</div>
I saw some people using <article> tags instead of <div>, but I am not sure that is correct. This is the shortened definition from W3C:
The article element (...) could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
How would you mark up a product to follow HTML5 spec?
This is pretty much up for debate and depends on the general semantics of your website, but I think you could change the surrounding div with article in your example.
As the spec states:
article
Represents a section of a page that consists of a composition that
forms an independent part of a document, page, or site.
I'd argue a "product box" (a.k.a. teaser as far as I understand) is a "composition that forms an independent part"...
Some further reading about the article-tag and HTML5 semantics in general:
html5doctor: Let's talk about semantics
adactio.com: Pursuing semantic value
Related
My goal is to use the correct H* tag (H1 to H6) in my html5 code.
I read here I shouldn't use <section> at all: "Why you should choose article over section : Browsers’ visual display of headings nested inside elements makes it look as if they are assigning a logical hierarchy to those headings. However, this is purely visual and is not communicated to assistive technologies"
but I feel that isn't true because of the answers to this popular question:
that says "sections in an article are like chapters in a book, articles in a section are like poems in a volume" and I want to use sections for their intended purpose.
The problem is this mdn page says "Important: There are no implementations of the proposed outline algorithm in web browsers nor assistive technology; it was never part of a final W3C specification. Therefore the outline algorithm should not be used to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure."
The guy from the first link I posted does make a good point about halfway down that page where he says "browsers display different sizes of font depending on how deeply the is nested in <section>s”.
So am I correct in saying I have to correctly match H* tags to depth/nesting to achieve a good outline AND visual styling or is there a different way. eg this would be incorrect:
<body>
<h1> something </h1>
<section>
<h1> section heading for outline </h1>
<article>
<h1>my first news article</h1>
<p>stuff</p>
</article>
</section>
</body>
because screen readers can't properly process <section> for outlining.
and because browsers display different fonts according to level of nesting.
so then would this would be correct?
<body>
<h1> something </h1>
<section>
<h2> section heading for outline </h2>
<article>
<h3>my first news article</h3>
<p>stuff</p>
</article>
</section>
</body>
note: This is my first question I'm posting so please go easy on me if I've made a faux-pas, I'm new here :)
The document outline algorithm based on <h1> has been removed from the spec and actually never worked. In terms of heading levels, your last code example is the correct one.
Why the HTML Outlining Algorithm was removed from the spec – the truth will shock you!
There Is No Document Outline Algorithm
So you should not use it, and your quote holds true.
Authors are advised to use heading rank (h1-h6) to convey document structure.
Correctly using <section>
As to the question of using <section> vs <article>.
You shouldn’t avoid the latter due to styling issues. You already did your research and should stick to your outcome. You’d need to apply some styling yourself, though.
I’d also like to add the ARIA perspective on a page summary:
<article> has role article
An article is not a navigational landmark
and
<section> has role region, which is …
[…] sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page.
To do so, it is also noted
Authors MUST give each element with role region a brief label
So, let’s put it together
<body>
<h1> something </h1>
<section aria-labelledby="s1-heading">
<h2 id="s1-heading"> section heading for outline </h2>
<article>
<h3>my first news article</h3>
<p>stuff</p>
</article>
</section>
</body>
This should be a quick one for you.. I know that in the HTML5 era multiple h1 tags are allowed as long as they are part of sections (always using the "article" or "section" and sometimes "nav").
My question is that is it allowed to have just one single H1 outside of a section respecting the one-h1-rule per page of the pre-html5-era .. and use the rest of h1 inside the sections?
So can these two H1 tags co-exist?
<div id="logo">
<h1>... </h1>
</div>
<div class="container">
<article>
<header>
<h1 style="font-size: 2em;">Sometext</h1>
</header>
</article>
</div>
The HTML 5.2 recommendation says:
There are currently no known native implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers and browser extensions. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors should use heading rank (h1-h6) to convey document structure.
So, while you can do as your code example shows in theory, in practise you shouldn't.
It's perfectly acceptable to use H1s the way you suggested in your question.
For example, in Bootstrap you could use this:
<a class="navbar-brand" href="#">Navbar</a>
or this instead:
<h1 class="navbar-brand">Navbar</h1> in the nav bar.
I would like to improve the accessibility in a blog I'm working on. The blog is bilingual, and by default appears in Hungarian. A click on a flag triggers the language change (JavaScript removes nodisplay class from divs with class=js-en and adds it to divs with class=js-hu).
I would like to separate the two parts of each article. I have considered using <aside>, but it wouldn't be accurate (when viewed in English, it is also primary blog content).
What do you suggest to improve the accessibility, with valid tags and ARIA roles?
Posts look something like this:[Edit: changed <div class="js-en nodisplay"> to <div class="js-en" hidden>]
<article>
<div class="js-hu"> <!-- blog post in Hungarian -->
<p>
magyar szöveg, nem értenéd
</p>
</div>
<div class="js-en" hidden> <!-- blog post in English -->
<p>
same text in English
</p>
</div>
</article>
Isn't that more the role of the lang attribute?
On the plus side you will be able to style the content depending on the language using the :lang pseudo-class.
While the lang attribute is an important part of the communication, it does not represent an answer to your question.
For communicating the change for accessibility, you would use a WAI-ARIA state, not a role. In this case, the state to change on each element is the aria-hidden attribute.
But, using the html hidden attribute does that for you. According to the W3C's ARIA in HTML draft spec, the aria-hidden state automatically reflects the hidden attribute. So as you're already using the hidden attribute, no further changes are necessary.
Background
I am using Swiper to create a slider for a restaurant website and I would like to code it as semantically as possible. To give you an idea of the content, each slide has four main features:
Background image
Menu category (i.e. sandwiches)
Menu item
Menu item description
If you need a visual (and an appetite):
My Solution
This was the most semantic way I could think of to code it:
<figure class="swiper-slide">
<img src="img/hammin-it-up.jpg" alt="" />
<figcaption>
<strong class="slider-menu-category">Sandwiches</strong>
<dl class="slider-menu-item">
<dt>Hammin' It Up</dt>
<dd>Fontina Cheese & Blackforest Ham grilled on Texas Toast</dd>
</dl>
</figcaption>
</figure>
My Question/s
Is it semantically friendly and w3-OK to use a <dl> within a <figcaption> tag?
Is there a more semantic way to show the slide "title" (aka category) than using a class? I realize this is a separate question, but it's related and I couldn't cram all that into the post title...
My Research
I could not find a site with an exact match to what I did, but I found some that were close:
MDN has some examples with a <cite> tag inside a <figcaption>.
HTML5 Doctor has an <a> and <code> inside the same.
An S.O. user posted an indirectly related question, but I noticed within their markup some <p> tags inside a <figcaption>.
w3.org indicates nothing suggesting my method was incorrect, so I am semi-sure it's fine, but any feedback would be appreciated.
Yes, dl is allowed inside of figure/figcaption: dl is flow content, and figure/figcaption expect flow content according to their content model.
However, I don’t think it’s the best choice in your specific example.
The dl doesn’t really add anything to understanding the content of this figure. It would be appropriate if there were several name-value pairs (e.g., "Price", "Ingredients" etc.), but what you currently have is just a title and a description.
The strong element doesn’t seem to be used according to its definition ("strong importance, seriousness, or urgency") here.
And I also think that the category/title/description isn’t really a caption for the photograph in this case; to me, it seems these 4 elements should be on the same level, so to say. But this is open for interpretation and also depends on the context where this slideshow will be shown.
Instead of using figure, I think that each menu item should be an article. This choice enables the use of headings and header elements:
<article>
<img src="" alt="" />
<header>
<div>Sandwiches</div>
<h1>Hammin' It Up</h1>
</header>
<p>Fontina Cheese & Blackforest Ham grilled on Texas Toast</p>
</article>
use <div> .. </div> for everything , <figcaption> is allowed with HTML5
sticking with div's will be compatable with any browser on any device. You can use a title attribute if you'd like. You can also have any attribute as long as it starts with data-
and example would be <div class="exampleClass" data-title="My Title" data-info="My other info">
In a typical index of articles (like a blog without excerpt) like this image:
those items should be a list (<ul><li>) or just divs?
And also, they should be figure/figcaption? Because would make some sense, but also... picture is part of an artcile not the main content, so maybe title/description is not the caption of the image, but the caption of the article.
what do you think?
EDIT: a live example - https://news.google.com/?hl=en
I’d use an article for each snippet (i.e. a news teaser).
Each article contains an h1 element for the heading, an img element for the image, and p element(s) for the text.
As you probably want to link to a full version, you could enclose all elements in one a element (which is allowed in HTML5), or the heading etc. only.
So it could look like:
<article>
<h1><!-- news title --></h1>
<img src="" alt="" />
<p><!-- news description --></p>
</article>
Only use figure if this image itself should have a separate caption. The news description (here contained in p) usually isn’t the caption for that image.
You may change the order of the article children. Thanks to the way sectioning elements work, the heading doesn’t have to be the first element.
You may use an ul, but it’s not necessary. ol, however, should only be used if the order is really meaningful for understanding the content (i.e. a different order would change the meaning of the document). Typical example: if the items are ranked by relevance (e.g. most relevant teaser at the top), you should use ol.
Regarding your question if the teaser should be an article:
Don’t confuse article (HTML5 element) with the term "article" (English language). article has a separate definition that doesn’t necessarily have something to do with the understanding of the term "article".
The teaser should also be an article – the teaser article and the fulltext article are different articles, although they refer to the same entity.
The answers here leave a lot to be desired. The HTML spec has an example of blog post markup with comments inside.
https://www.w3.org/TR/2013/CR-html5-20130806/sections.html#the-article-element
While the accepted answer has copy/pasted the description of how the <article> element is used it does not answer the question asked at all.
Here is the answer from W3.ORG
If you can use a native HTML element [HTML51] or attribute with the
semantics and behavior you require already built in, instead of
re-purposing an element and adding an ARIA role, state or property to
make it accessible, then do so.
Here is the logic I am proceeding with after researching:
I have a list of reviews.
Each review is ordered by helpful votes.
Therefore the first level will be an ordered list since reviews will be ordered by their helpful votes. Otherwise an unordered list would suffice such as the nested comments:
<ol>
<li class="review" role="article"> <!-- reviews ordered by votes-->
<header>
<h2>Review title</h2>
</header>
<p>Review body</p>
<section class="comments">
<ul>
<li class="comment" role="article"> <!-- comments with votes-->
</li>
</ul>
</section>
</li>
</ol>
An insightful answer by #Terrill Thompson explains that screen readers are helped by semantic list markup. So yes, a list of <article>'s does make sense. As things become complex he mentions how confusing it can be. This is where ARIA, role and tabindex attributes should absolutely be added and tested.
That answer has a comment directing users to a conversation at W3.ORG. By definition it appears that <article> would not be part of a list where it should be "stand alone content". However the question here, myself and probably you reading this require a deeper answer where article applies to a true list of articles.
Such as:
List of blog articles with excerpts
Search results
Reviews
Comments
This is an opinion question so it comes down to preference.
Based on your image, I would use a <ul> <li> though I could get the same result using divs.
If each item represents an article, then each should be represented using <article> elements.
If you feel that it's an ordered or unordered list of articles, then you could use <ol> or <ul> elements respectively.
I would recommend keeping the markup as simple as possible and as complex as necessary, so something along the lines of:
<div>
<article>
<img>
<div>…</div>
</article>
<article>
<img>
<div>…</div>
</article>
…
</div>
As other people said, I think that each article should be marked with an article tag.
I also suggest to surround the whole list with an aside tag. So If you have one main article in the page (surrounded with main), it will not be affected by the other articles.
Here is a nice article about aside.