Comments on: The Semantic Code http://fadtastic.net/2006/10/19/the-semantic-code/ thoughts on | comments about | examples of } web design trends. Fri, 25 Jul 2008 10:23:32 +0000 http://wordpress.org/?v=2.1.2 By: Johan http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6121 Johan Thu, 19 Oct 2006 12:19:32 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6121 It becomes very easy to use semantic markup when you know the meaning of each tag in your markup. And what their structural meaning in the document is: Are it block elements (eg P, H1), inline elements (textual elements) (eg A, STRONG)and what containers (grouping elements: DIV and SPAN) are. Read about it: http://www.w3.org/TR/html401/struct/global.html#h-7.5.3 One step further is to chose what semantic markup is more suited to use when dealing with search engine optimisation. The excessive use of wrapper divs to control layouts with CSS does not interfere with semantic HTML provided the elements contained in the divs are semantic. For example fluid designs, elastic designs, divs to make IE contain wide floats, etcetera will increase the use of wrapper divs. This is not about presentation but to provide hacks and hoosk to make a layout work as intended. A screen reader does not see divs, since divs have no semantic value to that same screen reader. It becomes very easy to use semantic markup when you know the meaning of each tag in your markup.

And what their structural meaning in the document is: Are it block elements (eg P, H1), inline elements (textual elements) (eg A, STRONG)and what containers (grouping elements: DIV and SPAN) are.

Read about it:
http://www.w3.org/TR/html401/struct/global.html#h-7.5.3

One step further is to chose what semantic markup is more suited to use when dealing with search engine optimisation.

The excessive use of wrapper divs to control layouts with CSS does not interfere with semantic HTML provided the elements contained in the divs are semantic. For example fluid designs, elastic designs, divs to make IE contain wide floats, etcetera will increase the use of wrapper divs.
This is not about presentation but to provide hacks and hoosk to make a layout work as intended. A screen reader does not see divs, since divs have no semantic value to that same screen reader.

]]> By: iface thoughts » Blog Archive » In fadtastic http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6123 iface thoughts » Blog Archive » In fadtastic Thu, 19 Oct 2006 12:35:33 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6123 [...] My third article on Semantic HTML in fadtastic.net is up. It is a kind of follow up to my article on the generic Semantic Markup. [...] […] My third article on Semantic HTML in fadtastic.net is up. It is a kind of follow up to my article on the generic Semantic Markup. […]

]]> By: Abhijit Nadgouda http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6126 Abhijit Nadgouda Thu, 19 Oct 2006 12:41:16 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6126 Good points there Johan. It is true that using <code>div</code> where a HTML tag is meant to be can kill the semantics, but <code>div</code>s are also required for a lot of workarounds. I think as long as the content elements are enclosed in semantic tags, <code>div</code>s should not matter. Good points there Johan. It is true that using div where a HTML tag is meant to be can kill the semantics, but divs are also required for a lot of workarounds. I think as long as the content elements are enclosed in semantic tags, divs should not matter.

]]> By: Johan http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6127 Johan Thu, 19 Oct 2006 12:42:36 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6127 <blockquote> Ofcourse you can always use <div class="heading"> … to make it more expressive,</blockquote> Absolutely wrong idea, I would never allow this practise under any circumstances. … <div class="header"> would be meaningful since you will group all elements like h1, ul (eg for navigation), skip links, … whatever you put in your header.

Ofcourse you can always use <div class="heading"> … to make it more expressive,

Absolutely wrong idea, I would never allow this practise under any circumstances.

… <div class="header"> would be meaningful since you will group all elements like h1, ul (eg for navigation), skip links, … whatever you put in your header.

]]> By: Abhijit Nadgouda http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6128 Abhijit Nadgouda Thu, 19 Oct 2006 12:46:25 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6128 Johan, I completely agree with you that using div for heading is a bad idea. My point was with the ones who try to simulate the semantic code for expressing the meaning. Johan, I completely agree with you that using div for heading is a bad idea. My point was with the ones who try to simulate the semantic code for expressing the meaning.

]]> By: Andrew Faulkner http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6146 Andrew Faulkner Thu, 19 Oct 2006 16:32:25 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6146 A thorough and intelligent article/discussion. I would like to think that as newbie's learn HTML/CSS based designs that they also consider the semantics of how they are coding right from the off. It seems to tie in with compliant coding rather nicely. A thorough and intelligent article/discussion.

