Semantic Markup: Line Break After Link

Question

I want to:

1. Display a series of links, each on a new line
2. Maintain the links' variable width and text-wrapping ability
3. Constrain the mouse-hover area of each link to its actual content
4. Keep the links inside of the content flow

The best solution I can think of is

<div>
    <a href="">Text</a>
</div>
<div>
    <a href="">Text</a>
</div>

, but I don't like adding the non-semantic <div>. I tried using a { float: left; clear: both } , but that took the links out of the content flow. To my knowledge, I can't use a pseudo-selector such as :outer-wrapper. Is there a better solution, or are <div> wrappers the best solution?

*I thought of using <ul><li><a>, but I only have one or two links per page, and it doesn't seem resonable to add <ul><li> in place of <div> just to avoid a <div>

Answer 1

This is largely an opinion-based and philosophy issue, a source of endless and useless debates over “semantic markup”, itself a semantically vague concept. But to turn the question to something more constructive, I would ask what it really matters which markup you use. What does it imply in non-CSS rendering, or when assistive software is used?

From this viewpoint, ul is OK if the default rendering, with bullets, is acceptable. Otherwise, use div, or use br between links. Do not try to use just a with styling, since then the links would by default run together, appearing as inline text with no separator.

Answer 2

Options could be: (to wrap them on their content)

1. display:table, to stack them.
2. display:inline-block or,
3. float:left to have them on a line.

For the markup, you can wrap <a> into a <nav> tag. and add a role attribut to distinguished it from or for main-navigation.
http://www.w3.org/TR/wai-aria/roles#landmark_roles

Notes: If nav unneccessary any other tag could be used , such as footer or paragraph. More here : http://www.w3.org/html/wg/drafts/html/master/sections.html#the-nav-element

Thx all

Answer 3

It seems like what you want to put on a page, semantically, is a list of links. So use just that.

ul > li > a { /*whatever you want*/ }

You might consider wrapping the list in a nav, or you could forget the ul altogether and have just

nav > a { display: block; }

Also, don't think all divss are non-semantic. Yes, they don't have a specific meaning, but the spec says they represent their contents. A really great use for a div would be for grouping elements together that have the same theme or function. In your case, I wouldn't have a div that contains just one a, because you'd be right about the div serving as bloat.