Consider the following piece of markup:
<a href="/description/item1">
<img src="item1.jpg">
<footer>
<section>
<h2 class="title">Bar Foo</h2>
<h3 class="subtitle">The end of the world</h3>
</section>
<section class="details">
<h4 class="name">Painted by Someone</h4>
<h5 class="id">123243552345</h5>
</section>
</footer>
</a>
DEMO
Anyway, I have always difficulties with semantics. I think that the above snippet doesn't use the elements like section/footer correct (please correct me if I'm wrong!) So I can rewrite it as:
<a href="/description/item1">
<img src="item1.jpg">
<header>
<h2 class="title">Bar Foo</h2>
<h3 class="subtitle">The end of the world</h3>
</header>
<footer>
<h4 class="name">Painted by Someone</h4>
<h5 class="id">123243552345</h5>
</footer>
</a>
But then again, shouldn't the anchor be (or be wrapped with) an article and is footer correct here, it is just content about the image ? Can someone help me with this piece of code and guide me through the process to make it semantically correct/better ? Any advice or documentation would be appreciated!
As suggested by Rich Bradshaw, I would use the figure and figcaption tags for your problem:
<a href="/description/item1">
<figure>
<img src="http://p1.pichost.me/i/34/1573266.jpg" />
<figcaption>
<h2 class="title">Bar Foo</h2>
<h3 class="subtitle">The end of the world</h3>
<h4 class="name">Painted by Someone</h4>
<h5 class="id">123243552345</h5>
</figcaption>
</figure>
</a>
figure
The tag specifies self-contained content, like illustrations,
diagrams, photos, code listings, etc.
While the content of the element is related to the main flow,
its position is independent of the main flow, and if removed it should
not affect the flow of the document.
figcaption
The tag defines a caption for a element.
The element can be placed as the first or last child of
the element.
> But pay attention, those are HTML 5 tags and consequently just supported in HTML 5 browsers.
Related
I want to know how to properly use these two tags.
can I nest text tags like p tag or h1 tag inside figcaption or figcaption will lose its effect ??
<figcaption> <h2> some title </h2> </figcaption> //good or bad ??
in one scenario I have a card which has image on its right side and some information on left means image and title of image are not inside same div ... in this case what is the best way to add figure,figcaption ??
<div class="d-flex">
<div class="img-container"> <img src="someSrc" alt="someAlt" /></div>
<div class="info-container"> <h2 class="name">some name</h2> </div>
</div>
You can check this W3 link which provides a simple explanation of concerned element - https://www.w3schools.com/tags/tag_figure.asp
For your first question, I don't see any issue if you are to put additional text elements inside the figcaption element. Some folks even, define their own CSS style for figcaption.
I'm looking to update a very old HTML page to make use of HTML5 semantic elements. The page contains 30 images which each contain a caption. The image / caption blocks then link off to other pages.
Currently the markup is:
<div id="wrapper">
<div class="item">
<a>
<img/>
<p></p>
</a>
</div>
<div class="item">
<a>
<img/>
<p></p>
</a>
</div>
<div class="item">
<a>
<img/>
<p></p>
</a>
</div>
</div>
This can be though of as an identification page where you select the item which looks most like what you are interested in and it takes you to more details.
I'm struggling to identify how this would look using HTML5 elements. I think it could be argued this content is actually a navigation block even though it is the main thing on the page?
In which case, how does this look?
<nav>
<a>
<figure>
<img/>
<figcaption></figcaption>
</figure>
</a>
<a>
<figure>
<img/>
<figcaption></figcaption>
</figure>
</a>
<a>
<figure>
<img/>
<figcaption></figcaption>
</figure>
</a>
</nav>
This the main content on the page which currently ranks very well so I'm keen not to make any changes which damage this.
Yes, they can. But this specific use-case seems like a misuse of the <nav> element, which is normally reserved for site-wide navigation and/or intra-page navigation. Not every list of links should be marked up with a <nav>.
"It's not necessary for all links to be contained in a <nav> element. <nav> is intended only for major block of navigation links..."
— Mozilla HTML ELement Reference: Nav Element
Similarly, not every image should be marked up with a <figure> element. The usage notes state:
"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"
— Mozilla HTML Element Reference: Figure Element
It's important to remember that nearly all HTML elements have semantic meaning, including most of the elements that existed before HTML5. Sometimes the most semantic way to mark up content doesn't use any of the newer elements.
In the context you describe, where the main body of the page is a list of images with text that link to other pages, it may be most semantic to use a simple list of links with text and images:
<ul class="list">
<li class="list-item">
<a href="#">
<span>Item 1 Name</span>
<img src="#" alt="item 1 image description">
</a>
</li>
<li class="list-item">
<a href="#">
<span>Item 2 Name</span>
<img src="#" alt="item 2 image description">
</a>
</li>
<li class="list-item">
<a href="#">
<span>Item 3 Name</span>
<img src="#" alt="item 3 image description">
</a>
</li>
</ul>
I understand that the article tag is "an independent item section of content"
www.w3.org/wiki/HTML/Elements/article
I have a page only with a blog post. That blog has an img and a caption on top of the text (it is an img that illustrates what I tell in the text of the blog). Should the img and caption be inside or outside the article tag?
The img:
<img src="1.png">
<div>Caption of the image</div>
The blog post simplified:
<article>
<h1>Title of the post</h1>
<div>Last Updated: 2016-01-07</div>
<div>
<p>This is the body of the post</p>
</div>
<p>Author of the post</p>
</article>
You may want to check both figure and figcaption tags.
example from the docs:
<figure>
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
<figcaption>Fig1. MDN Logo</figcaption>
</figure>
And if the figure is related to the article, then I'd put it inside the article tag.
I noticed this already has an accepted answer, but I thought it could use a bit more info regarding your question:
Should the img and caption be inside or outside the article tag?
In terms of semantic HTML, the image and caption content can be nested inside the <article> tag since the permitted content for <article> is flow content, which both <img> and <figure> are defined as flow content.
The <article> element indicates self-contained content, meaning that if you removed all the other HTML except the <article> element, the content would still make sense to a reader. Semantic Sectioning - MDN
Have a look at the code snippet below for one valid way to markup a blog post with <article> and add a nested <img> or even better like #rafaelbiten suggested, a <figure>.
<article>
<h1>Title of the post</h1>
<p>Author of the post</p>
<p>Last Updated: 2016-01-07</p>
<figure>
<img src="1.png" alt="Some alt text">
<figcaption>Caption of the image</figcaption>
</figure>
<p>This is the body of the post</p>
</article>
You can use img tag in article if the image is related to article.
Can i put logo nested with anchor inside the <figure> ? Is it right?
Here is the code
<header>
<div class="row">
<figure class="col-sm-5"> <img src="images/logo.gif" class="img-responsive" height="60" width="330" alt="site-logo"> </figure>
<div class="col-sm-7">
<div class="well">
<div class="row">
<div class="col-xs-9"><nav></nav></div>
<figure class="col-xs-3"> <img src="images/helpline.gif" class="img-responsive" height="60" width="120" alt="helpline-image"> </figure>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</header>
Yes you can.
The HTML <figure> element represents self-contained content, frequently with a caption (<figcaption>), and is typically referenced as a single unit. While it is related to the main flow, its position is independent of the main flow. Usually this is an image, an illustration, a diagram, a code snippet, or a schema that is referenced in the main text, but that can be moved to another page or to an appendix without affecting the main flow.
Reference : MDN
I know this is old, but please do not place your logo in an <h2>; it is not the place for it and can mess up your accessibility, your dom heading structure, and your SEO performance. Doing something because you can, does not make it the right solution below are some links about how to use heading tags. If you want it to look like an <h2>, then style it in your CSS.
W3 Schools
MDN
SEO and Headers Article
For better SEO, put your logo inside H2 tag.
<h2>
<a href="#">
<img src="logo.gif" alt="stackoverflow-logo"/>
</a>
</h2>
Give proper name for alternate text tag alt, instead of site logo, give your companyname-logo
I have got some elements on my page, they should all be styled the same except for every other one, where I just want to change some styling.
Here is the CSS which I was hoping would select the div inside the stack of different elements:
.stagger_reviews[class=inner]:nth-child(2n+2) {
background-color:#003;
}
Here is the HTML:
<div class="stagger_reviews">
<!-- Later use PHP to load reviews, CSS should switch the images from left to right -->
<article class="container box style1">
<a style="background-image:url(images/blank-user.jpg); " href="#" class="image fit"></a>
<div class="inner">
<header>
<h2>Martyn Ball</h2>
</header>
<p>
I found this service on a Google Search, didn't expect it to be so great!
</p>
</div>
</article>
<article class="container box style1">
<a style="background-image:url(images/blank-user.jpg); " href="#" class="image fit"></a>
<div class="inner">
<header>
<h2>Martyn Ball</h2>
</header>
<p>
I found this service on a Google Search, didn't expect it to be so great!
</p>
</div>
</article>
</div>
As you can see I just want to adjust the one div inside each article which has the class name inner. And maybe some other elements as well but once I have this working I can do that.
The style isn't being applied to the second inner div, I have made about 4 copies of the article and none are being changed.
Here is the solution, I put the nth-child in the wrong place.
.stagger_reviews > article:nth-child(2n+2) div[class=inner]