Comments on: Semantic uses of <div> HTML tag http://www.flexewebs.com/semantix/semantic-uses-of-div-html-tag/ Guidelines for developing quality user interfaces Mon, 06 Feb 2012 00:18:33 +0000 hourly 1 http://wordpress.org/?v=3.3 By: Daniel http://www.flexewebs.com/semantix/semantic-uses-of-div-html-tag/comment-page-1/#comment-11062 Daniel Sun, 26 Sep 2010 12:32:12 +0000 http://www.flexewebs.com/semantix/?p=21#comment-11062 Hi Jason, I agree with you about <div> semantic is division. But if <div> means division, <span> means span (extension). That are its own semantic, its own meaning, not the meaning inferred to its content, that is what we look for when talking about semantic code. Even so, I think both have a very important semantic roll that is to mean nothing but structure. When using <div> and <span> we are saying, hey!! I don't mean nothing, I'm not a paragraph, not a tabular content, not a list, just a chunk of content. So to use it properly is very important. Not to abuse of them is essential for creating semantic structures. But, as you say, we can use them more semanticly just applying classes and ids with a proper meaning that will be inherited by all its content. A couple of days ago, I was hard arguing (888 chat lines) with my friend Waldo about that. He was defending that <div> and <span> are just structural and there was no way to give meaning to them cause machines doesn't understand them as they do with <tags>. But I'd like to point out few nuances about that. 1. First. Which machines are we talking about? Accessibility tools, Google...? They all are systems created to satisfy human needs. They understand what we want them to understand. 2. Second. There are a lot of classes and other html attributes that already have meaning for those systems, as for example class="vote" or rel="tag" and that are becoming standards. Yes, I'm talking about Microformats. And its function is to transfer a meaning that at the end will be useful for humans for example at the time of distinguishing which result on Google's SERP is more convenient for them. 3. Third point. w3c does not create standards, we do!! They "just" put some order in this cybernetic world and try to give a guide of which are the best practices and uses. HTML 5 exists because of semantic needs that before were filled with classes. The evolution of the web brings changes on users needs, and because of that, system must adapt to them and be better tools, more semantic and "human". That said, you will see, Jason, that I agree with you on the semantic meaning of classes over a <tag>, but not only a <div> or an <span>, over any <tag>. But let not try to see semantic meaning where there isn't. <div> is essentially structural if not accompanied by a microformat. And Waldo, my dear, semantics are semantics who ever comes to read the information. Is an absolute concept. No matters if no one can read it now. Doesn't matter if in a web context its not relevant, cause its not an standard yet. The meaning still there, waiting its own time of glory!! ;) Oh! one more think, dress up your avatar, Waldo, please. Seeing your nude chest is not serious for a public argument, jeje Thanks Jason, and still writing about semantics. Hi Jason,
I agree with you about <div> semantic is division. But if <div> means division, <span> means span (extension). That are its own semantic, its own meaning, not the meaning inferred to its content, that is what we look for when talking about semantic code.
Even so, I think both have a very important semantic roll that is to mean nothing but structure. When using <div> and <span> we are saying, hey!! I don’t mean nothing, I’m not a paragraph, not a tabular content, not a list, just a chunk of content. So to use it properly is very important. Not to abuse of them is essential for creating semantic structures.
But, as you say, we can use them more semanticly just applying classes and ids with a proper meaning that will be inherited by all its content.
A couple of days ago, I was hard arguing (888 chat lines) with my friend Waldo about that. He was defending that <div> and <span> are just structural and there was no way to give meaning to them cause machines doesn’t understand them as they do with <tags>. But I’d like to point out few nuances about that.
1. First. Which machines are we talking about? Accessibility tools, Google…? They all are systems created to satisfy human needs. They understand what we want them to understand.
2. Second. There are a lot of classes and other html attributes that already have meaning for those systems, as for example class="vote" or rel="tag" and that are becoming standards. Yes, I’m talking about Microformats. And its function is to transfer a meaning that at the end will be useful for humans for example at the time of distinguishing which result on Google’s SERP is more convenient for them.
3. Third point. w3c does not create standards, we do!! They "just" put some order in this cybernetic world and try to give a guide of which are the best practices and uses. HTML 5 exists because of semantic needs that before were filled with classes. The evolution of the web brings changes on users needs, and because of that, system must adapt to them and be better tools, more semantic and "human".
That said, you will see, Jason, that I agree with you on the semantic meaning of classes over a <tag>, but not only a <div> or an <span>, over any <tag>. But let not try to see semantic meaning where there isn’t. <div> is essentially structural if not accompanied by a microformat.

