Semantic Tags

Bort

HTML5 has been around for a while, but there's one question I never got answered.

New tags like <article>, <nav>, <aside>, etc. are referred to as Semantic Tags where doing something like <div class="article"> is considered unsemantic.

Assuming the word "semantic" is used to identify something that conveys meaning - I don't see how <div class="article"> conveys any less meaning than <article>.

One could argue that the new tags are more about setting standards for identifying sections of a site so browsers, CSS frameworks, and whatever else would be able to speak the same language... but why couldn't that be done with classes?

One can employ new classes in their markup much more easily than new tags, which usually require an update to the standard or an extensive javascript framework. And there's already an established practice of using common class names - "container" is such a classname that is used in Bootstrap.

Is there something I'm missing or are the web people just doing what the web people do?

Kuro

I think it's similar to the <b>bold</b> vs <strong>strong</strong> semantic.
I think when I first heard of that, it was so screen readers for blind people - for example - could more easily tell what was going on on the screen.
This kinda convinced me and I stayed with it.

Also: The whole classes idea is cool and all, but you are thinking kinda small. What about developers in different countries?
<div class="artikel">hey</div> would be the german equicalent to your code. I could start googling for translations of article that sound even less like the English word. And I can promise you those are being used.

Oh, also remember that CSS is starting to get minimized! so you could get <div class="a bg l lo">. Your semantics are lost now!

Having an <article> tag at least creates some consistency. So I appreciate it!

Filed Under: Hope this makes sense somehow :D

Magus

@Bort said:

I don't see how <div class="article"> conveys any less meaning than <article>.

RaceProUK

@Bort said:

I don't see how <div class="article"> conveys any less meaning than <article>.

It's the difference between

This is a div styled to look like an article. Maybe. Depends what the CSS guy's been smoking.

and

This is an article.

The latter is clearly more explicit ;)

Bort

    <div style="display: table;">
        <div style="display: table-row;">
            <div style="display: table-cell;">Name:</div>
            <div style="display: table-cell;">test1</div>
        </div>
        <div style="display: table-row;">
            <div style="display: table-cell;">Address:</div>
            <div style="display: table-cell;">test2</div>
        </div>
    </div>

Not implying anything in particular, just a curiosity.

Onyx

Ahhh! Kill it! Zee goggles! They do nothing!

RaceProUK

HTML and CSS may both be languages, but neither deserves that kind of torturous abuse…

Bort

.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }

<div class="table">
        <div class="row">
            <div class="cell">Name:</div>
            <div class="cell">test1</div>
        </div>
        <div class="row">
            <div class="cell">Address:</div>
            <div class="cell">test2</div>
        </div>
    </div>

Any better?

RaceProUK

No; you're still using CSS to define the structure of the document.

The way it should work:

HTML is the structure
CSS is the shiny

So, why do those display options exist in CSS at all? Simple: XML.
Yes, <?xml-stylesheet type="text/css" href="stylesheet.css"?> is a thing.
Basically, some fool with too much power decided that CSS should also work on XML documents, so CSS had to have structure semantics added.

Still, simpler than using XSL:FO…

Kuro

@Bort said:

.row { display: table; }
.article { display: table-row; }
.table { display: table-cell; }

<div class="row">
<div class="article">
<div class="table">Name:</div>
<div class="table">test1</div>
</div>
<div class="article">
<div class="table">Address:</div>
<div class="table">test2</div>
</div>
</div>

Filed Under: Do you see what is wrong with you code now?

Onyx

display is probably one of the worst things in CSS, but it's so indispensable for fighting the broken box model.

Bort

What if I need to identify a new type of structure? I'm back to using classes. HTML5 added some common structural elements, but it didn't solve the problem.

It's possible the problem isn't really solvable. Are structure and appearance completely separable?

@RaceProUK said:

So, why do those display options exist in CSS at all? Simple: XML.Yes, <?xml-stylesheet type="text/css" href="stylesheet.css"?> is a thing.Basically, some fool with too much power decided that CSS should also work on XML documents, so CSS had to have structure semantics added.

Awesome. Terrible, but awesome.

But a missed opportunity to create XCSS.

RaceProUK

@Bort said:

Are structure and appearance completely separable?

To the puritans of the W3C, yes. To us normal folk… I'll get back to you on that one.

Magus

@Bort said:

Are structure and appearance completely separable?

It's worth aiming for, if you want to support multiple devices.

Bort

I think someone would be just as likely to make this mistake:

<tr>
  <article>
    <table>Name:</table>
    <table>test1</table>
  </article>
  <article>
    <table>Address:</table>
    <table>test2</table>
  </article>
</tr>

Kuro

@Bort said:

HTML5 added some common structural elements, but it didn't solve the problem.

