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.
Related
I'm trying to create a description by using <small> tag,
and I also have a large title with <h2> tag, and they are all inside a <header> tag,
this is what it looks like now:
<header>
<h2>User settings</h2>
<small>Yep, here's the settings for you.</small>
</header>
But I'm not sure if the following usage would be better to make those tags meaningful?
<header>
<h2>
User settings
<small>Yep, here's the settings for you.</small>
</h2>
</header>
Should I put <small> in <h2> instead of putting <small> in <header>?
well, it depends
if you put your <small> tag inside <h2> it will be more important (note that using <small> also affects importance)
on the other hand, some tools like html outliners will also list <small> content, which might not be desired behaviour
These options are not semantically equivalent. Putting small inside h2 means that the whole content of h2, including small content, is the heading that identifies the current section (or the whole page). For example, screen readers may read this whole long text as a document navigation option. With small outside h2, the section (or page) is identified with the short text that is the content of h2 element only.
Also, I doubt that the small element is the right choice for such sub-description. Wouldn't just p element (as suggested in W3C HTML spec for sub-headings) be more appropriate here?
Mozilla says: https://developer.mozilla.org/tr/docs/Web/HTML/Element/header
<header>
<hx></hx>
</header>
prefer <small> in <hx>
twitter bootstrap docs prefer small in hx
http://getbootstrap.com/css/#type-headings
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>
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">
I am working on a website on which i show restaurants according to either categories, food, etc. So I have a listing page where I list the restaurants as per the filters applied by the user.
I have a SEO question.
It is said that using heading tags<h1>,<h2>... tags should be used for titles, and important items.
So this is what I did.
...
<div class="item">
<h1>Title of Restaurant</h1>
<h2>Address</h2>
<p>Description</p>
</div>
...
which, for design changes, was later changed to
[EDIT]
As per #Guffa's response, there should be minimum <h1> tags possible on the page.
Since the Title of the restaurant is important and I want it to be recognized as a heading rather than simple text, I'll use <h3> for it.
...
<div class="item">
<h3>Title of Restaurant</h3>
<h4>Address</h4>
<p>Description</p>
</div>
...
The scenario that <h4> tag has no text but rather a child node with a link.
So my question is when my page is indexed (second case), will the <h4> be recognized?
Or will it be completely ignored and thought of as a hyperlink?
Is filling the heading text with a very high text-indent a smart idea?
Or should i use the anchor as it is and apply a title attribute to it?
The h1 tag should be used for important information about the page, so you should really only have one on the page.
Having a listing with h1 tags means that the spiders get conflicting information about what's important on the page, and will likely ignore all of them.
As the h1 should be something like the title for the page, it doesn't make much sense to have a link inside it, as that link would go to the same page.
using HTML5, would it be semantically correct to place an <article> element within a <li> element. A situation where this would prove useful is a list of recent or popular articles on a blog. Consider the following:
<section id="popular">
<div class="blurb">
<h2>Popular Articles</h2>
<p>The most popular posts from my blog.</p>
</div>
<ul>
<li>
<article>
<h3>Article</h3>
<p>An excerpt from the article.</p>
</article>
</li>
<li>
<article>
<h3>Article</h3>
<p>An excerpt from the article.</p>
</article>
</li>
<li>
<article>
<h3>Article</h3>
<p>An excerpt from the article.</p>
</article>
</li>
</ul>
</section>
Which would appear as follows:
Popular Articles
The most popular posts from my blog.
Article
An excerpt from the article.
Article
An excerpt from the article.
Article
An excerpt from the article.
To me, this seems an excellent way of marking up the information. My only question is if it is correct to nest the <article> element inside the <li> element in this way.
There is nothing semantically incorrect about it, but it is not really necessary. The <ul> and <li> elements aren't really adding anything here, unless you are taking advantage of their default styling. Simply putting the <article> tags directly within the <section id="popular"> should be sufficient, and it reduces the complexity of your page as well as its size.
To determine whether something is semantically correct and useful in HTML, ask yourself a few questions. Are you using each element for its intended purpose? For instance, it's not semantically correct if you use an <a> element for a button, as <a> is for hyperlinks, <button> is for buttons. Do you need each element you are using in order to convey all of the semantic information about your content (sections, headings, links, etc)? Is there anything meaningful that you intend to convey that isn't expressed by use of appropriate elements? Having lots of extra meaningless elements usually isn't harmful, but it adds clutter, and it may mean that there are semantic distinctions you are conveying visually but not encoding in a way that a screen reader or automated bot or browser that presented the information in a different format could make sense of.
If it displays correctly in all implementations, I don't have any idea why it would be incorrect... HTML5 is meant to be flexible. Also, the documentation states:
Contexts in which this element can be
used:
Where flow content is expected.
Which looks to be the context of most elements available.