How to Make My Logo as H1

[setiawanemail]

Halo there i have some problem, anyone can help me how to make my logo as h1, i have some code here

<header id="masthead" class="site-header clear">

        <div class="container">

        <div class="site-branding">

            <?php if (get_theme_mod('logo', get_template_directory_uri().'/assets/img/logo.png') != null) { ?>
            
            <div id="logo">
                <span class="helper"></span>
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                    <img src="<?php echo get_theme_mod('logo', get_template_directory_uri().'/assets/img/logo.png'); ?>" alt=""/>
                </a>
            </div><!-- #logo --><!-- #logo -->

            <?php } else { ?>

            <div class="site-title">
                <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
            </div><!-- .site-title -->

            <?php } ?>

        </div>

[WebMachine]

@setiawanemail

<div id=“logo”>
<span class=“helper”></span>
<a href=“<?php echo esc_url( home_url( ‘/’ ) ); ?>” rel=“home”>
<img src=“<?php echo get_theme_mod(‘logo’, get_template_directory_uri().‘/assets/img/logo.png’); ?>” alt=“”/>
</a>
</div>

Why not replace <div id="logo"> .......</div> with <h1 id="logo">.....</h1>? Or just nest the <h1> element inside of the <div> element:

<div id="logo">
     <h1>
                <span class="helper"></span>
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                    <img src="<?php echo get_theme_mod('logo', get_template_directory_uri().'/assets/img/logo.png'); ?>" alt=""/>
                </a>
      </h1>
</div><!-- #logo --><!-- #logo -->

[info2310]

Is it really useful to put an image inside h1 ?

[TechnoBear]

@info2310

Is it really useful to put an image inside h1 ?

The image would, of course, need to have appropriate alternative text. It wouldn’t be my choice, but it’s a fairly common practice, I think.

[info2310]

Ok ok, I have seen this kind of things in the past but it was mysterious for me

[Noppy]

I may well be doing it wrong but i’ve always done it something like this

<h1><a href="/" title="Back to home"><span>My site name</span></a></h1>

By doing this i can then hide the span and expand the href out as a clickable link with a background image

h1 {display:block; height:100px; width:200px;}
h1 a span{ display:none;}
h1 a{display block; height:100%; width:100%; background: url('some_image.gif') top left no-repeat}

I might have missed something as this is just off the top of my head rather than my working code.
This should then be quite flexible if you want to swap the logo out at different screen sizes or for a design change.

hth

[SamA74]

@Noppy

h1 a span{ display:none;}

The display: none will hide it from screen readers, not sure about search bots. There are alternative methods to hide the text visually.

.logo span {
	display: block;
	height: 0;
	overflow: hidden;
}

Or simply do as @TechnoBear suggests and utilise the alt text wihch will be “seen” by screen readers and search bots.

[Noppy]

ah ok that makes sense, i’ll look to impliment that. I did wonder about text-indent to ‘hide’ the span by putting it way off screen but never got around to testing it.

The problem i have with just using an image with alt text is that you are then stuck with that image. If it’s a background image set with css you can obviously then change it for all the different screen sizes and print etc quite easily.

I do need to install a screen reader to check these things as i am keen on ensuring everyone can access my sites, thanks for the tip.

[deepakiqlect]

As a digital marketer I don’t see any benefit of putting your logo in H1. Header tags are useful when there are some texts in it. H1 is the most important header tag and you should use it wisely. Try to put a text which best describe the content of the page. It should be reflecting your most important keyword. Sorry if its an off topic reply.