How to put header banner image in HTML5 - html

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>

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.

Cannot get CSS divisions to match one another, even though they are identical

Apologies for my lack of terminology, I'm brand new to CSS. Currently modifying the main CSS for my webpage based off of HTML5 UP's Multiverse template.
I'm trying to set up a division for "film," "other media," and "commercial." I've updated the main.css file to account for sections #main, #other-media, and #commercial.
However, the subsequent added sections (other media & commercial) don't match the first section (film or #main). I'm not sure why this is the case since I just copy-and-pasted the code for each division but changed the division ID names, and if I'm supposed to adjust another part of the main.css?
Thank you so much for any and all help!
In your #main section the images are background-images of the a tags, which have background-size cover, in the section #other-media the images are regular images ( i.e. img tags). You should make them all background-images (with the same settings) to get the same result.
Addition after comment:
Your code for the <article> elements in the #main section are a tags with a background-image that has background-size: cover, plus an h2 and a p element:
<article class="thumb">
<a class="image" style="background-image: url("images-art/thumbs/07.jpg"); cursor: pointer; outline: 0px none;"><img src="images-art/thumbs/07.jpg" alt="" style="display: none;"></a>
<h2>...</h2>
<p>....</p>
</article>
And here's the code for an <article> in the #other-media section: An img tag inside an a tag, plus an h2 and a p element:
<article class="thumb">
<a href="images-art/fulls/03.jpg" class="image">
<img src="images-art/thumbs/03.jpg" alt="">
</a>
<h2>...</h2>
<p>....</p>
</article>
SO the difference is the handling of the image: Once as a background-image which fills the article element, and once as an img tag...

The article tag and the img

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.

How to prevent named anchor from introducing a line break

In the following code snippet:
<a name="top"></a>
<div class="topbar">
<img src="banner.jpg" alt="The Group Company" width="100%" />
<div class="printOnly">
<center><b>Printed from www.company.com</b></center>
</div>
</div>
the named anchor (<a name="top"></a>) introduces a line break before the topbar div. Is there a way to prevent this? For a variety of reasons it is essential that the named anchor be located above the div containing the banner image.
I have tried using CSS to set the height of the anchor to 0px and display to none, but this renders he anchor non-functional (i.e. linking to #top from elsewhere in the page no longer works).
Is there a workaround for this?
Actually, using an anchor to link to a certain part on the page is obsolete. You can use the global id attribute instead. That also fixes your problem as you don't have to add extra dom elements:
<div class="topbar" id="top">...</div>
Somewhere else:
Go to top
Easy does it!
Make the div <div class="topbar"> inline,
.topbar{
display:inline-block;
}
<a name="top"></a>
<div class="topbar">
<img src="banner.jpg" alt="The Group Company" width="100%" />
<div class="printOnly">
<center><b>Printed from www.company.com</b></center>
</div>
</div>

Can i put logo inside the figure?

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