Is it semantically correct to have no h1 header in a web page, suppose i decided to have an image with the page logo and title used instead of having the h1 header element, is that acceptable?
Sometimes you just need to use image of logo instead of text version as your logo may be (and usually indeed is) complex. so it's fine. Remember however to use alt attribute for images explaining it.
I think that there is no requirement that says 'yes you NEED to use h1 tag on your page'
Related
Is it ok to use a h1 tag in the header of a site? I don't mean to replace the logo but as a bit of text next to it with keywords.
The body h tags would all be h2.
Only reason im thinking this is because the site is more or less a personel project site and the design is more of a news or directory layout with not much need for a h1 tag in the body.
Or will this somehow get my penalized by google?
From Mozilla Foundation:
...you should consider avoiding using more than once on a page; by convention, it's used for the page's displayed title, with all headings below starting with . When using sections, you should use one per section...
That said here you have the link to it for further knowledge:
Heading elements
I am trying to get a correct page structure by defining my h1, h2's and so on correctly. But I have an image with a slogan, with text that should actually be a h2.
What would be a correct way to not show text in the h2, to show the slogan, and still have a correct page structure, also for i.e. SEO and for readability?
If you want to show image text and considering the SEO then alt tag will be best for this. Yes h2 tag as effect on SEO but as well as alt tag too.
you can use it like this
<img src="#" alt="cartoon">
Here i considering cartoon word so i type like this one and it will be valid for SEO and have similar effect as h2. other thing is you can make image name as same as target keyword.
<img src="cartoon.jpg" alt="cartoon" name="cartoon">
You can see in above example, add name tag too so it will have good SEO effect without using h2 tag. hope this will help.
On the home page, is it best to use <h1> for the blog title or description?
By default Thematic (the theme I'm building my child theme on) uses <h1> for the blog description.
Also, I've replaced the blog title text with an image logo. Is this ok or should I still display the text and use text-indent: -9999px to hide it?
It all depends a bit on how related to your site your site description is.
If it's any important I'd wrap my site title between <h1> tags and my site description between <h2> tags.
If less important I'd wrap my site description between <p> tags.
I'd avoid using display:none to hide stuff, as Google or any other search engine is often confused when doing so.
There's a pretty good alternative though (also used within the WordPress TwentyEleven theme). A good tutorial about this is listed here: http://themeshaper.com/2011/02/17/css-tip-hiding-content-with-clip/
You should have an h1 on your page. It gives the page semantic meaning.
You should not, I think, hide the h1 if you are using an img as a title. This has implications for
search engines (who might think you are hiding content)
users with accessibility issues (screen readers)
yourself, for DOM manipulation if you forget it's there.
As far as SEO is considered, it is better to have your site a heading tags. Heading tags are good for SEO purposes.
Per google, It's not the best practice to hide content of the page. The text that describes your image is an alt tag, and this should be used for that purpose, not hidden h1 tag. Here : http://www.youtube.com/watch?v=GIn5qJKU8VM
http://www.youtube.com/watch?v=fBLvn_WkDJ4
h1 is the heading of your page, like the title of the chapter in a book. Every page on your site might have a h1 to help the reader understand the contents or purpose of that page. If you hide the h1 and replace it with a logo, search engines will still find it.
When I use images to replace H1/H2's (usually it's H2's for descriptions, and only on the home page) I always use text-indent to hide the text.
You want that text there so it can be indexed by search engines, but you want the image so it will look nice. Why settle for one or the other? :)
I also usually put the text inside of a span, then give said span the text-indent property.
I recommend against hiding, that's a tricky technique that can burn you. You very much want the text to be on the page. Thus the simple approach has some merit:
<img id="mybloglogo" src="myblog.jpg" alt="[My blog about great stuff]">
However, there is no perfect answer. See Replacing H1 text with a logo image: best method for SEO and accessibility? and google for this topic to understand the passion behind various views of this issue.
If you don't want to spend hours researching, you have a simpler option. View your page. Now disable CSS and look again. Now disable images and look again. If the page reads and works fine at each stage, you've got it covered for readers both human and robotic.
To turn off CSS in Firefix "View->Page Style->No Style".
The header tag, or the tag in HTML, will usually be the title of a post, or other emphasized text on the page. It will usually be the largest text that stands out.
On the home page, it's best to use the H1 heading to include the main keyphrase that you want to rank for in search engines like Google.
You should edit the Thematic theme to use your desired H1.
If I have the choice to insert images directly into the html or in the css, say for example a link wrapped in an image I could do either...
<img src="#" alt="" width="" height="" />
Or I could do...
<a id="img" href="#"></a>
#img {background: url('#') no-repeat; height: #; width: #;}
Which is better and why? Both work as wanted but is there any difference to load times etc, or any considered better practice?
Using images in HTML is better when the image has any contextual meaning... if it is a decorative picture without any contextual meaning, then use CSS. CSS is for presentation, HTML is for content.
The best hint for you to determine whether to use HTML or CSS for a picture is:
If I remove the picture, will the web-page content still make sense?
An image in HTML is meant to provide a visual meaning in context, with a meaningful text fall-back. Using an A element without any content should be avoided since its content will have a relationship with the link, for browsers and web-crawlers (such a Google bot).
Use CSS images only for decorative purposes. Otherwise it can damage your search engine rankings. Always provide an alt attribute for images, determine what will it be imagining that an eventual visitor cannot see any images.
If the image has context, such as a logo, or a photo, I would suggest loading it as an <img> Make sure you are providing alt text for accessibility and SEO reasons as well.
If an image has no context in the scope of the page, then I think the correct place for it, is defined the in the CSS which controls the design.
The whole idea is to separate your presentation from your content as much as you can. An Image can be content, and if so, should be in it.
Generally, I try to put as many images in CSS as possible but Doozer and Mario have good points. If the image is important to the context, it can go in the HTML. I will also use <img> tags when text needs to float around and image.
One thing that CSS can do that <img> can't are CSS image sprites. This is the only real performance benefit that you'll get from one or the other. Performance-hungry websites like youtube.com will combine many images into one large composite image in order to cut down on the HTTP traffic (and therefore the page load times). For example, this is a sprite taken from youtube.com.
Follow principles of semantic HTML. If the image is content, ie a thumbnail, photo, or button, use an <img> element. If it is more a part of the page design, a background image may be more appropriate.
A more specific example: If you are using your image as an icon next to a text link, use a background-image:
<span class="printIcon" onclick="window.print()">Print</a>
.printIcon { background: url(...) no-repeat; padding-left: 20px }
If your image is the button itself, with no text aspect, use an <img> element with an appropriate alt attribute that would work to substitue for the image if it is unavailable.
<img src="printButton.png" alt="Print" onclick="window.print()" />
I have a large div with the site header/logo as the background image. Is there anything wrong with putting a h2 tag containing the site title behind this using z-index, so that it would show if the user couldn't/didn't get the image for some reason? I know this is different to a standard [background on the h2 element] image replacement. (EDIT: Sorry maybe i'm not making it clear - i'm using a div background image not an IMG tag)
You should use the alt attribute of the img tag, so if the image isn't loaded for some reason, the text would appear.
This is exactly why the alt attr exists,.
If possible, I would ditch the div and just use an h2 with an id and set a background image to that.
I do that whenever possible to avoid excessive divs when I could use other block-level elements, if it only has a background and text. An h* with a background image is still a heading.
You can simple place img tag with alt attribute. That way if image is not loaded, text will be displayed.
<img src="" alt="This text will be displayed" />
Google doesn't like what you describe:
http://www.google.com/support/webmasters/bin/answer.py?answer=66353
However, from a pure design perspective, there is no real problem, save some bloated code.
You might want to see how often your images fail before you attempt any changes.
That's fine. Note that many feel the site logo isn't really something you'd put into an h* tag other than on the home page, when it makes sense to put it in an h1 tag.