Semantic layout of the logo on the website

It is useful for the layout designer to understand the correct principles of how block and inline elements work. As for logos, they are usually located at the top of the site, often in the header block. How to properly, semantically, validly and optimize for search engines to place the logo on the site.

For example, we need to make the following logo:

Let's see what the html looks like

<h1 class="logo">
 <a href="index.php">BestLogoEver</a>
 </h1>

Very beautiful, semantically, valid and optimized, everything is really simple and neat, nothing superfluous. It is important to understand that the <a>-link element is an inline element, and even if you set the height and width of the image, you will still see only part of the cropped background-image, so be sure to assign - display: block - which will turn it into a block element.

Let's move on to styles, usually this is the style.css file

/*=============================================== ==============================
logo
================================================= ============================*/
h1.logo{
    margin: 0 auto;
}
h1.logo a{
    display:block;
    text-indent: -9999px; // this is necessary in order to divert the text that we wrote in the html for seo
    background: url(../images/logo.png) no-repeat;
    width: 325px
    height: 69px;
}

In this screenshot, with a black border, I just showed the borders of the logo, where we can click and go to a specific page, usually the main page.

That's all!

Bon appetit to all typesetters :)