4 ms·

HTML5 Semantics and Good Coding Practices

37 points by aniketpant 15y ago

po 15y ago
First of all, it's nice to see people getting excited about html5 and to see it being adopted widely... This article however, seems a little bit too excited about jumping into html5 and a little too quick to dismiss the techniques about the past. In the process it makes a few mistakes. A good example would be the <meter> element which the spec specifically states: The meter element also does not represent a scalar value of arbitrary range — for example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value. http://dev.w3.org/html5/spec/Overview.html#the-meter-element http://dev.w3.org/html5/spec/Overview.html#the-meter-element This code is certainly not "bad code": <section> My height is 5 feet and 10 inches. </section> That's perfectly acceptable. I think marking up your height and weight and calling it better is dubious. Some would argue that the meter element itself is a bit dubious. I'm still not sure how I feel about it. A lot of the html5 elements are quite nice but you shouldn't go changing everything over just because it's new.
- aniketpant 15y ago
  It was just an example I made up. Yes there are better ways to use <meter>. Maybe for showing the average rainfall in an area! And the reason for dismissing the techniques in the past is because I have shifted to using HTML5. Even the theme I am using for my website, uses HTML5.
  - po 15y ago
    Your enthusiasm is great and I think will really help motivate a certain audience to get on board the html5 train. I think html5 is absolutely a net positive. However, when I read it I get the feeling that you don't understand that html5 was the standardization of community-grown ad-hoc patterns. The <div id="footer"> pattern isn't evil, it actually inspired <footer>. It's the original! The standardization of bottom-up practices rather than a spec coming down from the mountain on stone tablets is what makes html5 unique. Anyway, my point is that from my point of view, this is a bit too good-vs-evil. But, what do I know? ;-)
    - aniketpant 15y ago
      Very true :) I agree to your points. I guess that my post was a little ambiguous and a little biased. I liked the old way of coding, but HTML5 brought order. And for the part where the id's have helped in giving rise to header, footer, nav and article. Yes, I do agree to all of it. Thank you for your comments. Helped my understand my writing.
- davedx 15y ago
  I don't think the intent of marking up things like height and weight is dubious - isn't that the whole point of the semantic web? That you use semantic markup to explicitly define your information content?
  - aniketpant 15y ago
    I guess we are on the same line over here! Using these small terminologies will help us create a semantic web and help in understanding things better.
  - icebraining 15y ago
    Yeah, but maybe one should use a proper RDFa attribute, like dbpedia-owl:Person/height and dbpedia-owl:Person/weight. HTML5 elements simply aren't detailed enough.
    - aniketpant 15y ago
      I'm really sorry, but I am not aware of RDFa attributes?
      - icebraining 15y ago
        It's in the RDFa Primer [1]; I mean specifically the @property, @about and @typeof attributes, which are used to augment existing HTML elements with RDF semantics.
  - po 15y ago
    Sure, the intent is good. However, would a hypothetical <weight unit=grams>5</weight> be any better than "5gm"? When I see a number followed by the letters 'gm' I know it's a weight in the units of grams. Google knows that too. Making it rely on the markup alone would actually make google dumber and making it understand both would make it more complex. It's better as 5gm. The main advantage is to make it easier to extract using an xml-like api. But at what cost? "5gm" is way easier for people to type so it will always dominate in real text. In my mind, markup is useful for adding context that is hard to extract from the text alone: things like groupings, context, delimitating chapters or articles, etc… I wouldn't use it to declare something to be a weight. You use it to add things that are unspoken otherwise. In the <meter> example, it actually lets you convey previously unknown things such as the min/max range. Maybe if the whole world cared a lot about the differences between different kinds of weights and it was very hard to get from the context of the text, like <catweight> vs. <dogweight> or something, it would be worth marking up. Markup is a form of metadata.
Tichy 15y ago
I still don't understand why anybody would use those fancy new elements instead of divs. The only thing "gained" would be breaking the page in older browsers. What excites me about "HTML5" (and I don't care what the official definition is) are extended capabilities of JavaScript like GeoLocation, Local Storage, Web Sockets and so on.
- aniketpant 15y ago
  The reason for using the "fancy" new elements is quite clear! It makes the code more readable and easy to understand. And as for the part where we "might" break the page in old browsers. I would like to pose a questions. "Aren't we all working towards a developed future?"
- Jgrubb 15y ago
  There are ways around breaking older browsers - https://www.google.com/search?q=html5shiv https://www.google.com/search?q=html5shiv However, I agree with your point(s).
- nikcub 15y ago
  the reason for the new elements isn't to benefit users reading the page, it is to benefit programs reading the page. the google bot, and many other crawlers, parsers etc. already make use of them.
