Forums

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
    Posts
  • January 20, 2011 at 9:34 am #31323
    Brett_Santore
    Member

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

    HTML:

    CSS:

    h1.title{
    
position:absolute;
    
left:-999px;
    
}

    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?

    March 16, 2011 at 4:36 pm #55386
    HuwRowlands
    Member

    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?

    Thanks

    March 17, 2011 at 5:58 am #55356
    HuwRowlands
    Member

    @wolfcry911;

    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?

    March 18, 2011 at 11:21 am #55254
    chrisburton
    Participant

    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;
    
}
    May 23, 2011 at 11:20 am #75491
    JackUmano
    Member

    From the whatwg.org’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!

    http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element

    May 23, 2011 at 4:54 pm #75483
    Luminated
    Member

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

    Occam’s Razor, my friend!

    January 30, 2012 at 9:24 pm #95742
    ph55
    Member

    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 html5doctor.com using text-indent on its main H1:


    

    


    

     
    


    


    

    HTML5 Doctor

    

    Helping you implement HTML5 today

    


    


    
     

    


    

    


    header hgroup h1 {
    
background: url("images/logo.png") no-repeat scroll 0 0 transparent;
    
display: block;
    
height: 96px;
    
text-indent: -9999em;
    
}
    May 9, 2012 at 6:33 pm #102618
    moderncodes
    Member

    I just use this settings in my css

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