Hi, I’m working on a project but there are a lot of things that I still need to get acquainted with. One thing I came across in a blog is that it is good to have an <h1> tag for good ranking in search engines and that you can put your logo in it, although I wonder if that is semantically correct. Being that the case, is it then recommendable to use other <hx>'s tags for other important images on the page. And if not, then is the best practice to leave them in <p>'s.
I know the answer might be pretty obvious to professionals but I am new in the field.
Thanks for your responses.
It depends but technically yes you can have an image nested in a H1 and it has some semantic meaning assuming that it is supported with good ALT text, etc. Usually it is better not to do it that way though but use one of the image replacement techniques if you need to use a image for a Hx. Albeit it’s a bad idea to wrap it in a Hx for the sake of SEO.
There are plenty of ways to go about it. Some people use an h1 for their logo. Others use it for a page’s title. The latter probably has more meaning than the former.
What you choose is up to you, both are semantically fine, albeit with different emphasis with the former emphasizing on your company’s name and the other emphasizing on the content itself, the page’s title.
<div id="logo"><img src="logo.png" alt="" title=""></div>
<h1>My page title</h1>
<h2>A sub title</h2>
<p>Some paragraph</p>
<h1 id="logo"><img src="logo.png" alt="" title=""></h1>
<h2>My Page title</h2>
<h3>Sub title</h3>
<p>Some paragraph</p>
Alternatively you could use an image replacement technique and have the text shoved off screen or use some other CSS technique to hide the actual text from being displayed with CSS on/off & images on/off.
<h1>My Company Title with img replacement</h1>
<h2>My Page title</h2>
<h3>Sub title</h3>
<p>Some paragraph</p>
Thanks for your feedback. One thing though, if I do add the text and then turn it off with CSS (I suppose you mean like setting the indentation to a great number so it won’t display), and then add the img within the <h1>, will this improve my SEO, or it has no impact. Because if that is the case, I would just leave it in a <p> and move it with CSS as long as is technically correct and shows good structure.
Thanks again!
I would say no it’s not semantically correct. <H1> is a text formatting tag and an image isn’t text. Since search engines and screen readers can’t read an image, there’s no reason to use text formatting on it. Use the Alt Desc attribute instead, that’s what it’s for.
If you really want there to be a text version of the image then use the negative margin technique that you mentioned, as long as the text says the same thing as the image you’ll be fine.
Also, why bother using HTML4 when HTML5 is on it’s way and XHTML is already in use.
I do agree with not using an image within the H1 element, images do have contextual value but the heading of a document should be textual (if you want the maximum impact for search engines). My recommendation would be to have the image in the background using CSS (and the width and height declared as needed), then giving a negative text-indent value to push the text off the visible reading area when the image is displayed. 
PS: I don’t trust HTML5, the spec changes on a daily basis and it’s got some stuff in there I really have an issue with (I’ve even contacted the spec writer over some of them). As for XHTML, IE can’t use proper XHTML and XHTML2 has been abandoned abandoned (oh the shame of it all), the language is pretty close to redundant until HTML5 appears properly with it’s own XHTML attachment which has some decent level of support within the major players.
Thanks again I really like your advice.
In regards to the XHTML and HTML discussion, I don’t understand why going back and forth between the two, maybe there are some deep concepts I haven’t still come across with, but I thought that the best way of creating web pages was by using XHTML (at least that is what my text book inclines to), also because that is the only way modern browsers will display your pages given the you’re using Strict DTD.
Is there something I haven’t understood. I did take the course back on '07, but I have found the stuff I learned isn’t that out of date, or is it?
XHTML does not work in any version of Internet Explorer.
The most current and recommended version to use is HTML 4.01 Strict, as that is the current standard. Everything else makes little sense.
The book was misleading to say the least. All modern browsers will display HTML (as well as XHTML) and both will allow for a strict DTD. The only thing which makes XHTML different for the average person is the way some elements (like self closers) are represented, the more stringent error checking and the fact that Internet Explorer refuses to use XHTML served properly (rather than text/html - though it will work using that).
<h1> tags are really suppose to be used for the heading text of the page. Not suppose to put images in <h> tags in general