Should I really use H1 element as a logo?

HTML & CSS
1

Hello, greetings.

So, this post is straightforward, should I really use the H1 element as a logo?

I’m new in front-end development, I’ve always seen logos being created with H1, but I wonder, is there a particular reason to do that?

Thanks in advance.

PS: Sorry if I wrote something wrong, my mother tongue isn’t English.

2

It’s common for the H1 to be used to apply the logo. I don’t want to say it’s standard practice, but it is a common design pattern.

The benefit for this is if the user have images turned off or is using a screen reader due to visual acuity issues, the h1 can still be used as a backup to provide the company name

3

Hmmm… I agreed, in a scenario like that is good to have the H1, but isn’t a better way to do it?

The part that confuse me is that if I put a logo inside an H element, wouldn’t I converting that logo into a heading?

Sorry if is a dumb question, I’m new and a self-learner, so when a question comes, it terribly confuse me. :banghead:

4

Nope. It’s just a common design pattern. You can put it into any element you choose - the H1 is just common because if images are turned off, the standard h1 styling is in place by default.

Personally, I’m surprised they didn’t come up with a “logo” or “business identity” element when they developed the html5 spec, but they didn’t, which is why this design pattern is so common…

5

Ok.

Well, I was checking a few pages (including this) and I see that they use the svg element, and it seem that past the test of turning-image-off.

But I think that I’ll try another text-based element (maybe em) at the moment. I really don’t have the experience to go with that svg stuff, anyways, thanks for taking time to answer me.

6

Maybe like here and use <header> ?

7

I would like to do it like here, but i have a few months on this, I don’t think that I could use the svg, not right now at least. The header is no a problem.

8

We’ve had a few discussions here in the past about this issue. This one:
What to do when you have a Logo and Company Name
includes links to a couple of others.

2 Likes
9

Wow, that’s a lot of information in there.

I’ll save the link for the future, it seem that this is a controversial topic.

Anyway, I don’t want to confuse myself, when I’ve got more experience I’ll decide wich is best to me. I’ll stick with what I’ve learned so far.

Thanks for the help. :+1:

4 Likes
10

As you’ll see from that discussion, like so many things in HTML/CSS, there is not necessarily a right or wrong answer. The best solution depends on context - and sometimes just personal preference.

4 Likes
11

As we all know that heading tags are helpful in SEO. But as far this question is concerned, I would say if there is not any heading in that particular page or no text is available that can be written in h1 then we should use h1 for logo because when we do seo this h1 will be helpful for searching purpose. Otherwise div is the best substitute for logo.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.