And Waldo, my dear, semantics are semantics who ever comes to read the information. Is an absolute concept. No matters if no one can read it now. Doesn’t matter if in a web context its not relevant, cause its not an standard yet. The meaning still there, waiting its own time of glory!! ;)
Oh! one more think, dress up your avatar, Waldo, please. Seeing your nude chest is not serious for a public argument, jeje

Thanks Jason, and still writing about semantics.

]]> By: waldo http://www.flexewebs.com/semantix/semantic-uses-of-div-html-tag/comment-page-1/#comment-10984 waldo Wed, 22 Sep 2010 13:21:59 +0000 http://www.flexewebs.com/semantix/?p=21#comment-10984 Case closed. thanks for for infinite patience. Case closed. thanks for for infinite patience.

]]> By: Jason Grant, BSc, MSc http://www.flexewebs.com/semantix/semantic-uses-of-div-html-tag/comment-page-1/#comment-10983 Jason Grant, BSc, MSc Wed, 22 Sep 2010 12:48:14 +0000 http://www.flexewebs.com/semantix/?p=21#comment-10983 Waldo, Block/Inline status of an element has nothing to do with semantics. My point is that span means nothing, while div means 'division' (even according to W3C). From that very point it is simple to work out that div has more meaning (semantics) to it than span. What we infer further from that is down to us as developers and using our common sense. It is the case that many standard ways of using divs have been converted into actual tags in HTML5 (examples: header, footer, etc.). This goes further to support my theory. Case closed? Waldo,

Block/Inline status of an element has nothing to do with semantics.

My point is that span means nothing, while div means ‘division’ (even according to W3C).

From that very point it is simple to work out that div has more meaning (semantics) to it than span.

What we infer further from that is down to us as developers and using our common sense.

It is the case that many standard ways of using divs have been converted into actual tags in HTML5 (examples: header, footer, etc.).

This goes further to support my theory.

Case closed?

]]> By: waldo http://www.flexewebs.com/semantix/semantic-uses-of-div-html-tag/comment-page-1/#comment-10978 waldo Wed, 22 Sep 2010 10:30:26 +0000 http://www.flexewebs.com/semantix/?p=21#comment-10978 So in your opinion a DIV has more weight semantically than a Span, just because its 'native nature' is a display:block ? What an interesting point of view. has gained +1 on semantic meaning. remains same level !! poooor Span tags! Block elements and Span elements are mere separators to me, each in it's own display 'realm'. blocks are not semantic (or more semantic) by it's own nature. I'd like to know some other opinions, people, join the conversation! ^_^ So in your opinion a DIV has more weight semantically than a Span, just because its ‘native nature’ is a display:block ?

What an interesting point of view.

has gained +1 on semantic meaning. remains same level !! poooor Span tags!

Block elements and Span elements are mere separators to me, each in it’s own display ‘realm’. blocks are not semantic (or more semantic) by it’s own nature.

