Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
Image Use with Headings
You can use images in place of headings to increase the visual appeal, but in doing so you lose some value in search engine optimization.
Search engines place more value on the words inside heading tags than they will on normal text or image alt text, and since headings often contain good keywords related to the content, using an image instead of a text heading sacrifices the benefit a text heading would provide.
Warning, sneaky but legal trick ahead!
What most people don’t know is that you can use an image with a heading tag. Take a look at the example below:
Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
Fall Colors
The text shadow makes some people think the text is part of the image. It's not, you can copy and paste the text. The shadow was added with CSS. This whole think is really quite simple. Here's the code for that:
<h1>
<img src="images/fall-colors.jpg"
style="vertical-align: bottom;
margin-right: 9px;
width: 46px;
height: 48px;"
alt="fall colors">
<span style="font-family: Sigmar, sans-serif;
font-size: 50px;
color: orange;
text-shadow: 1px 1px 3px black;">
Fall Colors
</span>
</h1>
By nesting an image tag inside an h1 heading you can add an image inline with the heading text. Because I placed the image before the text, it appears before the text on the web page. If I had placed the image after the heading text it would show up after the words Fall Colors.
And yes . . . that code validates! Skip ahead if you know this next part, but here's what each line means:
| Value | Description |
|---|---|
| Line 1 | Opens the heading tag. |
| Line 2 | Identifies the image and image location. |
| Line 3 | Sets the vertical alignment so the image aligns nicely with the heading text. |
| Line 4 | Sets the margin on the right side of the image. |
| Line 5 | Sets the image width. |
| Line 6 | Sets the image height. |
| Line 7 | Supplies the image "alt" text. |
| Line 8 | Opens a span tag so we can add CSS, and set the font family. |
| Line 9 | Sets the font size. |
| Line 10 | Sets the font color. |
| Line 11 | Adds a CSS text shadow. |
| Line 12 | The heading text. |
| Line 13 | Closes the span element. |
| Line 14 | Closes the heading element. |
For search engine optimization purposes, we’ve got an image with the alt text of "fall colors" and heading text of "fall colors" …which is better than an image heading, and yet, it still let’s us have an image in our heading for aesthetic purposes. I’ll show you another option example, but first…
Depending on the image size and the text size and font used, you may have to adjust the vertical alignment of the image to make it look right. Here’s how to do that if you had to subtract some pixels:
style="vertical-align: -5px;"
You can use positive or negative values to align the image and text, or you can use keywords. The keyword values are:
baseline | bottom | text-bottom | middle | sub | super | text-top | top
Here’s what those values mean…
| Value | Description |
|---|---|
| baseline | Aligns the element (the image in my example) with the bottom of the lowercase letters in the same line of text. |
| bottom | Aligns the bottom of the element with the bottom of the surrounding text or other content, whichever is lowest. |
| middle | Aligns the middle of the element with the middle of the line of text. |
| sub | Subscripts the element; in this case the image is lowered, not the text. |
| super | Superscripts the element; in this case the image is raised, not the text. |
| text-bottom | Similar to the bottom value, only this aligns the element to bottom of the text. Other content is ignored for alignment purposes. |
| text-top | Aligns the element to the top of the text. Other elements are ignored. |
| top | Aligns the top of the element with the top of the text or other content, whichever is tallest. |
There are many ways you could use an image this way. For example:
- A sports site could use a football for football stories, a baseball for baseball stories, etc.
- A nature site could use related nature pictures.
- A recipe site could use food images.
- A music review site could use band logos (check the legal requirements).
- A pet site could use animal images.
You get the idea. By using your imagination and using good taste this could be one visual aid that sets your site apart from the millions of others.
Here’s another type of heading example:
Guitar Review
With that, I simply added a background image to a heading tag. The browser then draws the text on top of the background image just as it does on a web page with a background image or background color. Here’s the code:The background image is added via inline CSS, though you could use embedded or external style sheets as well. The background is set to “no repeat” to keep it from repeating. Padding is added to keep the text off the edges and give the whole look a sense of balance.
Using this method can take some experimentation to get that "just right" look. In this case, with the guitar on the right side, the guitar is cut off on small screens like a smart phone. You could put the guitar on the left and add padding to move the text over to solve that problem. Or, you could use multiple guitars in the background, or user different backgrounds depending on screen size, but those are all tutorials for another day.
Here's the code for that guitar header:
<h1 style="background-image: url('images/heading-bg.jpg');
background-repeat: no-repeat;
padding: 7px;">Guitar Review</h1>