geoffhill 15y ago
These are very welcome improvements, especially in the area of adding a parsable semantic structure to pages. My personal favourite semantic additions are: 1. The itemtype, itemscope and itemprop attributes, for completely unrestricted noun-based semantic markup (especially useful when using a standardized set of information schemas, such as those provided by http://schema.org/ http://schema.org/), 2. The <time> element, to allow easy parsing of time no matter how it is visually displayed, and 3. The <figure> element, which encapsulated pieces of media with their captions, much like a LaTeX figure does.
- aniketpant 15y ago
  I did forget to include <time> Will write on it in my next post. <figure> is a great addition for sure. Helps in improvising a lot of previous codes!

37 points by aniketpant 15y ago

po 15y ago

First of all, it's nice to see people getting excited about html5 and to see it being adopted widely... This article however, seems a little bit too excited about jumping into html5 and a little too quick to dismiss the techniques about the past. In the process it makes a few mistakes. A good example would be the <meter> element which the spec specifically states: The meter element also does not represent a scalar value of arbitrary range — for example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value. http://dev.w3.org/html5/spec/Overview.html#the-meter-element http://dev.w3.org/html5/spec/Overview.html#the-meter-element This code is certainly not "bad code": <section> My height is 5 feet and 10 inches. </section> That's perfectly acceptable. I think marking up your height and weight and calling it better is dubious. Some would argue that the meter element itself is a bit dubious. I'm still not sure how I feel about it. A lot of the html5 elements are quite nice but you shouldn't go changing everything over just because it's new.

aniketpant 15y ago
It was just an example I made up. Yes there are better ways to use <meter>. Maybe for showing the average rainfall in an area! And the reason for dismissing the techniques in the past is because I have shifted to using HTML5. Even the theme I am using for my website, uses HTML5.
- po 15y ago
  Your enthusiasm is great and I think will really help motivate a certain audience to get on board the html5 train. I think html5 is absolutely a net positive. However, when I read it I get the feeling that you don't understand that html5 was the standardization of community-grown ad-hoc patterns. The <div id="footer"> pattern isn't evil, it actually inspired <footer>. It's the original! The standardization of bottom-up practices rather than a spec coming down from the mountain on stone tablets is what makes html5 unique. Anyway, my point is that from my point of view, this is a bit too good-vs-evil. But, what do I know? ;-)
  - aniketpant 15y ago
    Very true :) I agree to your points. I guess that my post was a little ambiguous and a little biased. I liked the old way of coding, but HTML5 brought order. And for the part where the id's have helped in giving rise to header, footer, nav and article. Yes, I do agree to all of it. Thank you for your comments. Helped my understand my writing.
davedx 15y ago
I don't think the intent of marking up things like height and weight is dubious - isn't that the whole point of the semantic web? That you use semantic markup to explicitly define your information content?
- aniketpant 15y ago
  I guess we are on the same line over here! Using these small terminologies will help us create a semantic web and help in understanding things better.
- icebraining 15y ago
  Yeah, but maybe one should use a proper RDFa attribute, like dbpedia-owl:Person/height and dbpedia-owl:Person/weight. HTML5 elements simply aren't detailed enough.
  - aniketpant 15y ago
    I'm really sorry, but I am not aware of RDFa attributes?
    - icebraining 15y ago
      It's in the RDFa Primer [1]; I mean specifically the @property, @about and @typeof attributes, which are used to augment existing HTML elements with RDF semantics.
- po 15y ago
  Sure, the intent is good. However, would a hypothetical <weight unit=grams>5</weight> be any better than "5gm"? When I see a number followed by the letters 'gm' I know it's a weight in the units of grams. Google knows that too. Making it rely on the markup alone would actually make google dumber and making it understand both would make it more complex. It's better as 5gm. The main advantage is to make it easier to extract using an xml-like api. But at what cost? "5gm" is way easier for people to type so it will always dominate in real text. In my mind, markup is useful for adding context that is hard to extract from the text alone: things like groupings, context, delimitating chapters or articles, etc… I wouldn't use it to declare something to be a weight. You use it to add things that are unspoken otherwise. In the <meter> example, it actually lets you convey previously unknown things such as the min/max range. Maybe if the whole world cared a lot about the differences between different kinds of weights and it was very hard to get from the context of the text, like <catweight> vs. <dogweight> or something, it would be worth marking up. Markup is a form of metadata.

Tichy 15y ago

I still don't understand why anybody would use those fancy new elements instead of divs. The only thing "gained" would be breaking the page in older browsers. What excites me about "HTML5" (and I don't care what the official definition is) are extended capabilities of JavaScript like GeoLocation, Local Storage, Web Sockets and so on.

aniketpant 15y ago
The reason for using the "fancy" new elements is quite clear! It makes the code more readable and easy to understand. And as for the part where we "might" break the page in old browsers. I would like to pose a questions. "Aren't we all working towards a developed future?"
Jgrubb 15y ago
There are ways around breaking older browsers - https://www.google.com/search?q=html5shiv https://www.google.com/search?q=html5shiv However, I agree with your point(s).
nikcub 15y ago
the reason for the new elements isn't to benefit users reading the page, it is to benefit programs reading the page. the google bot, and many other crawlers, parsers etc. already make use of them.

geoffhill 15y ago

These are very welcome improvements, especially in the area of adding a parsable semantic structure to pages. My personal favourite semantic additions are: 1. The itemtype, itemscope and itemprop attributes, for completely unrestricted noun-based semantic markup (especially useful when using a standardized set of information schemas, such as those provided by http://schema.org/ http://schema.org/), 2. The <time> element, to allow easy parsing of time no matter how it is visually displayed, and 3. The <figure> element, which encapsulated pieces of media with their captions, much like a LaTeX figure does.

aniketpant 15y ago
I did forget to include <time> Will write on it in my next post. <figure> is a great addition for sure. Helps in improvising a lot of previous codes!