I’d like to know some other opinions, people, join the conversation! ^_^

]]> By: Jason Grant, BSc, MSc http://www.flexewebs.com/semantix/semantic-uses-of-div-html-tag/comment-page-1/#comment-10977 Jason Grant, BSc, MSc Wed, 22 Sep 2010 10:15:20 +0000 http://www.flexewebs.com/semantix/?p=21#comment-10977 In this Blog I am using 'semantic' not to mean only 'machine understandable' but human understandable also. Although W3C states that < div > has no semantic meaning associated with it, as developers we will know that using < div > has more weight to it than using a < span > which also according to W3C has no semantic meaning associated with it. So I personally like to make this delineation in my thinking and description of this tag. W3C does not necessarily get everything 100% explained and therefore it is a 'guideline' and not a 'manual'. As developers we need to make some additional inferences in some places to make the code even better and go an extra mile for us and the other people who might want to use it and reuse it. In this Blog I am using ‘semantic’ not to mean only ‘machine understandable’ but human understandable also.

Although W3C states that < div > has no semantic meaning associated with it, as developers we will know that using < div > has more weight to it than using a < span > which also according to W3C has no semantic meaning associated with it.

So I personally like to make this delineation in my thinking and description of this tag.

W3C does not necessarily get everything 100% explained and therefore it is a ‘guideline’ and not a ‘manual’. As developers we need to make some additional inferences in some places to make the code even better and go an extra mile for us and the other people who might want to use it and reuse it.

]]> By: waldo http://www.flexewebs.com/semantix/semantic-uses-of-div-html-tag/comment-page-1/#comment-10976 waldo Wed, 22 Sep 2010 10:10:28 +0000 http://www.flexewebs.com/semantix/?p=21#comment-10976 Do not get me wrong, I do code my css classes semantically, and I believe it should be human understandable, and all the positive impacts that this coding behaviour gives on your project. But to me, the statement that a DIV can be semantic, is a relative percepcion, and conflicts with the common understanding of what 'semanti'c could mean when we speak about web. This would explain why the W3c states DIV tags have no semanting meaning. Do not get me wrong, I do code my css classes semantically, and I believe it should be human understandable, and all the positive impacts that this coding behaviour gives on your project.

But to me, the statement that a DIV can be semantic, is a relative percepcion, and conflicts with the common understanding of what ‘semanti’c could mean when we speak about web.

This would explain why the W3c states DIV tags have no semanting meaning.

]]> By: waldo http://www.flexewebs.com/semantix/semantic-uses-of-div-html-tag/comment-page-1/#comment-10974 waldo Wed, 22 Sep 2010 10:02:24 +0000 http://www.flexewebs.com/semantix/?p=21#comment-10974 Disagree. But our conversation deeps into concepts and definitions, which gets funny, thinking that it started from the semantic meaning of a DIV. <a href="http://en.wikipedia.org/wiki/Semantic_Web" rel="nofollow">Semantic Web</a>: "Semantic Web is a group of methods and technologies to allow <strong>machines</strong> to understand the meaning - or "semantics" - of information on the World Wide Web." I do agree with the Wikipedia and Mr. Tim Berners-Lee.: We're building web so is understandable by machines. The interpretation of our own code by ourselves is in within that definition not necessary. It has nothing to do with making it more undertandable to ourselves. We WERE supposed to understand it from the beggining. Coding for machines so they understand the relations between content should contemplate the already recognized Xhtml tags and not our own nicknaming for certain html tags. Disagree. But our conversation deeps into concepts and definitions, which gets funny, thinking that it started from the semantic meaning of a DIV.

Semantic Web:

“Semantic Web is a group of methods and technologies to allow machines to understand the meaning – or “semantics” – of information on the World Wide Web.”

I do agree with the Wikipedia and Mr. Tim Berners-Lee.: We’re building web so is understandable by machines. The interpretation of our own code by ourselves is in within that definition not necessary.

