The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other HTML5 Outline and Text Indent

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #31323

    I’m currently learning HTML5 and using the CSS to hide the h1 with text indent.




    By using CSS like this, my document outline changes from Untitled NAV to Site Navigation. I have two questions. Is this necessary? Is using CSS in this fashion frowned upon, similar to having keyword text the same color as the background?


    I was thinking the exact same thing.

    Are search engines going to allow for all the ‘hidden’ content on each page.

    Also, each section must have a h1 (title), do I need to use text-indent for these also OR just use the usual ” div id= ” structure??

    Can anyone clear this up?




    Tried it, but it did not show up on the HTML5 Outline.
    I think it deffo needs a H1 tag. I’m just not sure on the text-indent method for that?


    You’re actually not using text-indent, you’re using absolute positioning which is why I’m totally confused here with the actual question. Google renders text-indent just fine. View your site with no CSS, that is how google is likely to see your website.

    Correct CSS

    h1.title {
    text-indent: -9999px;

    From the’s page (see link below), they mention that when putting a bunch of links in the footer, it’s obvious that it’s navigation so you don’t need to use the nav tag. I imagine the same is true for the header. You don’t need to use the nav tag in the header. Search engines will know that a bunch of links in the header are navigation. That solves the problem for many sites.

    Now, if you have a navigation block down the left column of your main content area, I don’t know what you’d do. How can you make your html5 outline look right, still use the nav element appropriately, and not use silly hacks like text-indent.

    When you think about it, you’d be making google unhappy by hiding content, just so you could make google happy by using the nav element correctly. Ugh!


    What Christopher said answered the thread…you’re not using text indent at all, you’re using positioning.

    Occam’s Razor, my friend!


    So basicly there is contradiction, you need headings in NAV to have well formed outline, on the other hand you damaging SEO with this text-indent or other hiding text properties.

    Same issue with main H1. You need it on top of your outline, but not always you will need it in your design on the top (also font issues).

    For example, even using text-indent on its main H1:

    header hgroup h1 {
    background: url("images/logo.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 96px;
    text-indent: -9999em;

    I just use this settings in my css

    nav h1, nav h2, nav h3, nav h4, nav h5 {display:none}
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘Other’ is closed to new topics and replies.