Can i put logo inside the figure? - html

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

Related

proper use of <figure> and <figcaption> for seo

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.

How do I make a text align under a logo using css?

I am trying to make a subheading for a logo in my website. I am having trouble with aligning it under the logo. I have placed a p tag inside a div and tried to position the div but I am not sure how it works.
Here is a photo of what the website currently looks like.
below is the code for it.
HTML:
<!--logo goes here-->
<div class="logo">
<img class="img" src="photos/logo1.png" alt="the logo">
</div>
<div class="textbox">
<p class="subtext"> We care about you </p>
</div>
Put the text in the same div where the logo is:
<div class="logo">
<img class="img" src="photos/logo1.png" alt="the logo">
<p class="subtext"> We care about you </p>
</div>
Both and are block elements, by default those tags go to the new line.
So what was your intention, putting the subheading right under the logo?

nth-child, change style of every other div with class name

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]

How to semantically improve this html snippet

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.

How to put header banner image in HTML5

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>