I have a simple block with content:
<div>
<img src="/img/sample.png" alt="Sample image">
<span class="colored-text">Company name</span>
<em>Address</em>
</div>
I want 'Company name' and 'Address' to be on separate lines.
And now I have several options available:
Make additional <div>s, add a <br/> tag between the <span> and <em> tags and maybe some other solutions.
What is the proper way to add such functionality?
You should do what semantically makes the most sense. In general, div tags are meant to represent some kind of DIVision in the page. If you are simply listing an address it doesn't make sense to do this. I would personally use a <br /> at the end of the line which adds a line break without making any kind of semantic statement about your content.
You can use only CSS and make the em tag break in its own line:
div em {display:block}
or
div em {float:left;clear:both}
Either way the Address will break line and you don't have to touch your HTML.
There are a number of options.
<div>
<img src="/img/sample.png" alt="Sample image">
<span class="colored-text">Company name</span>
<br />
<em>Address</em>
</div>
or
<div>
<img src="/img/sample.png" alt="Sample image">
<p class="colored-text">Company name</p>
<p><em>Address</em></p>
</div>
or
<ul>
<li><img src="/img/sample.png" alt="Sample image">
<span class="colored-text">Company name</span></li>
<li><em>Address</em></li>
</ul>
and many more, including variations on the listed.
Add a break at the end of each line.
Following CSS will do the trick:
span.colored-text{ display:block; }
Possiblity 1 (without CSS): http://jsfiddle.net/mnnLG/1/
Using <br /> to skip to a new line.
Possiblity 2 (with CSS): http://jsfiddle.net/mnnLG/2/
Using display:block CSS to make the inline elements take block attributes.
Alternate Possibility:
Wrap each element with a block-type element. It can be ul/ol->li combination, or a simple div element.
Related
In HTML, if I have multiple images and want to caption each one, which is the correct syntax?
A
<figure>
<img src="images/img1.jpg">
<figcaption>Caption 1</figcaption>
</figure>
<figure>
<img src="images/img2.jpg">
<figcaption>Caption 2</figcaption>
</figure>
or B
<figure>
<img src="images/img1.jpg">
<figcaption>Caption 1</figcaption>
<img src="images/img2.jpg">
<figcaption>Caption 2</figcaption>
</figure>
The spec for the figure element content model says:
Either: One figcaption element followed by flow content.
Or: Flow content followed by one figcaption element.
I think that's pretty clear that a figure should represent one thing. So option A is the right choice.
Looks like based off the spec, it would be your first one.
http://www.w3.org/TR/html5/grouping-content.html#the-figure-element
4.4.11 The figure element
Content model:
Either: One figcaption element followed by flow content.
Or: Flow content followed by one figcaption element.
Or: Flow content.
So basically each figure element should only contain a single figcaption.
With respect to the figure tag, per MDN:
The HTML element represents self-contained content,
frequently with a caption (), and is typically referenced
as a single unit.
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>
I have two logo's in my site header.
I like the solution here: Replacing H1 text with a logo image: best method for SEO and accessibility? :
Solution:
According to Matt Cuts (and some other comments) the best solution is to use an image with alt and title attributes. The alt attribute is for SEO and the title attribute is for accessibility. Using an image also makes sense for semantic markup. A company logo is actually an important piece of content.
<h1>
<a href="http://stackoverflow.com">
<img src="logo.png" alt="Stack Overflow" title="Click to return to Stack Overflow homepage" />
</a>
</h1>
How to have this with 2 logo's?
<h1>
<a href="http://stackoverflow.com">
<img src="logo1.png" title="Click to return to Stack Overflow homepage" alt="logo1 " />
</a>
<a href="http://stackoverflow.com">
<img src="logo2.png" title="Click to return to Stack Overflow homepage" alt="logo2" />
</a>
</h1>
would the h1 then be: logo1 logo2?
You shouldn't use h1 as logo, as explained by Harry Roberts (http://csswizardry.com/2013/01/your-logo-is-still-an-image-and-so-is-mine/).
If you want to use two logos, just use two links.
In the case of the two logos, it depends on the context. Are you using two images because they are two different things, ie
<h2>Our Sponsors</h2>
<a><img src="" alt="Google"/></a> <a><img src="" alt="MS"/></a>
<a><img src="" alt="Adobe"/></a>
Or something like:
<a><img src="" alt="Toyota"/><img src="" alt="Corolla"/></a>
If it is th second, you should do:
<a><img src="" alt="Toyota Corolla"/><img src="" alt=""/></a>
For assistive technology, the first Toyota Corolla example will read as:
Link image toyota image corolla
and the second way:
Link image Toyota corolla.
Some say using null alts (alt="") is bad for accessibility and/or SEO. This is false. If an image is used for decorative purposes, a null alt attribute should be used, because all it does is add unneeded chatter. Once upon a time, search engines used to ding people for using null alt, but not anymore.
I have a div containing an event I want it to look like this
[-----] TITLE
[-IMG-] Author
[-----] Date
The way I have it set up now is like this
<div class="book">
<img class="thumb">
<h2>TITLE</h3>
<span>Author</span>
<br />
<span>Date</span>
</div>
I don't think that I should be using <span> for the author and Description since I want them on multiple lines (also doing display:block makes it act weird with the floated element to the left) but I don't know if a <p> tag is suitable since it's only 1 line of text.
What tag should I be using for this?
Thanks!!
Author is a subheader, i would use <h3> as for date the ideal would be to use HTML 5 time tag but this brings some complications in older browsers and IE so i would recommend using <p> if you want the line break.
<div class="book">
<img class="thumb" alt="">
<h2>TITLE</h2>
<h3>Author</h3>
<p>Date</p>
</div>
This elements will give you the line brakes you want and are semantically correct.
P.D: As #Will Martin mentioned it is recommended that you use the alt attribute with the image tag.
Starting with amosriveras answer from 2011, I'd do things different:
HTML 4.01:
<div class="book">
<h2>TITLE</h2>
<img class="thumb" alt="">
<div>Author</div>
<div>Date</div>
</div>
the h2 has to be the first element, otherwise the img would not be part of this heading scope
"Author" is no heading content; also this would mean that the "Date" belongs to the Author heading scope (it should belong to the "TITLE" instead). So use a div instead of a h3 (no, not p, because it is not a paragraph)
"Date" is not a paragraph, so use a div instead of p
HTML5:
<article class="book">
<img class="thumb" alt="">
<h1>TITLE</h1>
<div>Author</div>
<div><time>Date</time></div>
</article>
using article instead of div
now the "TITLE" heading can be placed anywhere in this article; also it can become a h1
using time for "Date"
Using a dl would be possible, too:
<article class="book">
<img class="thumb" alt="">
<h1>TITLE</h1>
<dl>
<dt>Author</dt>
<dd>AUTHOR NAME</dd>
<dt>Date</dt>
<dd><time>DATE</time></dd>
</dl>
</article>
the img could be placed in a dd, for example with a dt "Photo" or something like that (depends on the context). I'd only do that if the image is really relevant to the book/event.
While not strictly paragraphs, I think that the <p> tag is most appropriate here.
You are separating out different, but related, types of information. Just because it isn't in sentence form, doesn't mean it doesn't make some sense to use <p>, with classes for the type of information in them.
Whichever you end up deciding, remember that the design is separate from the elements. That is, the fact that they are on different lines shouldn't be your primary decision point.
After reading #Mazlix's comment on #Amosrivera's answer, I'd like to suggest a definition list.
<dl>
<dt><img class="thumb" alt="book cover" /> TITLE</dt>
<dd class="author">AUTHOR</dd>
<dd class="date>DATE</dd>
</dl>
The styling might get tetchy if you try to a single DL with multiple DT/DD pairs within it, but you could just as easily use a whole bunch of definition lists.
EDIT:
#David Thomas beat me to the punch there. Ah well, c'est la vie.