Hi all, just have a questions regarding semantics.
If I have a section with categories and sub-categories, and when a user clicks to the subcatagories, there is a link at the top saying “go back to categories”, how is that correctly marked up.
Surely not:
<p><a href="#">go back to categories</a></p>
As it isn’t a paragrapg of text?
What should I use?
In theory you could just add the link using the anchor tag, but use CSS to set the anchor to display: block; which would give you the ability to mock the appearance without the additional paragraph. Though, I must admit that I would use a paragraph tag there anyway, despite it not being an entire paragraph. You could also consider using span, or something like that, but it’s relatively pointless to avoid the paragraph tag unless you plan to omit the wrapping tag altogether, as explained in the display:block anchor.
Now, since you are trying to use semantic code - I should mention that your list of categories should be just that - an unordered list (ul). That would be the semantic markup for a list of categories. Furthermore, a list of news articles or blog posts (which I assume is what your categories sort, just based on likelihood) should also be marked up as an unordered list.
Use this page as an example, noticing the markup for the 3 news articles and the “Read More” below it which is wrapped in a paragraph tag.
Isn’t it? Capitalisation and punctuation aside, it looks like a perfectly good, albeit short, sentence to me. And a paragraph can be just one sentence.
Before taking a paragraph to be solely a grammatical concept, consider that it is also a structural artifact. From Webster, “A brief composition complete in one typographical section […]”. The OP’s example certainly falls into that category.
