1

I've got the following footer for a project I'm working on:

<footer>
  License: <a href="#">Creative Commons BY</a>
  Email: <a href="mailto:#">email@mail.com</a>
  Telephone: <a href="tel:#">0123456789</a>
</footer>

For this footer I want each link (and their prefixes) to be displayed on a separate line, and I would like to do it as semantically valid as possible, without adding unneccesary markup.

I've already considered:

  • The <br> tag, but it is only considered semantic in poetry (or similar content where the line-break is an inherent part of the information, so I cannot use that to break the lines (see this question: <br> tag semantic alternative usage)

  • Using an ul, but it isn't really a list, so wrapping it in an ul also isn't really a valid option.

  • Using fixed widths, but I would really like to find a dynamic solution.

  • Surrounding each line with a <p>, which seems a bit overdone, because it isn't really paragraphs, but single lines that I'm wrapping.

What would be the best way to break these lines in a semantically sensible way, without adding extra markup?

Community
  • 1
  • 1
  • um thats a list, so
      all the way IMHO,
      should not be used, and why not add any more markup, few lines of css and your good to go
     – Richlewis Apr 11 '13 at 10:23
  • I think the 'no extra markup` requirement is a bit overkill. There's nothing semantic about your markup, and you can't make it semantic without, well, adding some semantic mishmash. I think, some microformat is the way to go here. Look at this SO question: http://stackoverflow.com/questions/2359440/what-is-the-most-semantic-way-to-display-a-street-address-in-html – shakurov Apr 11 '13 at 10:23
  • @shakurov, Why isn't my markup semantic? I see that in the article you suggested the use of `
    ` is recommended, but what about the license information?
     –  Apr 11 '13 at 10:26
  • 2
    @shakurov, and maybe I should have said no extra *unsemantic* markup. –  Apr 11 '13 at 10:27
  • Why isn't that semantic? Because `
    ` doesn't really say: 'This is where the address info is presented'. As for the license, there's the `rel="license"` attribute (http://microformats.org/wiki/rel-license ).
     – shakurov Apr 11 '13 at 10:30
  • @shakurov, I see that if I markup my contact information as a vcard I should include a full name (.fn). Does it matter if I include it in the html, but set it to `display:none` with css? Will it still serve its purpose as an hcard (so for example, could it still potentially be used as a rich snippet by google)? –  Apr 11 '13 at 11:40
  • 1
    Yes, it will. It's not recommended, though. More info [here](http://stackoverflow.com/questions/5750836/microformats-hreview-with-invisible-item). – shakurov Apr 11 '13 at 12:09

6 Answers6

7

I see that as a list. And then the <ul> tag can be appropriate.

Maybe even better you can view it as a list of definitions, then <dl><dt> is appropriate.

Example:

<dl>
    <dt>License:</dt>
    <dd><a href="#">Creative Commons BY</a></dd>
    etc.
</dl>

To have it on separate lines, just set the dts to float:left.

Matsemann
  • 18,825
  • 18
  • 54
  • 88
3

[...] semantically sensible way, without adding extra markup?

I doubt that you can. Personally i would use a Definition List for this.

<dl>
    <dt>License:</dt>
    <dd><a href="#">Creative Commons BY</a></dd>
    <dt>Email:</dt>
    <dd><a href="mailto:#">email@mail.com</a></dd>
    <dt>Telephone:</dt>
    <dd><a href="tel:#">0123456789</a></dd>
</dl>

To make them appear as three lines you could float the DT elements left, for instance.

dt {
    float: left;
    margin-right: 4px;
}

Demo at http://jsfiddle.net/2nbfg/

The plus side of this is you get a lot more flexibility when it comes to styling it later on. Check out http://jsfiddle.net/2nbfg/1/ for an alternative way of styling it.

See http://www.maxdesign.com.au/articles/definition/ for more information.

xec
  • 15,592
  • 3
  • 40
  • 48
2

talking about semantic, this could be a good usecase for <address> if the contact information provided is related to the document (I may suppose, since I see a license information included1): see http://html5doctor.com/the-address-element/ for further reference about it.

(If not, the same page on html5doctor is suggesting to simply use a pararaph with the hcard microformat using <br> where it's necessary)

So in the first scenario I would go with

<footer>
    <p>
       License: <a href="#" rel="license">Creative Commons BY</a>
    </p>
    <address>
        Email: <a href="mailto:#">email@mail.com</a>
        Telephone: <a href="tel:#">0123456789</a>
    </address>
</footer>

and 

footer p { margin: 0; }

footer address {
   font-style: normal; /* just because of default browser style */
}

footer address a:after {
  content: "";
  display: block;
}

see jsbin example: http://jsbin.com/ajohur/1/edit

(1) Edit — as pointed out by @unor, the information license should probably stay outside the address element, so I wrapped it in a paragraph.

Fabrizio Calderan loves trees
  • 109,094
  • 24
  • 154
  • 160
  • The license information should not be part of `address`, which may *only* contain contact information for the page resp. the parent `article`. – unor Apr 11 '13 at 10:49
  • since address may contain a link to the document author I think it could also contain a link to the document license, anyway yours is a good point about this field. – Fabrizio Calderan loves trees Apr 11 '13 at 10:53
  • For the licensing statement you could use the [`small` element](http://www.w3.org/TR/html5/text-level-semantics.html#the-small-element) (instead the `p`, or if a containing block element is needed, `div`>`small`). I'd still use a `dl` for the contact details (or 2 `div` elements alternatively). Another possibility would be to use one `dl` for everything and add two `address` elements inside of this list. – unor Apr 11 '13 at 16:13
1

So, whitout adding extra markup as you ask, there's only one solution, using pseudoelements for the link element and setting this as a block element:

footer a:after {
  content: "";
  display: block;
}

But for me, this is not very semantic because you should wrap that content is something else.

pzin
  • 4,032
  • 2
  • 25
  • 47
1

I see that semantically as a <dl>.

user207421
  • 289,834
  • 37
  • 266
  • 440
-2

With CSS you could probably solve this problem:

footer > a:before{
  content: "<br/>"
}
Joachim VR
  • 2,252
  • 1
  • 14
  • 24