It depends on what you define as "the problem"
If you think "Hey, there are a lot of common usecases we can cover with somewhat better defaults and better semantics" then there you go. Problem solved. Leave future problems to future HTML-versions. Who knows if we need a <3dVideo></3dVideo> tag at some point. No need forcing it. If you hae a special usecase then you are free to use classes to add semantics.

if you think the problem is that you want to completely seperate this stuff for all the future... then good luck!

@Bort said:

I think someone would be just as likely to make this mistake:

I don't think the tr allows for articles as children.

Filed Under: Also table layouts are out!

Bort

@Kuro said:

I think it's similar to the <b>bold</b> vs <strong>strong</strong> semantic.I think when I first heard of that, it was so screen readers for blind people - for example - could more easily tell what was going on on the screen.This kinda convinced me and I stayed with it.

True. I think that's the only difference that truly qualifies as a semantic difference.

RaceProUK

@Kuro said:

Who knows if we need a <3dVideo></3dVideo> tag at some point.

That's more likely to be a <video type="3d">; HTML is a subset of XML/SGML, and IIRC, XML/SGML forbids tag names to start with a number.

Or the 3D will be set by the codec, which, TBH, is more likely.

Bort

@Kuro said:

I don't think the tr allows for articles as children.

So then the standard could say that <div class="row"> does not allow <div class="article"> as a child.

I guess all I was trying to say is that syntax is not semantics and that introducing new tags wasn't really necessary - we could have just as easily agreed that class="article" is how one specifies an article.

@Kuro said:

If you think "Hey, there are a lot of common usecases we can cover with somewhat better defaults and better semantics" then there you go. Problem solved. Leave future problems to future HTML-versions. Who knows if we need a <3dVideo></3dVideo> tag at some point. No need forcing it. If you hae a special usecase then you are free to use classes to add semantics.

I'm having deja-vu - I've had this conversation on here before. Basically what I wanted was angular.js built-in.

Nothing to see here.

Onyx

@Kuro said:

I don't think the tr allows for articles as children.

<table>, <thead>, <tbody> and <tfoot> only allow for <tr> as children. <tr> allows only for <td> and <th>. You can get into troubles with JS templating engines due to that:

<table>
{{#rows}}
<tr> <!-- snip --> </tr>
{{/rows}}
</table>

won't render, the HTML parser will give you just an empty table.

However:

<table>
<!-- {{#rows}} -->
<tr> <!-- snip --> </tr>
<!-- {{/rows}} -->
</table>

comments are also accepted anywhere, so the above is a workaround of sorts.

Magus

@Bort said:

introducing new tags wasn't really necessary

Right, I think I get what you mean. We don't need these newfangled if statements. Clearly goto is all you need.

Kuro

@RaceProUK said:

That's more likely to be a <video type="3d">; HTML is a subset of XML/SGML, and IIRC, XML/SGML forbids tag names to start with a number.

Or the 3D will be set by the codec, which, TBH, is more likely.

<threedeevideo></threedeevideo>

Filed Under: Good job being pedantic, though!

@Bort said:

So then the standard could say that <div class="row"> does not allow <div class="article"> as a child.

But classes are completely arbitrary strings. As outline before, calling your class "a" is completely valid!

@Bort said:

we could have just as easily agreed that class="article" is how one specifies an article.

and leave out all the programmers that write their CSS in another language? Good job!
You'd have to change the CSS-standard as well now. Also you'd have to make CSS mandatory (which is not yet 100% through, right?). And it'd now have a different task, which would be specifying semantics not styling things!

@Onyx said:

I say what you said before with more fancy tags!

Yes!

Filed Under: quoting is annoying!

JBert

I'm going to leave this here (even though this spec has a brand new version).

hCard 1.0 - Microformats Wiki

Onyx

I warn people of caveats and this is the attitude I get

Kuro

The attidude of me saying "Yes"??Thats called agreeing and is usually seen as something positive!

Filed Under: Unless a PHB agrees with you. In that case you should probably start crying!

Onyx

Facts are a to bitching.

Eldelshell

Take into account that HTML is for documents. That's what it was made for. That we later started using it for other crazy shit is another story.

Anyway, it's stupid, because with HTML5 we still get H1, H2 and they invent this article crap, like we are all writing a blog or a newspaper.

Onyx

There is some good stuff for web as well. Like <nav>. Extremely useful for accessibility features.

EvanED

@Bort said:

I guess all I was trying to say is that syntax is not semantics and that introducing new tags wasn't really necessary - we could have just as easily agreed that class="article" is how one specifies an article.

I would say to some extent I agree, but to another extent, perhaps I was using class="article" long before "you" standardized that class. So making it a tag not just "elevates it" and provides a way (at just the tag level) to define legal documents, but it separates things into the class namespace (not standardized) and tag namespace (standardized). There are other options (e.g. reserve some special prefix of classes), but they're somewhat ugly.

ben_lubar

I know that, for example, search engines will put less weight on sections of a page inside <aside> tags.