I have a list of teasers looking like this:
<ul>
<li>
<a href="#">
<article>
<h1>Title of Video</h1>
<img src="thumbnail.jpg">
<p>Something about the video</p>
</article>
</a>
</li>
<li>
<a href="#">
<article>
<h1>Title of Video</h1>
<img src="thumbnail.jpg">
<p>Something about the video</p>
</article>
</a>
</li>
<li>
<a href="#">
<article>
<h1>Title of Video</h1>
<img src="thumbnail.jpg">
<p>Something about the video</p>
</article>
</a>
</li>
</ul>
Should I use <figure> and <figcaption> instead of <article>?
It is my understanding that I should only use these tags if the text directly describes what is seen in the picture and not in the case depicted above.
But maybe I'm wrong ...
I wouldn't use figure, as I've always thought figure referred more to content that explains or enhances the main article. It wouldn't appear in a document outline, and could conceivably be moved away as a standalone content without making either itself or the main document unusable. It doesn't seem that either of those conditions really applies in this case, but it may depend on the intent of your main document.
Since the teasers aren't standalone content, and can't really be syndicated individually (the videos themselves are the articles, in other words), I'd use section rather than article.
I don’t think that figure would be a good choice, because
you have more than just the main content (i.e., the thumbnail image) and the caption (i.e., the description), namely the title, and
the figcaption would have to annotate the content of the figure, which in your case is the thumbnail image, not the video itself, but it doesn’t really make sense to provide a caption for the thumbnail.
But even if figure might be appropriate, I think using article is the better choice:
It allows you to use the author link type, should you decide to link to the video author (which in itself is a good indicator that article is appropriate here: because the content could have a different author than the page author).
It allows you to use the bookmark link type for the link to the video (again, a sign that article is intended for such a case).
If you’ll use the bookmark type or not, the a should be part of the article:
<article>
<a href="" rel="bookmark">
<h1>Title of Video</h1>
<img src="thumbnail.jpg" alt="">
<p>Something about the video</p>
</a>
</article>
Related
I made some research and didn’t find an appropriate answer. I’m wondering if it’s better to keep using li elements for a comments listing or maybe switch to the article element?
Example 1:
<ol class="comment-list">
<li class="comment">
<figure class="avatar">
<img ... >
</figure>
<span class="author">Linus Torvalds</span>
<p class="comment-text">
Linux is awesome!
</p>
</li>
...
</ol>
Example 2:
<div class="comment-list">
<article class="comment">
<header>
<figure class="avatar">
<img ... >
</figure>
</header>
<span class="author">Linus Torvalds</span>
<p class="comment-text">
Linux is awesome!
</p>
</article>
...
</div>
What is the best solution?
UPDATE 1
Example 3 (a better example):
<main>
<article>
<header>
<h1>Text title</h1>
</header>
<p>The text...</p>
<section class="comment-list">
<article class="comment">
<header>
<figure class="avatar">
<img ... >
</figure>
</header>
<span class="author">Linus Torvalds</span>
<p class="comment-text">
Linux is awesome!
</p>
</article>
<article class="comment">
<header>
<figure class="avatar">
<img ... >
</figure>
</header>
<span class="author">Richard Stallman</span>
<p class="comment-text">
GNU is awesome!
</p>
</article>
...
</section>
</article>
</main>
If you want to provide more semantic value than you would using ol/ul, then article would be the best option in my opinion.
About blockquote from w3schools:
The <blockquote> tag specifies a section that is quoted from another source.
I would say that "quoted from another source" does not really apply to comments.
About article from w3schools:
The <article> tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
All of these points probably apply to your comments, so I would recommend going with <article>.
Each comment should be an article (no matter if you’ll use a list or not). These article elements could be part of a section (representing the comment area), and this section should be part of the article the comments are for (e.g., the blog post).
<article>
<h2>My blog post</h2>
<section>
<h3>Comments</h3>
<article id="comment-1"></article>
<article id="comment-2"></article>
<article id="comment-3"></article>
</section>
</article>
If you allow replying to comments and display them nested, the replies should be part of the parent comment:
<article>
<h2>My blog post</h2>
<section>
<h3>Comments</h3>
<article id="comment-1"></article>
<article id="comment-2">
<article id="comment-2-1"></article>
<article id="comment-2-2"></article>
<article id="comment-2-3"></article>
</article>
<article id="comment-3"></article>
</section>
</article>
Semantically, there is no need for a list here. Thanks to using sectioning content elements (section, article), the comment section and each comment are part of the document outline, which can allow quick on-page navigation.
Adding a list wouldn’t be wrong, though, but I would recommend against it in this context (following my two rule of thumbs)
Using blockquote for comments wouldn’t be appropriate. This is their canonical/original location, you are not quoting from somewhere else. Thanks to using article, you already semantically convey that the content inside could be from another author than the content outside of it (because article allows you to "scope" the address element and the author link type).
Edit
OK, here's the gory details
EMPHASIS is mine
<figure> and <figcaption>
Usually a <figure> is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow.
...
A caption can be associated with the <figure> element by inserting a <figcaption> inside it (as the first or the last child)
<figure> - MDN
What I see is an image of an author. if it was taken out of context (flow), is it still an image of the author? Yes, it is. How? Because it has the has the <figcaption> tag as its last child and the name of the author as it's text.
<header>
The HTML element represents introductory content, typically a group of introductory or navigational aids.
...
The element is not sectioning content and therefore does not introduce a new section in the outline.
<header> - MDN
Either wrap <h1-h6> or <nav> in <header>, if it's a <nav> then it's outside of <main> and inside of <main> if it's for headings (<h1-h6>).
Do not wrap <header> around <figure>. <figure> is a specialized content wrapper, not content. <header> is a specialized content wrapper.
<article> and <section>
<article> and <section> can be nested within each other in either direction but stick to one pattern. Basically <article> can be a sub-topic of <article> or <section> or vice versa.
Refer to: Using HTML Sections and Outlines , <article> tag, and <section> tag.
Even though there are 2 versions of HTML5 tag definitions (W3C & WHATWG), semantics as it applies to HTML5 layout is subjective. Your page will function just as well with <div> and <span> (case in point: Bootstrap.)
<article> over <blockquote>
Article can stand on its own and carries the flow of a topic which can be divided into sub-topics by <section> and therein would be text and media content grouped in <p>, <figure>, etc.
To wrap up all the content in a neat package is <main> and the peripherals would be the <header> and <footer> which usually hold content that is common to most of the pages like <nav> or <address>, support links, etc.
A <blockquote> is an extended reiteration of a work (ex. book, poem, speech, etc). So it isn't suitable for a comment.
As for listing each comment, I'd skip that because an <article> stands on its own.
Without all the gory details I submit to you my take on a semantic layout:
Demo
<header>
<nav></nav>
</header>
<main id='page11'>
<article class="comment">
<figure class="avatar">
<img ...>
<figcaption class="author">Linus Torvalds</figcaption>
</figure>
<section class='content'>
<p class="comment-text">
Linux is awesome!
</p>
</section>
</article>
</main>
<footer>
<address></address>
</footer>
I have an image, underneath it is a title and a subtitle. There are a number of these in a list. Clicking on them goes to an article.
<li>
<div class="img-container"><img src="test.jpg"></div>
<h2>The Title</h2>
<p>The sub title</p>
</li>
I need to link the above. I want the user to be able to click on the image, title or subtitle to get to the article page.
Should I wrap each element and create 3 x links:
<li>
<div class="img-container"><img src="test.jpg"></div>
<h2>The Title</h2>
<p>The sub title</p>
</li>
Or should I wrap the entire block:
<li>
<a href="/whatever">
<div class="img-container"><img src="test.jpg"></div>
<h2>The Title</h2>
<p>The sub title</p>
</a>
</li>
Would either method have an impact on SEO? Usability?
Google used to have a limit on the number of links on a page; reducing the number of link (especially links to the same place) was considered advantageous. Therefore, I'd recommend going with your second option of wrapping the contents of the <li> in an <a> tag.
Wrapping the entire contents in an anchor is better as it's more semantic and provides better code readability. There will be no impact on SEO as googles algorithms take all this into consideration (as wrapping multiple block level elements inside an anchor is allowed by the HTML 5 spec).
More importantly, in this code, make sure you have a title attribute on the anchor, an alt attribute on the img and use a better containing element. In this case you have a list of things, so something more semantic like an <article> tag may provide better SEO.
I have a HTML markup for each brand in my page like this
<ul>
<li>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
<h2>mallname</h2>
</div>
</a>
</li>
</ul>
is that heading position ok inside a hyperlink, or should I change it to
<ul>
<li>
<h2>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
mallname
</div>
</a>
</h2>
</li>
</ul>
which one is the more right way to write it, and what is the result that will be read by crawler for the heading in both case?
If in the first one, the heading content is only mallname, will the second one be read as mallname mallname mallname as there is a title attribute in the hyperlink and alt attribute in the image inside the heading
here's one of the result of the list item
In your first example, the h2 doesn’t describe the content of the li. In scope of this heading is everything following it, until the next heading starts. So in fact, the previous heading would describe the following content, and so on. This problem always arises when using headings without sectioning elements in lists.
In your second example, the h2 probably contains more than it should (two times "mallname"; the one in the title attribute is not considered to be part of the heading content). But what is the actual content here? There is only a heading, which doesn’t seem to make sense.
Your alt content is probably not correct/useful. When it is exactly the same as the corresponding heading, the you should probably use an empty alt value. But it’s likely that the image represents something in addition to the heading: describe this in the alt content.
Duplicating the heading content in the title attribute doesn’t seem to make sense, either. Only use it for additional helpful (but not essential) content.
So you should use something else: sectioning elements. Judging from the screenshot, it might be the case that article is appropriate (if not, use section).
By using a sectioning element like article, the heading doesn’t have to be placed on the top.
<ul>
<li>
<article>
<a href="/brand/mallname">
<img src="/Images/mallname.png" alt="Mallname offers … and …. It’s ….">
<h2>mallname</h2>
</a>
</article>
</li>
</ul>
However, use this only when the h2 describes the ìmg! When the image is only an alternative to the heading (or only decoration, and the actual image content isn’t relevant in this context), why use headings at all? In that case you’d have just a list of links:
<ul>
<li><img src="/Images/mallname.png" alt=""> mallname</li>
</ul>
Inside of <ul> should go <li> tags, so I think the first markup is more right, if to close eyes on the <div> elements inside of <a>.
Set your <a> to display: block; and you'll be correct with the first one.
You are missing the <ul> tags that are required as a parent for the <li>-tags.
Assuming you'd add the <ul>-tags that are missing: <ul> is not allowed as a child element for <h2> so that renders the second version as no good => first one is "more right".
The tests, I took the liberty to add the missing <ul>'s & mandatory parents, the doctype is HTML5:
W3C markup validator gives green light for this one:
<!DOCTYPE HTML>
<html><head><title>tets</title></head><body>
<ul><li>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
<h2>mallname</h2>
</div>
</a>
</li></ul>
</body></html>
W3C markup validator gives the aforementioned error to this one:
<!DOCTYPE HTML>
<html><head><title>tets</title></head><body>
<h2><ul>
<li>
<a title="mallname" href="/brand/mallname">
<div class="image">
<img src="/Images/mallname.png" alt="mallname" />
</div>
<div class="title">
mallname
</div>
</a>
</li>
</ul></h2>
</body></html>
Let's say I have a row of images, and each image should have a short label or title under it.
Should I use <h3> or just <div> or something else for that label or title?
For example:
<ul>
<li>
<img ...>
<h3>Iron Man</h3>
</li>
<li> ...
</li>
</ul>
Would it actually depends on 3 cases, that,
what if the title is for the content of this page (such as pictures of birds and their academic names, such as "sparrow" and "finch"), then <h3> could make more sense? or
what if it is just titles for a game, so it can be "iron man", "hello kitty", "bugs bunny", etc, so that it really doesn't mean real content for the page but rather just some names used for the game, then <div> will be more suitable, or
if the games is for "hello kitty", "pochacco", "keroppi", so that they are all characters of Sanrio, then it actually is more semantically correct to use <h3> because they actually denote meaningful names for the theme of the game?
(or besides <h3> and <div>, would it be more semantically correct to use other tags?)
I'd suggest using <figure> and <figcaption> elements:
<li>
<figure>
<img src="…" />
<figcaption>
<h3>Image Title</h3>
<p>some text to describe the image</p>
</figcaption>
</figure>
</li>
But this is, incredibly subjective.
References:
<figcaption>.
<figure>.
There are many possible ways and they all depend on your actual content. This can’t be answered generally.
If the label/title should be part of your document outline, then you’ll want to use a heading (not necessarily h3), and perhaps a sectioning content element (e.g., section), containing the heading, the image, and possibly other content.
<article>
<img src="…" alt="…" />
<h1>…</h1>
</article>
Using figure + figcaption (as suggested by David Thomas) is appropriate in many cases, but not if the label is a heading that should be part of the document outline. As figure is a sectioning root element, any headings/sections it has won’t affect this outline.
<figure>
<img src="…" alt="…" />
<figcaption>…</figcaption>
</figure>
If you want to list images + captions, you could also use dl:
<dl>
<dt><img src="…1" alt="…1" /></dt> <dd>…1</dd>
<dt><img src="…2" alt="…2" /></dt> <dd>…2</dd>
</dl>
It would also not be wrong to just use p (no semantic/machine-readable relation, though):
<img src="…" alt="…" />
<p>…</p>
There were of course several discussions and questions of the correct usage of the html5 <figure> Element but none of them had a specific answer to my question.
It's more a general question about displaying portfolio items. Sure, you could do something like this:
<ul>
<li>
<h1>Project Title</h1>
<img src="#"/>
<p>a short description</p>
</li>
</ul>
or
<div class="portfolio-item">
<h1>Project Title</h1>
<img src="#"/>
<p>a short description</p>
</div>
There are certainly a dozen other ways to describe a single item but I'd like to know if it would be valid and semantic HTML5, if you wrap the whole item into an <article> element and the picture into an <figure> element. Consider following example
<article class="portfolio-item">
<h1>Project Title</h1>
<figure>
<img src="#">
<figcaption>a short description</figcaption>
</figure>
View details
</article>
If not, what would be the most semantic way to display them?
I personally don't think using a figure would be a good idea for the desciption/image. While I would say that you're using it in a valid manner, I wouldn't necessarily define it as a figure with a caption, and therefore I find the calling so isn't particularly semantic. I feel the figure/figcaption tag is best reserved for things like diagrams. In your case I think you're probably best off just putting the image on it's own, and the short description in a <p> tag (as you did in your second example).
I'd also put the header inside a <header> tag.
This is how I'd do it, as a list of articles:
<ul>
<li>
<article class="portfolio-item">
<header>
<h1>Project Title</h1>
</header>
<img src="#">
<p>a short description</p>
View details
</article>
</li>
<li>
etc...
</li>
</ul>
Your layout of the figure and figcaption elements arecorrect (http://html5doctor.com/the-figure-figcaption-elements/) and wrapping it in an article element would be correct. It is an independent segment that could be taken out of the page and still make sense (http://html5doctor.com/the-article-element/)