SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict artemis's Avatar
    Join Date
    Sep 2003
    Location
    London
    Posts
    295
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post Seantics of div tags and Headings

    I am building my first WordPress theme and was wondering from a completely semantic point of view if there is any difference between the two samples below?

    What I am really wondering is, does the second H2 provide a clear SEMANTIC division between the two blocks of content or could the second paragraph still be thought of as below the first heading.

    Code:
    <div>
        <h2>Lorem ipsum</h2>
        <p>blah balh blah</p>
    </div>
    <div>
        <h2>Lorem ipsum</h2>
        <p>blah balh blah</p>
    </div>
    Code:
        <h2>Lorem ipsum</h2>
        <p>blah balh blah</p>
        <h2>Lorem ipsum</h2>
        <p>blah balh blah</p>

  2. #2
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    It is a bit of both really, the semantic division of paragraphs is made through the secondary heading however they naturally follow on from each other in the document flow. Generally the divider tags are used to group blocks of content for semantic reasons such a a heading, footer (etc). In the case of what you are doing unless you want to group (and subsequently style) the two sets of h2's and paragraphs seperately, you don't really need the division as they do not require unique seperation

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The paragraphs 'belong' to the preceding heading in both cases.
    The only difference between the two examples is that in the first one, each heading and paragraph are grouped together and constitute a 'block' or division of the document.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @artemis

    Are you trying encapsulate information that shares a similar relationship?

    You need to abide by the content out approach.

  5. #5
    SitePoint Addict artemis's Avatar
    Join Date
    Sep 2003
    Location
    London
    Posts
    295
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I am creating separate blog posts I guess and for styling purposes I will use divs but I then started wondering whether I really needed the divs semantically or if its just a style thing.

  6. #6
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by artemis View Post
    I am creating separate blog posts I guess and for styling purposes I will use divs but I then started wondering whether I really needed the divs semantically or if its just a style thing.
    May I ask:

    1. Are these a list of unordered blog posts?
    2. Are these a list of ordered blog posts(maybe by date)?

  7. #7
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,151
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Not sure how important the heading is to you but you *could* use a definition list here to add further semantic value.


    HTML Code:
    <dl>
    	<dt>Lorem ipsum</dt>
    	<dd>blah balh blah</dd>
    </dl>
    <dl>
    	<dt>Lorem ipsum</dt>
    	<dd>blah balh blah</dd>
    </dl>
    <dl>
    	<dt>Lorem ipsum</dt>
    	<dd>blah balh blah</dd>
    </dl>
    If the heading is important to you then you should probably use a list though that allows the heading tags.


Tags for this Thread

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
  •