CODEWITHSUNDEEP
htmlcsssemanticsparagraphs
user3546093
user3546093

Reputation:

Usage of <p> tags

As far as I know, p tags create paragraphs. But I often find HTML code where these tags are used for other aims. For example, I found it in a Codecademy exercise:

<div><p>Rex</p></div>

div {
    position: relative;
    display: inline-block;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    border: 2px solid black;
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
}

div p {
    position: relative;
    margin-top: 40px;
    font-size: 12px;
}

It creates a circle with the name Rex in the center of this circle: http://jsfiddle.net/cvT6E. But the word Rex isn't a paragraph, it's just a word!

When I try to replace p tags by span (it seems more logical for me), it doesn't work: http://jsfiddle.net/cvT6E/2/. Why not?

Finally, I would like to know:

1) Is the use of p tags semantically correct in the example?
2) Why isn't the word centred when p tags are replaced by span tags?

Upvotes: 0

Views: 156

Answers (3)

Ali Gajani
Ali Gajani

Reputation: 15091

At first, recall that <p> is a block-level element. Mozilla puts it nicely "Their most significant characteristic is that they typically are formatted with a line break before and after the element (thereby creating a stand-alone block of content). That is, they take up the width of the containers." This explains why there <p> centers and span doesn't.

Furthermore, <p> is meant for paragraphs, so it is more appropriate for representing textual content, hence the semantic is preserved, as you might recognize too. I would suggest using <span> for situations where you do not have a semantic markup available in HTML, and in your case, representing a word or block of text with <span> is not insisted.

Appreciate that you might approach this with a different mindset, although I wouldn't recommend complicating things unless necessary. Observe the markup as stated below.

<p><span>text</span></p>

This would essentially give you the same effect i.e. centering of the "Rex" word in the circle, because <p> is a block-level element, and it can act as a container for the <span> element. Hence, the <span> would effectively inherit the properties of <p> .This is evident from the fact that the text is vertically centered.

enter image description here

The <span> is on the contrary an inline-element, and think of it as a grouper, tying up elements together. Meanwhile, a <div> is an ideal container. Personally, I use <span> when I can't find an appropriate markup element and when I wan't no special properties of <p> or others. I like <span> for it's pureness.

If you strictly want to use <span> and center "Rex" in that circle, you can do this. The last two properties essentially enable you to do just that and the output is shown in the image below.

div span {
    position: relative;
    margin-top: 40px;
    font-size: 12px;
        display:inline-block; 
        vertical-align:middle
}

enter image description here

Upvotes: 2

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

Question 1 is primarily opinion-based, and the answers have no practical implications.

Question 2 has a simple answer: a span element is by definition an inline element (with display: inline), and the text-align property thus does not apply to it (i.e., has no impact on its rendering). You can fix this e.g. by using div instead of span or by using span with the CSS declaration display: block.

Upvotes: 0

Sam Creamer
Sam Creamer

Reputation: 5361

p is often used for displaying paragraphs, but it can also be used for many other things due to its default properties. In this case, span will not work because span has default display:inline.

Upvotes: 1

Related Questions