SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is this a good based up markup? [HTML5]

    Hi
    I was wondering if my form of markup is the appropriate way?
    I'm learning this on my spare time so it's a bit hard but i would love if anyone helped me or have me pointers on the right way for this markup, thanks.

    Code:
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title></title>
            <link type="text/css" rel="stylesheet" href="stylesheet.css">
        </head>
        <body>
            <header>
                <hgroup>
                    <h1></h1>
                    <h3></h3>
                </hgroup>
                <nav>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </nav>
            </header>
            <section>
                <article>
                    <h3></h3>
                    <p></p>
                    <p></p>
                </article>
                <article>
                    <h3></h3>
                    <p></p>
                    <p></p>
                </article>
            </section>
            <aside>
                <p></p>
            </aside>
            <footer>
                <p></p>
            </footer>
        </body>
    </html>

    Thank you
    Last edited by ralph.m; Mar 12, 2013 at 18:01. Reason: removed [spoiler] tags that made the code unreadable

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    The first thing I'd question about that code is the use of headings. Why an H1 and then H3? There's no logic to that. And then H3s later down? What happened to H2s?

    I'm not sure if <hgroup> is still a part of the plan now (it seems to go in and out faster than a ... well, I'll leave it to your imagination). But it's a silly element, IMHO. I don't think a subtitle deserves a heading tag, or even a <p> tag. I'd either put it in a div or in a span as part of the main title.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Maybe I'll end up changing my mind, but at this point I don't ever see myself using all those fancy html5 names. I'm quite happy with my ids.

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The first thing I'd question about that code is the use of headings. Why an H1 and then H3? There's no logic to that. And then H3s later down? What happened to H2s?

    I'm not sure if <hgroup> is still a part of the plan now (it seems to go in and out faster than a ... well, I'll leave it to your imagination). But it's a silly element, IMHO. I don't think a subtitle deserves a heading tag, or even a <p> tag. I'd either put it in a div or in a span as part of the main title.
    From my knowledge an <hgroup> is when you have more than 1 heading tag Such as h1-h6 in the <header>. What i wanted to do is have a title EX: MonkeyCoders and underneath it a small phrase usin a smaller heading size such as h3 to say Ex: "Coder-Web Dev.- Hacks- and more".

    The lower H3 tag would normaly be in my opinion the title for a section or article with a minimum importance or high importance such as : "About Me", "Contact", etc. Well before i started looking into HTML5 i would of used a div tag with the id of "sub_title".
    Now for the markup i used i was wondering is that a correct process? any helpful hints is appreciated. thank you very much

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Maybe I'll end up changing my mind, but at this point I don't ever see myself using all those fancy html5 names. I'm quite happy with my ids.
    Your right i feel using all this elements became more of a hazzle. However, i feel like my formatting and sense of coding has gotten cleaner using HTML5 and simpler. Once i started using, HTML5 i began using a bunch of class and no more div tags since that was xHTML.

  6. #6
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,888
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Now that you have a working template complete your task by adding the following links preferably just before the closing body tag:

    HTML Code:
    <p style='display:none'>
        <a href="http://jigsaw.w3.org/css-validator/check/referer">
             <img 
                   src="http://jigsaw.w3.org/css-validator/images/vcss"
                   style="float:right; border:0;width:88px;height:31px; margin:2em"
                   alt="Valid CSS!" 
              />
        </a>
    
        <a href="http://validator.w3.org/check?uri=referer">
             <img
                   src="http://www.w3.org/Icons/valid-xhtml10" 
                   style='float:right; width:88px; height:31px;  margin:2em' 
                   alt="Valid XHTML 1.0 Strict" 
             />
        </a>
    </p>
        
    The links will no doubt come in very handy when additional scripting is added
    Last edited by John_Betong; Mar 12, 2013 at 23:18. Reason: added: style='display:none' so links hidden except for testing
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  7. #7
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    HTML5, mainly over complicates things for the average web author and adds bloat and many things have been redefined so don't work like HTML 4.01. The Grouping would probably be better without the skip of; Hx, anyway it's now HTML5.1 where they are moving towards though all is in flux and meant for experimental purpose only hence the mainly non-normative status.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by AndreeU17 View Post
    From my knowledge an <hgroup> is when you have more than 1 heading tag Such as h1-h6 in the <header>.
    Yes, but they haven't decided for sure if they'll keep it. And it's kind of a silly element, as it encourages this unnecessary use of headings.

    What i wanted to do is have a title EX: MonkeyCoders and underneath it a small phrase usin a smaller heading size such as h3 to say Ex: "Coder-Web Dev.- Hacks- and more".
    You seem to be confusing the meaning of Hx with the browser's default styles for heading elements. You don't use an H3 because it "looks right". You choose it because it's meaningful. You can style these elements any way you want. But to have one heading under another is kind of pointless.

    The lower H3 tag would normaly be in my opinion the title for a section or article with a minimum importance or high importance such as : "About Me", "Contact", etc.
    To have an h3 on a page without at least one H2 and H1 above it is wrong. These heading numbers have a meaning—each being a subset of the other. A subtitle is not a subset of a heading.

    Well before i started looking into HTML5 i would of used a div tag with the id of "sub_title".
    Maybe you should stop reading about HTML5 then. Well, of course use a heading element for an actual heading, but it's not the right element for a subtitle.

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Another school of thought here on the headings is... However one that I do not follow. Each heading has a different default size. Some no doubt simply use whichever heading displays the desired font size. Before css this was most likely it's possible intention. That said, I would venture to say that as long as you were not doing weird and crazy things with your headings google would probably pay no mind. Aside from your h1 that is. That is important. But the others are so abused like metas were in the past google must give a blind eye to most of it. Hence content (aka P's and such) are given such stronger weight now.

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph
    I'm not sure if <hgroup> is still a part of the plan now (it seems to go in and out faster than a ... well, I'll leave it to your imagination).
    It's being discussed right now. Steve Faulkner proposes it either gets fixed, or removed. There have been other ideas, like a whole new tag like <subtitle> (unlikely) or some kind of new attribute that would go on a p after a heading (somewhat more likely).

    You still wouldn't have an h1 and an h3... they'd remain in order. The old purpose of <hgroup> was to show that two headings together were not really two separate headings, but were related.

    Regarding headings... someone (I think it was Haydon Pickering) wrote an interesting email to the group talking about how there seemed to be two jobs for headings: sometimes they are meant for page structure (like when you web page is like a university paper, starting with h1 and branching its way down to h2's, 3's, etc) and other times are chosen based on the importance of the information they're heading (like when we have a page starting with navigation and a heading, and that heading is an h2, not an h1 even though it may be the first heading on the page).

  11. #11
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Regarding headings... someone (I think it was Haydon Pickering) wrote an interesting email to the group talking about how there seemed to be two jobs for headings: sometimes they are meant for page structure (like when you web page is like a university paper, starting with h1 and branching its way down to h2's, 3's, etc) and other times are chosen based on the importance of the information they're heading (like when we have a page starting with navigation and a heading, and that heading is an h2, not an h1 even though it may be the first heading on the page).
    Good point. That's another way to do it. Usually a moot point though. As usually the most important go at the top and so on down.

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Only if your web page and your web content are the same thing, usually. When you are starting with auxilliary headings first, it's because you have "web site" content around (also on top) the "page" content (which has the page structure we all know and love, starting with h1).

    www.paciellogroup.com was actually an example brought up by Pickering. It's not all that uncommon, and if you (as author) feel there should be a heading before the navigation, and the navigation comes before the main page content, you've got a dilemma... but generally you'd still not use an h1 there.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •