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>
Related
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 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>
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/)
I'm using the new HTML5 tags and and I was wondering which of the following two options is preferable:
OPTION 1
<article class="menu">
<section>
<header>
<h4>Breakfast</h4>
</header>
<ul>
<li>
<article class="menu-item">Cereal</article>
</li>
<li>
<article class="menu-item">Bacon & Eggs</article>
</li>
<li>
<article class="menu-item">Waffles</article>
</li>
</ul>
</section>
<section>
<header>
<h4>Lunch</h4>
</header>
<ul>
<li>
<article class="menu-item">Peanut Butter & Jelly</article>
</li>
<li>
<article class="menu-item">Ham Sammich</article>
</li>
<li>
<article class="menu-item">Soup</article>
</li>
</ul>
</section>
</article>
OPTION 2
<article class="menu">
<section>
<header>
<h4>Breakfast</h4>
</header>
<article class="menu-item">Cereal</article>
<article class="menu-item">Bacon & Eggs</article>
<article class="menu-item">Waffles</article>
</section>
<section>
<header>
<h4>Lunch</h4>
</header>
<article class="menu-item">Peanut Butter & Jelly</article>
<article class="menu-item">Ham Sammich</article>
<article class="menu-item">Soup</article>
</section>
</article>
I'm currently using the first option with the tags due to habits leftover from HTML 4.01, however it seems to me that they are completely redundant and unnecessary in HTML5. Which is more correct?
For example, in this article here they don't use tags:
http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/
Should? Not necessarily. Can? Yes.
I have a situation in which I am doing something similar to your first example with <figure>. In this case the containing element is <nav>. The figures are a list of items with a photo and title. It is a list of navigation items which are also figures. Thus nav > ... > li > figure.
A figure isn't an article, of course. But it is permitted by the spec with both <figure> and <article>. Permitted contents of <li> are "flow content", which includes,
section or nav or article or aside or header or footer or figure
Among others. The whole list is long. So it depends on what feels right to you in your specific situation.
Are these article summaries that are serving as navigation to the full text of articles ordered by date? I might do something similar to what I did above with figure if I wanted the <li> for an additional container or because I liked it that way.
Is it the full text of articles, and not something you'd think of as a list of articles? Omit the list.
HTML no matter what version is just a semantic markup for a collection of data. If using a list to split apart the articles makes sense semantically, then that is the correct way. If it does not, then it is incorrect. If you are just worried about minimalistic bytes to send across the wire, then you could do without the list in any version of html and replace it with paragraph tags.
Typically semantic markup has a little more to do with how you are presenting the data, than just the data alone. For instance, if you want to use something like EasySlider, then you have to put the items in a list because that is the convention it uses. The same data presented in a different way could require an entirely different markup.