I would like to think that as newbie’s learn HTML/CSS based designs that they also consider the semantics of how they are coding right from the off. It seems to tie in with compliant coding rather nicely.

]]> By: XHTML/CSS - You do the design, we do the code. http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6148 XHTML/CSS - You do the design, we do the code. Thu, 19 Oct 2006 17:24:11 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6148 [...] The Semantic Code [...] […] The Semantic Code […]

]]> By: P.J. Onori http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6179 P.J. Onori Thu, 19 Oct 2006 22:10:11 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6179 Very well written and I like the approach your have towards semantic correctness. I think everyone should strive for the highest possible accessibility, and semantically correct code structure, but not always at the cost of innovation. Treating this like a best practice rather than a "do-it-or-else" mentality seems much more open to new ideas and healthy for the psyche. ;) Very well written and I like the approach your have towards semantic correctness. I think everyone should strive for the highest possible accessibility, and semantically correct code structure, but not always at the cost of innovation. Treating this like a best practice rather than a “do-it-or-else” mentality seems much more open to new ideas and healthy for the psyche. ;)

]]> By: cssdesign.dk » Arkiv CSS Quicklinks (04/2006) http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6362 cssdesign.dk » Arkiv CSS Quicklinks (04/2006) Fri, 20 Oct 2006 12:07:45 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6362 [...] Semantic HTML is a way of writing your HTML code such that the HTML tags express what the data is that is enclosed between them. It is about using HTML tags for what they stand for. For example, using h1 instead of div for the title of an article indicates that it is a heading. http://fadtastic.net/2006/10/19/the-semantic-code/ [...] […] Semantic HTML is a way of writing your HTML code such that the HTML tags express what the data is that is enclosed between them. It is about using HTML tags for what they stand for. For example, using h1 instead of div for the title of an article indicates that it is a heading. http://fadtastic.net/2006/10/19/the-semantic-code/ […]

]]> By: links for 2006-10-22 — 7 seconden — Cuiusvis hominis est errare http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6698 links for 2006-10-22 — 7 seconden — Cuiusvis hominis est errare Sun, 22 Oct 2006 12:21:30 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6698 [...] » The Semantic Code » fadtastic - a multi-author web design trends journal (tags: webdesign tutorial) [...] […] » The Semantic Code » fadtastic - a multi-author web design trends journal (tags: webdesign tutorial) […]

]]> By: ~david http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6965 ~david Tue, 24 Oct 2006 00:16:26 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-6965 Have you tried your own page in the "semantic data extractor"? Have you tried your own page in the “semantic data extractor”?

]]> By: Abhijit Nadgouda http://fadtastic.net/2006/10/19/the-semantic-code/#comment-7039 Abhijit Nadgouda Tue, 24 Oct 2006 06:26:26 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-7039 David, I did not understand whether you meant the fadtastic.net or my blog's page when you said your page. But it gave me a chance to sit and see how my blog homepage fairs. I thank you because it had been quite a while since I had done even a XHTML validation. Now that I have cleaned it, if you run the semantic validator against my blog homepage you will see some, not very good, but some results. In general, the semantic validator will fail if the page is not XHTML valid, and unfortunately a lot of third party widgets contribute to the invalidation. David, I did not understand whether you meant the fadtastic.net or my blog’s page when you said your page. But it gave me a chance to sit and see how my blog homepage fairs. I thank you because it had been quite a while since I had done even a XHTML validation. Now that I have cleaned it, if you run the semantic validator against my blog homepage you will see some, not very good, but some results.

