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.
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.
Use case is a blog post:
<article> element is used inside <main>, to encase an article on a post page.
<header> is in use within <article>, containing <h1> title and meta including author, datestamp etc.
<article class="card bg-white">
<header>
<div class="card-img-top p-0">
<img width="1414" height="1011" src="image.jpg 1200w" sizes="(max-width: 1414px) 100vw, 1414px">
</div>
<h1 class="entry-title" itemprop="headline">
Article title
</h1>
<div class="entry-meta">
<span class="author vcard" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><span itemprop="name">Joe Bloggs</span></span>
<span class="meta-sep"> | </span>
<time class="entry-date" datetime="2022-03-14T14:28:33+00:00" title="March 14, 2022, 2:28 pm" itemprop="datePublished">14 March 2022</time>
<meta itemprop="dateModified" content="14 March 2022">
</div>
</header>
<div class="entry-content" itemprop="mainEntityOfPage">
<meta itemprop="description" content="Excerpt for article">
<p>Article text.</p>
<p>Article text.</p>
<p>Article text.</p>
</div>
</article>
Each post has a feature image. Does this image belong semantically to <header>, or does it not matter (ie. anywhere in <article>)?
I wish to present the image above the meta info, ie. the existing <header>. Visually, I guess it would sort of comprise the header area (ie. the stuff before the post body), but it would not necessarily communicate meta information about the post. If the lead image should not be part of <header>, this would mean it is also above <header>.
(Despite presence of a <header> at top of page, multiple in-page <header>s are permitted where semantically justified).
However, found documentation tends to pertain to the top-of-page header use of <header> alone:
The <header> element represents a container for introductory content
or a set of navigational links.
A <header> element typically contains:
one or more heading elements (<h1> - <h6>)
logo or icon
authorship
As you've quoted, a header element "represents introductory content" of a sectioning element. If you consider an article's main image to be part of its introductory content, it would make sense to place it within the header element.
I've omitted schema structured data for readability.
<article>
<header>
<img alt="A kitten." src="/images/kitten.jpg" width="100" height="100">
<h1>The cutest kitten</h1>
<ul aria-label="Article metadata.">
<li>Author: Katrina Wisquer</li>
<li>Published: <time datetime="2022-03-14T14:28:33+00:00">14 March 2022</time></li>
</ul>
</header>
<p>There once was a cute kitten who...</p>
</article>
However, if you want to visually place an image before the header content, but still keep it after the header content in the document flow, you can use CSS to change the position it's rendered in. An easy way to do this would be with the order property and CSS Flexbox or CSS Grid. This will change the visual presentation order, but keep the document flow the same. Assistive tech will present content in the order of the document flow.
This may be the best solution, because generally one expects to encounter the title of an article first, before anything else.
article {
display: flex;
flex-direction: column;
margin: 1rem;
padding: 1rem;
border: 1px solid black;
}
.article-image {
order: 1;
}
.article-header {
order: 2;
}
.article-body {
order: 3;
}
<article>
<header class="article-header">
<h1>The cutest kitten</h1>
<ul aria-label="Article metadata.">
<li>Author: Katrina Wisquer</li>
<li>Published: <time datetime="2022-03-14T14:28:33+00:00">14 March 2022</time></li>
</ul>
</header>
<img class="article-image" alt="Kittens." src="https://placekitten.com/200/100" width="200" height="100">
<div class="article-body">
<p>There once was a cute kitten who...</p>
</div>
</article>
Additional notes:
Don't forget an alt attribute on the image
Marking up article metadata in an unordered list is more semantic than a <div> with spans.
It seems you are both overusing and misusing the title attribute
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
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.
I'm just starting with HTML5 and CSS3. My design includes a header banner in top. That is, the logo and banner images all in one banner.
Now, in HTML5, how do I code it?
<header>
<figure></figure>
</header>
or
<header>
<div>Image Header Banner</div>
</header>
From your description, you wouldn't use <figure> here as you just need to add a logo/images.
The <figure> element is used when you need to group images with a caption.
From w3.org
The figure element represents a unit of content, optionally with a
caption, that is self-contained, that is typically referenced as a
single unit from the main flow of the document, and that can be moved
away from the main flow of the document without affecting the
document’s meaning.
Instead you could place images using the <img /> tag within your <header>
<header>
<img />
<img />
</header>
or wrapped in a <div> container - depending on what you need.
Also, check out this article about the <figure> element, in particular at the end of the article says this:
It may not always be appropriate to use the <figure> element, though.
For example, a graphic banner should not be marked up with <figure>.
Instead, simply use the <img> element.
<header>
<figure>
<img src="image" alt="Logo" />
</figure>
</header>