Semantic Tags
-
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?
-
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
-
-
I don't see how
<div class="article">
conveys any less meaning than<article>
.
It's the difference betweenThis 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 ;)
-
<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.
-
Ahhh! Kill it! Zee goggles! They do nothing!
-
HTML and CSS may both be languages, but neither deserves that kind of torturous abuse…
-
.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?
-
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…
-
.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?
-
display
is probably one of the worst things in CSS, but it's so indispensable for fighting the broken box model.
-
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?
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.
-
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.
-
Are structure and appearance completely separable?
It's worth aiming for, if you want to support multiple devices.
-
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>
-
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!
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!
-
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.
-
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.
-
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 anarticle
.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.
-
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.
-
introducing new tags wasn't really necessary
Right, I think I get what you mean. We don't need these newfangled
if
statements. Clearlygoto
is all you need.
-
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!
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!
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!I say what you said before with more fancy tags!
Yes!
Filed Under: quoting is annoying!
-
I'm going to leave this here (even though this spec has a brand new version).
-
I warn people of caveats and this is the attitude I get
-
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!
-
Facts are a to bitching.
-
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.
-
There is some good stuff for web as well. Like
<nav>
. Extremely useful for accessibility features.
-
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 usingclass="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.
-
I know that, for example, search engines will put less weight on sections of a page inside
<aside>
tags.