SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)

    One Syntax, one Semantics Question

    Syntax Question:

    • Should A tags go outside other tags (like P or H1 or LI) or inside them?


    Semantics Question:

    • Should I use an H1 for footer items? These items are like the "Contact Us", Privacy Statement buttons at the bottom of all SPF pages. Should it be a list instead?


    ~TehYoyo

  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
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    Should A tags go outside other tags (like P or H1 or LI) or inside them?
    Inside. They are inline elements, which must not contain block elements. (Note that HTML5 will allow for <a> wrapping around block elements—you know, paving the cow pats and all that.)

    Should I use an H1 for footer items?
    No. There should only be one H1 per page, and really, that belongs at the top—the main title of the page. (Again, HTML5 will change all this—you know, paving the cow pats and all that.)

  3. #3
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Inside. They are inline elements, which must not contain block elements. (Note that HTML5 will allow for <a> wrapping around block elements—you know, paving the cow pats and all that.)



    No. There should only be one H1 per page, and really, that belongs at the top—the main title of the page. (Again, HTML5 will change all this—you know, paving the cow pats and all that.)
    OK. So then what would I use for footer elements?

    If you haven't seen it, I can link you to an image of what I'm talking about.

    ~TehYoyo

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,407
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    OK. So then what would I use for footer elements?
    I would use a ul, as it's a list of links.

    I definitely wouldn't use a heading, h1 or h(anything) - 'cos it ain't heading. A heading has to have some content following for it to "head".

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    So then what would I use for footer elements?
    It depends on what's in the footer. If the footer content needs a heading, then give it one; but make it one that fits the pattern of the rest of the page. I would probably lean towards H2. Image the page with CSS off. It usually makes more sense to have H1 at the top, then content below that divided between H2s and so on. As the footer is a separate section, it seems logical to me to head it with H2. Unless, of course, it is just a list of links ... in which case use a list.

  6. #6
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Yeah. It's like privacy policy, copyright info, etc.

    So probably a list? What about a paragraph tag?

    ~TehYoyo

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    If it's a list, aka what you are describing, then use <ul>. A single line of text doesn't mena it's semantic to slap a <p> on it. Just stick to the UL LI A format for the footer if you have those assortment of links .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Yeah. I guess that's what I'm going to do.

    Thanks all - this may be closed.
    ~TehYoyo

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I just want to say... praise be and hallelujah!

    Ralph -- on the money... it's actually kind-of a laugh -- why would a footer be a heading?

    RyanReese -- you're my new best friend for basically quoting what I've been saying for years -- just because it's text, doesn't mean slap a P around it (or worse, things that AREN'T text that get P slapped around them! -- like OBJECT or IMG -- whiskey tango foxtrot territory)

    @tehYoyo, (and anyone else looking to learn) one of the things about semantics that's VERY poorly drilled in is the proper use of heading tags or even what a heading tag is FOR.

    Heading tags indicate the start of a section of the page, lower order (higher numbered) headings indicating a subsection of the higher order (lower numbered) heading preceding it -- which is why skipping heading levels (like say jumping from H2 to H5) is 'broken', and why there generally should only be one H1 on the page.

    Think of it like a filesystem tree:
    H1 is like root (/) -- on a filesystem all files and directories are 'under' it... on a document the h1 is the defining instance of all content on the page; which is why as Ralph said it pretty much should be the first thing in the markup for a content element.

    H2's would be the subdirectory of root (/images, /downloads, /theme) -- or each of the major subsections of the page.

    H3's of course would then be subdirectories in the top level subdirectories (/downloads/pdf, /downloads/video, /theme/scripts, /theme/images)

    ... and so on and so forth down the page.

    When you are adding a heading there are questions you need to ask yourself:

    1) Am I starting a new section?

    It's amazing how often people put headings in their code when they are NOT starting a new subsection. See this common practice of taglines:

    <h1>Site Title</h1>
    <h2>Tagline</h2>

    Semantically and in terms of using headings properly, that's just gibberish. Doesn't make any sense. The tagline isnt' starting a new subsection of the page -- that borders on choosing the tag just based on it's default appearance -- and as I've said for ages if you choose your tag based on it's default appearance, you're probably choosing the wrong tags! That should either be a small tag inside the h1, or a DIV after. (maybe a P, though I'd be hard pressed to give a tagline that much weight)

    2) Does this section need a heading

    Footers often don't have or warrant a heading tag -- in which case you should be using HR to indicate a change in topic without a heading. That's what horizontal rules are for. (amazing how many people think that's "new" to HTML 5 -- apparently nobody bothered reading the HTML 2 or 3 specs or bothered grasping the basic concepts of semantics)

    3) is this a subsection of the header before it or kin to it.

    It's often a laugh when you see people who think they should just use heading tags 'in order' down the page when the various bits are not subsections of each-other... or how people will use h5's on a sidebar for 'lower weight' when they are effectively saying they are subsections of the content column -- making it total gibberish if you are trying to navigate by headings or pull up a document structure. This is why the practice of making the content heading a H1 is also broken gibberish; Think of a newspaper -- just because "MAYOR CAUGHT TAKING MILLION DOLLAR BRIBE" is presented in a massive text as the big headline, that doesn't mean "K-6 GETS NEW BUILDING" or "WOMAN ARRESTED FOR DOMESTIC ASSAULT" are subsections of it! (at least one would hope not).. and that's what making a content area heading the h1 would basically be saying. You look at all the pages in a book or all the pages in a paper, what's at the top? The name of the paper and the date - the topmost heading gluing all those pages together; just like a H1 on a website should. It might not be in the massive text it is on the cover or front-page, but that's presentation which has absolutely NOTHING to do with semantics or structure.

    ------------------------------------------------

    Bottom line on headings, they exist to mark the start of subsections, and the end of any sibling subsection preceding it.... which is why properly done semantic websites typically have this type of structure: (ooh, time to drag out some ascii art)

    Code:
    <h1>Site Title and/or Logo<br /><small>With tagline (if any)</small></h1>
     |
     +-- <h2>Content area title</h2>
     |    | 
     |    +-- <h3>subsection title</h3>
     |    | 
     |    +-- <h3>subsection title</h3>
     |  
     +-- <h2>SideBar subsection title</h2>
     |
     +-- <h2>SideBar subsection title</h2>
     |
     +-- <hr /><!-- start footer content -->
    Pay particular attention to that HR, indicating the footer content is NOT part of the last H2 in the sidebar! I often put a HR before the first H2's parent wrapper as well, just for structural consistency to make sure we know anything between the h1 and h2 are unrelated. (like the menu, search form, etc)...

    So incredibly simple, I'm shocked the number of people who seem to argue it or just sleaze together their pages any old way... They exist to break up your content into a meaningful structure -- and it's why all those new fancy HTML 5 structural tags are just pointless bloat.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    RyanReese -- you're my new best friend for basically quoting what I've been saying for years -- just because it's text, doesn't mean slap a P around it (or worse, things that AREN'T text that get P slapped around them! -- like OBJECT or IMG -- whiskey tango foxtrot territory)
    I used to be guilty of that when I first started out, until I actually read up on it via the internet, and it really does make sense. How is a single line a paragraph? <p> is paragraph. Single line = NOT a paragraph. I liked how you worded it in your last signature about "slapping one on". I plagiarized the way I had the message come out, from you, with the word "slap" .

    I need to clean up my sites code...on that note. It was hastiliy thrown together .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Single line = NOT a paragraph.
    That's fair enough, but don't be too absolute about it. It's perfectly fine to have a single sentence marked off as a paragraph in English writing. I don't know how that stands in relation to HTML rules, but just sayin'.

    The reason I suggested that an H2 could be appropriate for a "footer" is that footers are taking on a new identity these days. Rather than just being a place for a copyright notice, they can be a handy section of "Extras" that aren't directly related to the main content of the page ... in the which case a heading is not out of order. Personally, I think the footer (or bottom section of the page) is where most or all "sidebar" content should be (I'm going through an "I hate sidebars" phase right now).

    All the same, over the last year Jason has re-awoken me to the real purpose of the <hr>, for which I'm full of grate.

  12. #12
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    What if I don't want the visual appearance of an hr?

    Set it to display:none and move on?

    ~TehYoyo

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    What if I don't want the visual appearance of an hr?

    Set it to display:none and move on?
    Yes.

  14. #14
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    So it's purely semantical?

    ~TehYoyo

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    So it's purely semantical?
    If you hide it, yes.

    Off Topic:

    Why do you sign every post? We know you you are.

  16. #16
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    If you hide it, yes.

    Off Topic:

    Why do you sign every post? We know you you are.
    OK. Thanks.
    Off Topic:

    Eh, I don't know. By now it's become sort of a routine.


    ~Teh
    ~Person facing identity crisis

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    That's fair enough, but don't be too absolute about it. It's perfectly fine to have a single sentence marked off as a paragraph in English writing. I don't know how that stands in relation to HTML rules, but just sayin'.
    I'm curious what you could write up in English that would be defined as a paragraph. Not being cynical, genuinely curious.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I'm curious what you could write up in English that would be defined as a paragraph.
    In print, a paragraph is one or more sentences marked off as a block either by a line break or an initial indent. What commonly distinguishes one paragraph from another is a change in theme or topic.

    'Para-graph' literally means written (or drawn) alongside.

  19. #19
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Grammatically, a new line of dialogue that switches characters would constitute a new paragraph.

    ~TehYoyo

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    Grammatically, a new line of dialogue that switches characters would constitute a new paragraph.
    Yes indeed. There are more examples than the ones I listed.

  21. #21
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    In print, a paragraph is one or more sentences marked off as a block either by a line break or an initial indent. What commonly distinguishes one paragraph from another is a change in theme or topic.
    That's the problem though -- people thinking about it as the print term for it, instead of the GRAMMATICAL term for it. In print, it's a presentational element used to mark a break between text elements -- in GRAMMAR it is for all intents and purposes punctuation! Used to distinguish separate thoughts and concepts into easily digested blocks. If you are talking semantic markup, you should be thinking grammar, because again, if you are choosing your tags because of what they look like (typography/presentation) you're choosing the wrong tags!

    Paragraphs within a heading are generally related to the topic, but should be separate and distinct ideas. Because of that I typically restrict the use of paragraphs to flow text of sentences in the content and sidebar areas. Rarely will I use it in a footer since the disparate elements are, well... separate ideas.

    In a lot of ways non-paragraph text is like Porn... It's hard to define but I know it when I see it. Sometimes it's easy to tell -- like if you have a list of short options, bullet points, etc -- rarely does it make sense for them to even have paragraphs... Just as if they are all getting headings, there's no reason to give them a list.

    Some links:
    http://en.wikipedia.org/wiki/Paragraph
    http://grammar.ccc.commnet.edu/grammar/paragraphs.htm
    http://hospitality.hud.ac.uk/studysk...paragraphs.htm
    http://www.myenglishgrammar.com/engl...paragraph.html

    Most languages have some such form of separation (even ruby ones!) -- the difference is how it's presented; from a semantic standpoint it does not mean double line-break, or line-break with indent, or any of the other presentational affectations used to deliver it's meaning. That it can in fact HAVE different presentations shows exactly why it's a grammatical block, NOT a presentational one.

    It's also worth noting the term paragraph, or at least the root concept on which it's based (paragraphos), goes back to the time of ancient Greece circa the 5th century BC in the west, and related language concepts can be found in both the east and west LONG before that -- while Bi-Sheng was ~1000 AD and Gutenburg made his press in 1350 AD?

    Oh yes, it's a typographical term...

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    That's the problem though -- people thinking about it as the print term for it, instead of the GRAMMATICAL term for it.
    Yes, I used the term 'in print' loosely. I really mean in spoken/written language. What I described is both the grammatical concept and the usual visual presentation (to help people understand what I was talking about. [Side note: the problem with most programmers is that they wax on about the grammar of their language without giving enough practical demonstrations of what they are talking about. You don't have to look further than the W3C specs or the blasted PHP Manual to see examples of what I mean.]).

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    I
    RyanReese -- you're my new best friend for basically quoting what I've been saying for years -- just because it's text, doesn't mean slap a P around it (or worse, things that AREN'T text that get P slapped around them! -- like OBJECT or IMG -- whiskey tango foxtrot territory)
    Because you keep repeating this same argument I will keep repeating that I disagree and I think that (in most cases) a p element can be a suitable tag to wrap around an image when there is no other context for it. It's no big issue either way but I do dislike divs around images and worse I also dislike images without block containers around them.

    e.g.
    This is invalid:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    </head>
    <body>
    <img src="images/flag-gb.gif" width="16" height="11" alt="GB Flag">
    <p>Lorem ispum dolor sit ...</p>
    </body>
    </html>
    The inline element must be in a block container when it is a direct child of the body or it is invalid. So what element do we put around it? If you place a div around it then you are saying that it is a division of content which it may not be as in most cases the image is related to whatever the current context is (otherwise why is it there at all).

    I see the image above as being equivalent to saying this:

    <p>This is what the English Flag looks like</p>

    That is clearly a sentence and should be in a p element and therefore so should the image.

    There can be cases made for the image to be in a div at times also or indeed in a heading element if the page was about flags with each flag starting the new section about that flag. I know you disagree but pictures are worth a 1000 words and words go inside p elements in most cases.

    However, I see it as a minor semantic issue and perhaps the specs originally got it wrong and an image should have been a suitable block element by default with the img tag containing the content inside semantically.

  24. #24
    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 paul
    If you place a div around it then you are saying that it is a division of content which it may not be as in most cases the image is related to whatever the current context is (otherwise why is it there at all).
    If we're using divs as background-image-holding sandbags and wrapping sometimes three divs around something for multiple background images, or to help center things, or for positioning stuff around... and with div (along with span) having for this very reason no semantic value, I'd say having a div around an image means... nothing. Or, it means, "the developer needed a block around this stuff" (for styling reasons, or Javascript reasons, or image reasons, or because they put something in their coffee that day).

    Since div doesn't mean "division of content" they had to go make new tags that did refer to grouping content (article, section, etc).

    That said, I'd rather wrap a p around random text phrases than divs. A random text phrase to me is closer to a paragraph than an utterly meaningless div.

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I'd say having a div around an image means... nothing.
    Which, would then support my argument a little more wouldn't it (Although I know what you meant )

    That said, I'd rather wrap a p around random text phrases than divs. A random text phrase to me is closer to a paragraph than an utterly meaningless div.
    My thoughts also.

    I do see that there are merits for both sides of the argument but I just feel the p element is the lesser of two evils for phrases.


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
  •