In general, the semantic validator will fail if the page is not XHTML valid, and unfortunately a lot of third party widgets contribute to the invalidation.

]]> By: Mark http://fadtastic.net/2006/10/19/the-semantic-code/#comment-7183 Mark Wed, 25 Oct 2006 00:18:46 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-7183 This is a good reminder of how I should be doing things. The header (h1, h2, etc.) tags are a great example of what was a bad habit for me. Habits can be hard to break and I think there are a lot of folks out there that just got out of the habit (or never got INTO the habit) of using the good old h1-h6 tags as they were intended. My personal opinion is that the trend of small fonts, even pixel fonts if you will, was what drove designers to shun the monstrous size of the h1. As that trend is on the wane (possibly out even), designers, myself included, need the help of gentle reminders like this article to rehabilitate our thinking of markup in general. Thank. This was a good read. This is a good reminder of how I should be doing things. The header (h1, h2, etc.) tags are a great example of what was a bad habit for me. Habits can be hard to break and I think there are a lot of folks out there that just got out of the habit (or never got INTO the habit) of using the good old h1-h6 tags as they were intended. My personal opinion is that the trend of small fonts, even pixel fonts if you will, was what drove designers to shun the monstrous size of the h1. As that trend is on the wane (possibly out even), designers, myself included, need the help of gentle reminders like this article to rehabilitate our thinking of markup in general. Thank. This was a good read.

]]> By: OPC eBusiness Toolbox » The Semantic Code http://fadtastic.net/2006/10/19/the-semantic-code/#comment-7186 OPC eBusiness Toolbox » The Semantic Code Wed, 25 Oct 2006 00:23:04 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-7186 [...] Abhijit Nadgouda discusses the benefits of semantic HTML [...] […] Abhijit Nadgouda discusses the benefits of semantic HTML […]

]]> By: Der semantische Code - Markup Journal http://fadtastic.net/2006/10/19/the-semantic-code/#comment-8048 Der semantische Code - Markup Journal Sun, 29 Oct 2006 12:22:27 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-8048 [...] Im Beitrag The Semantic Code auf fadtastic erhält man eine Definition zu semantischem HTML. Außerdem werden die Vorteile und das Potential des sinnhaften Codes beleuchtet. [...] […] Im Beitrag The Semantic Code auf fadtastic erhält man eine Definition zu semantischem HTML. Außerdem werden die Vorteile und das Potential des sinnhaften Codes beleuchtet. […]

]]> By: Max Design - standards based web design, development and training » Some links for light reading (24/10/06) http://fadtastic.net/2006/10/19/the-semantic-code/#comment-12026 Max Design - standards based web design, development and training » Some links for light reading (24/10/06) Sun, 19 Nov 2006 01:17:48 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-12026 [...] The Semantic Code [...] […] The Semantic Code […]

]]> By: Interacciones : Blog Archive : Lo interesante en esta semana http://fadtastic.net/2006/10/19/the-semantic-code/#comment-12646 Interacciones : Blog Archive : Lo interesante en esta semana Fri, 24 Nov 2006 19:14:06 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-12646 [...] Fadtastic: The Semantic Code Se trata de generar el código para que los lectores humanos y robots sepan de qué se trata. [...] […] Fadtastic: The Semantic Code Se trata de generar el código para que los lectores humanos y robots sepan de qué se trata. […]

]]> By: Importance Of Heading Structure on iface thoughts http://fadtastic.net/2006/10/19/the-semantic-code/#comment-26444 Importance Of Heading Structure on iface thoughts Sat, 27 Jan 2007 12:40:37 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-26444 [...] It is well known that headings contributes to better SEO as well as semantic HTML. However, it also impacts the accessibility, for which using the heading structure is necessary. [...] […] It is well known that headings contributes to better SEO as well as semantic HTML. However, it also impacts the accessibility, for which using the heading structure is necessary. […]

]]> By: · Hey-Girl.Org · http://fadtastic.net/2006/10/19/the-semantic-code/#comment-115326 · Hey-Girl.Org · Wed, 17 Oct 2007 21:22:09 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-115326 [...] return in a search. It increases your page rank and makes the page look tidy without CSS. Check out this article to learn [...] […] return in a search. It increases your page rank and makes the page look tidy without CSS. Check out this article to learn […]

]]> By: Web Design in Malta by RudiBela http://fadtastic.net/2006/10/19/the-semantic-code/#comment-201037 Web Design in Malta by RudiBela Thu, 17 Jan 2008 09:05:51 +0000 http://fadtastic.net/2006/10/19/the-semantic-code/#comment-201037 [...] Meaning of Semantics Writing Semantic HTML The semantic Code Semantic code: What? Why? How? Semantics, HTML, XHTML, and Structure Share and Enjoy: These icons [...] […] Meaning of Semantics Writing Semantic HTML The semantic Code Semantic code: What? Why? How? Semantics, HTML, XHTML, and Structure Share and Enjoy: These icons […]

]]>