What tag should be used for short text like “back to top” , “Read more” etc?

Question

What tag should be used for short text like.

Back to top

Read more

is <p> appropirate or something else should be use. because these are not paragraph.

Which is more semantic

<p><a href="#mainWrapper">Back to top</a></p>

or

<a href="#mainWrapper">Back to top</a>

or

<div><a href="#mainWrapper">Back to top</a></div>

Answer 1

In general you should use the anchor <a> tag.

Nesting an <a> inside a <p> is perfectly valid, but in general the <p> should be reserved for paragraphs of text. Since yours is just a link, the <a> tag alone will probably be the most recommended.

If you want your link to appear as a block element, simply style it with display: block;. The fact that the <a> tag is normally displayed inline is only because it is its default style.

Answer 2

Anchor tag

<a href="#">Back to top</a>

<a href="#">Read more</a>

You can embed an anchor tag inside a block element. So something like this

<p><a href="#">Back to top</a></p>

Answer 3

Inline elements must be enclosed inside block level elements, so this is the basic approach:

<p><a href="#">Back to top</a></p>

Usually though the <a> element is already inside a <div> tag so the <p> isn't absolutely necessary but it is more semantically correct – it's still a paragraph of text even if there's only a few words in it.

Answer 4

There's no obvious semantic tag for such.

• Perhaps you don't really need a tag there at all! Please check for this case.

• If your "short texts" are links, then you obviously need <a href=. If you need a CSS style for the text, you can put it into the a tag too.

* If you need a tag for structuring only or to hang CSS styles from, then use <span>.