: What is the best approach to HTML markup for a heavily stylised h1 tag I have a very stylised piece of content which I want to use as the <h1> tag on a page. I have two choices,

@Shanna517

It’s totally fine (and often useful, and of course valid) to have an image as heading. You could even use audio or video as heading. HTML is content agnostic in that sense. However, in every case you should provide alternative text content (for user-agents that don’t support the media (e.g. search engines) and/or for users that can’t access them).

A typical example for an image as site heading would be a site logo that contains the site name (or the logo is that prominent that a name is not needed in addition). Example:

<h1><img src="nike-logo.png" alt="Nike Inc." /></h1>


It should be added in HTML (with img) and not via CSS (with content resp. background), because it’s content and not decoration.

Now, if you should use a heading or text depends on your actual case, of course. For example, if it’s a company logo, I’d use an image (→ others might want to download it and re-use it, e.g. in a presentation; image search engines might index it etc). If the heading is only some specially designed text, I’d try to provide text and style it with CSS.

Regarding your markup: As I don’t know your real content, this might not be relevant, but you are probably using the br element in a wrong way here. You should only use br for meaningful line breaks (e.g. in addresses or poems). If your line break is for design only, you should use CSS instead (and span+class as hook element). Same with the small element: only use it if it contains "side comments such as small print".

Vote Up Vote Down

@Jamie184

You may use image with the "alt" attribute, but, as bybe says, it will not be valid as heading.


text-indent:-9999em;
It is bad practice, search engines do not like when you hide something.


patnz in your choice you should see at the speed your site load (very stylised piece of content vs image).

The faster way will be the best.

Vote Up Vote Down

@Radia820

Images are not headers and generally using <h1><img src="" alt=""/></h1> is bad practice, you could opt to use a text-indent: -9999em but this is becoming unfavourable and the best practice is just to use a H1 as intended.

The text indent method is pretty easy to do you just do something like this in the HTML/CSS:

HTML

<h1><a class="headerimg" name="#">Header text for search engines</a></h1>

CSS

.headerimg{
background:url("../img/header.png") repeat scroll 0 0 transparent;
display:block;
height:100px;
margin-top:0;
text-indent:-9999em;
width:240px;
}


At least with using the above method your using text for the search engines, but ultimately you need to note that images are not valid headers.

Vote Up Vote Down