All geek questions in one place

Set img in my website title

I am building a website and I am using HTML5. I would put img in my header, which is my company logo. From the point of view of efficiency and correctness, it is better to configure the CSS approach as background-image: url("logo.gif") in my css style or include in the html file

 <header> <img src="logo.gif" alt="logo" /> </header>
+4
source share
4 answers

It is best to include the image as an img tag rather than background-image .

This means that if the client has disabled CSS in their browser or does not support CSS, they can still see the logo at the top of the page.

It also means that you can make the logo a link to the home page, which has become a common usability point for sites these days:

 <header> <a href="/index.html"><img src="logo.gif" alt="logo" /></a> </header>

For more information on this situation, see this popular StackOverflow post:

When to use IMG and CSS background image?

+7
source

what depends.

If your logo should be clickable, include it in the HMTL. (Usebility)

If it is present for design purposes only, use CSS.

As a rule, it is better to define everything related to the appearance of the Website in CSS.

HTML:

 <header> <div id="company_logo"></div> </header>

CSS

 #company_logo{ width:50px; height:50px; background-image:url(); }
+3
source

If you do not need to have any content above your logo, I would go for the <img> (it is also convenient for reading from the screen if you have the text "alt").

0
source

Background images cannot be printed, if your site has a purpose to print, then your logo will not be displayed.

Remember that a logo is content and a background is style. Using the background as a logo is not semantic.

0
source

Source: https://habr.com/ru/post/1400040/

More articles:


All Articles