It has nothing to do with making it more undertandable to ourselves. We WERE supposed to understand it from the beggining. Coding for machines so they understand the relations between content should contemplate the already recognized Xhtml tags and not our own nicknaming for certain html tags.

]]> By: Jason Grant, BSc, MSc http://www.flexewebs.com/semantix/semantic-uses-of-div-html-tag/comment-page-1/#comment-10973 Jason Grant, BSc, MSc Wed, 22 Sep 2010 09:43:23 +0000 http://www.flexewebs.com/semantix/?p=21#comment-10973 @Waldo Major correction coming: Semantic Web/Semantic Markup = 'The act of writing markup/code that conveys meaning to <strong>humans and</strong> machines'. Semantic code impacts on: <ul> <li>Human readability</li> <li>Machine understanding</li> <li>IA of the system</li> <li>Reusability and usability of the system (internal and external)</li> </ul> All of the above points are very important and should not be disregarded in order to build best quality systems. @Waldo Major correction coming:

Semantic Web/Semantic Markup = ‘The act of writing markup/code that conveys meaning to humans and machines’.

Semantic code impacts on:

  • Human readability
  • Machine understanding
  • IA of the system
  • Reusability and usability of the system (internal and external)

All of the above points are very important and should not be disregarded in order to build best quality systems.

]]> By: waldo http://www.flexewebs.com/semantix/semantic-uses-of-div-html-tag/comment-page-1/#comment-10971 waldo Wed, 22 Sep 2010 09:29:30 +0000 http://www.flexewebs.com/semantix/?p=21#comment-10971 I do agree with your point, however i think it would be worthwhile distinguishing between Semantic Web, Semantic Markup and Semantics as a theory. They are not one and the same. Semantic naming conventions are valid, e.g this article from Antonio Lupetti http://woork.blogspot.com/2008/11/css-coding-semantic-approach-in-naming.html The term semantics is a general theory, it is only when applied to a field that its meaning becomes filtered (e.g Semantic Web, Semantic Markup, Semantic Classes). Semantics = ‘The study of how language conveys meaning’ Semantic Web/Semantic Markup = ‘The act of writing markup/code that conveys meaning to machines’ Therefore: Semantic Class Names = ‘The act of writing classes that convey an elements meaning/context’ Class names have no need to be machine readable, their semanticism lies in their conveyed meaning to the intended recipients. Us. I think we have gotten lost in semantics here. I do agree with your point, however i think it would be worthwhile distinguishing between Semantic Web, Semantic Markup and Semantics as a theory. They are not one and the same.

Semantic naming conventions are valid, e.g this article from Antonio Lupetti http://woork.blogspot.com/2008/11/css-coding-semantic-approach-in-naming.html

The term semantics is a general theory, it is only when applied to a field that its meaning becomes filtered (e.g Semantic Web, Semantic Markup, Semantic Classes).

Semantics = ‘The study of how language conveys meaning’

Semantic Web/Semantic Markup = ‘The act of writing markup/code that conveys meaning to machines’

Therefore:
Semantic Class Names = ‘The act of writing classes that convey an elements meaning/context’

Class names have no need to be machine readable, their semanticism lies in their conveyed meaning to the intended recipients. Us.

I think we have gotten lost in semantics here.

]]> By: Jason Grant, BSc, MSc http://www.flexewebs.com/semantix/semantic-uses-of-div-html-tag/comment-page-1/#comment-10970 Jason Grant, BSc, MSc Wed, 22 Sep 2010 09:11:32 +0000 http://www.flexewebs.com/semantix/?p=21#comment-10970 @Waldo You are right, to some extent. However, class names are a major part of the semantic expression vocabulary. Their are the very core of object orientation and as such should be remembered and treated as very important in the overall technical architecture of systems we build. For example, class name such as .node1 is asking for trouble in long term as it does not mean much. Class name such as .page can serve a very easy to comprehend, meaningful and useful role in the system architecture. @Waldo You are right, to some extent.

However, class names are a major part of the semantic expression vocabulary. Their are the very core of object orientation and as such should be remembered and treated as very important in the overall technical architecture of systems we build.

For example, class name such as .node1 is asking for trouble in long term as it does not mean much. Class name such as .page can serve a very easy to comprehend, meaningful and useful role in the system architecture.

]]>