CODEWITHSUNDEEP
html
Joshua Eanes
Joshua Eanes

Reputation: 69

html5 semantics - span tag vs p tag

Is it semantically correct to use the span tag the way it's used in the following markup? 

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

Should director and genre be placed inside of p elements? Should you replace the opening div with a p tag? It doesn't seem right to have director and genre just sitting inside of a span tag.

I'm learning html and came across this piece of code in the schema.org documentation. If someone could clarify things for me, I'd be really grateful. Thank you.

Upvotes: 1

Views: 1904

Answers (2)

DA.
DA.

Reputation: 40673

A span has no real semantic meaning by default in HTML. It's merely a way to block off inline content from other inline content.

A div doesn't have any real semantic meaning other. Both divs and spans are generic containers.

If you want to add some semantic meaning to your example, I'd suggest perhaps an unordered list or definition list.

All that said, is what you have incorrect? No, not necessarily--especially if the content, itself, is fairly self explanatory.

Upvotes: 1

Wiktor Stribiżew
Wiktor Stribiżew

Reputation: 626748

As per the validator at http://validator.w3.org/check, this code conforms to HTML5:

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>
</body>
</html>

EDIT: Speaking about semantics, span tag "doesn't mean anything on its own, but can be useful when used together with the global attributes" (see specifications). Using an attribute-free span tag is meaningless, and indeed, a p tag is what is recommended here.

Upvotes: 1

Related Questions