Hi,
I'm pretty new to the web development scene, but thanks to my programming background haven't had too much trouble picking up the basic concepts and methods. However, I want to make sure I learn it right the first time. I can recognize the wisdom in CSS and its effort to seperate content and style. But I am having trouble discerning the optimal degree of seperation.
Should you carry it out to the extent of purging all <b> and <i> tags from your code? But what then? Should corresponding CSS classes be created, .Bold through .Italics? And following the same logic, shouldn't <p> be banished also in favor of <div>?
I guess my basic question is what is the appropriate balance between HTML styling and CSS styling? Is there a rule of thumb dictating which HTML styling elements are ok to use?Originally posted by JKim
Should you carry it out to the extent of purging all <b> and <i> tags from your code?Yes; but not to be replaced with CSS. If you've not yet learned, semantics are a very important aspect of Web development. Simply put, markup what you mean. If you're making a list, mark it up as a list — if you're making a header or otherwise important title, mark it up as a header, and so on.
Now, while <b> and <i> are of course presentational markup, they also hold little to no semantic value. The two more semantically meaningful tags in which take their place is <strong> and <em>, respectively. The reason they are semantically better is because they hold more meaning as to what content should go inside of them.
In the case of <strong>, the point is clear that the text inside of this element should stand out and perhaps even be read in a stronger tone; of course, it also makes the text inside of it rendered in a bold typeface.
Likewise, the <em> element implies the text within it should be emphasized; it implies the text should be stressed on and is rendered in an italicized typeface.Originally posted by JKim
But what then? Should corresponding CSS classes be created, .Bold through .Italics?Nope; as aforementioned, use semantically meaningful markup.Originally posted by JKim
And following the same logic, shouldn't <p> be banished also in favor of <div>?The rule also applies here. The <p> element implies the text inside of it is paragraph data; ergo, it makes sense to use it when marking up a paragraph. The <div> element — while having little semantic value — does actually have some. It defines a division of the page, hence why some people use this element along with CSS for their layouts.
It's just the power of semantics. Using markup to describe the data in which it contains. Note that, a document in which uses semantic markup will be extremely easy to read even with no CSS styling applied to it simply because it makes sense regardless of the style applied due to the correct elements being used in the correct situations.
An example of an unsemantic document would be something like this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
#header {
font-size: 120%;
font-weight: 900;
}
/*]]>*/
</style>
</head>
<body>
<div id="header">My site</div>
Welcome to my site.<br /><br />
Some stuff:<br />
- foo<br />
- bar<br />
- foo<br />
- bar<br />
</body>
</html>The reason this markup is unsemantic is because CSS is being used incorrectly in the place of where semantically meaningful elements should bs used. First off, note that the header of the page is merely a <div> element referencing an id in the CSS to appear as if it is a header. In browsers that do not support CSS (e.g., text-only browsers such as Lynx), it will not be very obvious that it is a header due to unsemantic markup being used. Another thing to note is the excessive use of the line breaks; generally, if your markup is semantic, you will just about never need those because other block-level elements do the job more efficiently.
The next thing to take note of is the list of "some stuff". This is also semantically meaningless because it is merely raw text which is not encapsulated in any elements whatsoever (other than generic parent elements which all other elements are contained within) and using breaks in order to make on appear on each line.
Next, let's look at a semantic version of this same document:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
</head>
<body>
<h1>My site</h1>
<p>Welcome to my site.</p>
<h3>Some stuff</h3>
<ul>
<li>foo</li>
<li>bar</li>
<li>foo</li>
<li>bar</li>
</ul>
</body>
</html>First note that no CSS is used. Why? Merely because it is not needed in a case like this; however, it of course can be used to add additional styling. The header of the document is marked up using an <h1> element defines it as an important piece of information — to search engines and the user alike. This is much better than using an unsemantic element styled with some CSS because it will now appear as an important header in generally all browsers.
Next, rather than using multiple break elements, the <p> element is used for the welcome message. This makes sense because you'd generally have a paragraph of text welcoming the user; or, multiple paragraphs, and in that case, simply use multiple <p> elements.
Moreover, the "some stuff" text is now in an <h3> element, because it holds some importance but of course not as much as a title or subtitle of the page (the importance of your headers goes from 1 being the most important, to 6 being the least important).
Finally, rather than using the incredibly unsemantic and messy multiple break tags to make each list item appear on a new line, we use some semantically meaingful markup — an unordered list. It's a list of items which aren't organized in any particular way. Each one is rendered on a new line (unless you specify otherwise) and therefore the markup is left uncluttered while being semantically meaningful.
There are of course more issues similar to this, (e.g., lying out a FAQ using semantic markup) but I figured I'd present a generally simple one just to present the idea of using semantic markup as opposed to unsemantic markup, and when CSS is good — to apply style to semantic, structural markup — and when it is not good — when there is semantic markup that can be used to create it.Basically use semantic code but the XHTML 1.1 list of elements gives you good indication.Fred -
Your description here should be sticky. It should be FAQ. That is the best 'exemplified' illustration that I've seen.
Now if you had only included some examples of styling the symantic elements, and the inheritance of those.
Most tutorials are NOT layed out that way, and it's really important to us newbies to understand the differences in:
a:hover
img a:hover
text a:hover
and the like.. (in fact, all that I typed above may be complete garbage... like I said, I'm a newbie!)
Johna:link
a:visited
a:hover
a:active
(LoVe HAte)Originally posted by Robert Wellock
a:link
a:visited
a:hover
a:active
(LoVe HAte)
but can't you define different symantec levels of those types of actions, like:
a.plain:link
I'm still trying to figure out all the puncutation...
#= a unique ID
. = ? (a class?)
: = special (like visited, hover, first-letter)
I need to get all the symantic levels sorted out in my head.. but it's all starting to be clearer to me.
JohnOriginally posted by Bigjohn
#= a unique ID
. = ? (a class?)
: = special (like visited, hover, first-letter)
# denotes an ID
. denotes a class
: denotes a pseudo-class
Example:
<div id="navigation">
<!-- This <div> would be called in CSS through #navigation or div#navigation -->
</div>
<div class="entry">
<!-- This <div> would be called in CSS through .entry or div.entry -->
</div>
The Selectutorial (<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/selectutorial/selectors_pseudo_class.htm">http://css.maxdesign.com.au/selectutori ... _class.htm</a><!-- m -->) has a good explanation of pseudo classes.
// freakfred,
very good post! helped me a lot!
No problem guys; glad you enjoyed it. 
I'm also lookng to become more semantec. But I need to know. What would you replace a <div> with? I mean, there's only 6 <hX> elements. What element would you use inplace of <div>'s?
-DanOriginally posted by DanieLTomaS
I'm also lookng to become more semantec. But I need to know. What would you replace a <div> with? I mean, there's only 6 <hX> elements. What element would you use inplace of <div>'s?Sometimes they're the only option though that might not be the case by the time XHTML 2.0 comes around. However, I'd consider them very acceptable if no other tag describes the data in question better. They do, however, describe a division of the page after all.OK, that's good to know. So, is there some kind of Semantecs validator?To put it quite simply, use your best judgement. What does this element mean and how does it describe the content within it? Are we displaying a header? Making a list? Displaying tabulated data? Things like that.interesting...
would you use the table tag or the div tag and more importantly why?Originally posted by Ice3T
would you use the table tag or the div tag and more importantly why?
You should use the table tag if you are displaying tabular data, and use the div tag when marking a division of a page.
-Dan
I'm pretty new to the web development scene, but thanks to my programming background haven't had too much trouble picking up the basic concepts and methods. However, I want to make sure I learn it right the first time. I can recognize the wisdom in CSS and its effort to seperate content and style. But I am having trouble discerning the optimal degree of seperation.
Should you carry it out to the extent of purging all <b> and <i> tags from your code? But what then? Should corresponding CSS classes be created, .Bold through .Italics? And following the same logic, shouldn't <p> be banished also in favor of <div>?
I guess my basic question is what is the appropriate balance between HTML styling and CSS styling? Is there a rule of thumb dictating which HTML styling elements are ok to use?Originally posted by JKim
Should you carry it out to the extent of purging all <b> and <i> tags from your code?Yes; but not to be replaced with CSS. If you've not yet learned, semantics are a very important aspect of Web development. Simply put, markup what you mean. If you're making a list, mark it up as a list — if you're making a header or otherwise important title, mark it up as a header, and so on.
Now, while <b> and <i> are of course presentational markup, they also hold little to no semantic value. The two more semantically meaningful tags in which take their place is <strong> and <em>, respectively. The reason they are semantically better is because they hold more meaning as to what content should go inside of them.
In the case of <strong>, the point is clear that the text inside of this element should stand out and perhaps even be read in a stronger tone; of course, it also makes the text inside of it rendered in a bold typeface.
Likewise, the <em> element implies the text within it should be emphasized; it implies the text should be stressed on and is rendered in an italicized typeface.Originally posted by JKim
But what then? Should corresponding CSS classes be created, .Bold through .Italics?Nope; as aforementioned, use semantically meaningful markup.Originally posted by JKim
And following the same logic, shouldn't <p> be banished also in favor of <div>?The rule also applies here. The <p> element implies the text inside of it is paragraph data; ergo, it makes sense to use it when marking up a paragraph. The <div> element — while having little semantic value — does actually have some. It defines a division of the page, hence why some people use this element along with CSS for their layouts.
It's just the power of semantics. Using markup to describe the data in which it contains. Note that, a document in which uses semantic markup will be extremely easy to read even with no CSS styling applied to it simply because it makes sense regardless of the style applied due to the correct elements being used in the correct situations.
An example of an unsemantic document would be something like this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
#header {
font-size: 120%;
font-weight: 900;
}
/*]]>*/
</style>
</head>
<body>
<div id="header">My site</div>
Welcome to my site.<br /><br />
Some stuff:<br />
- foo<br />
- bar<br />
- foo<br />
- bar<br />
</body>
</html>The reason this markup is unsemantic is because CSS is being used incorrectly in the place of where semantically meaningful elements should bs used. First off, note that the header of the page is merely a <div> element referencing an id in the CSS to appear as if it is a header. In browsers that do not support CSS (e.g., text-only browsers such as Lynx), it will not be very obvious that it is a header due to unsemantic markup being used. Another thing to note is the excessive use of the line breaks; generally, if your markup is semantic, you will just about never need those because other block-level elements do the job more efficiently.
The next thing to take note of is the list of "some stuff". This is also semantically meaningless because it is merely raw text which is not encapsulated in any elements whatsoever (other than generic parent elements which all other elements are contained within) and using breaks in order to make on appear on each line.
Next, let's look at a semantic version of this same document:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
</head>
<body>
<h1>My site</h1>
<p>Welcome to my site.</p>
<h3>Some stuff</h3>
<ul>
<li>foo</li>
<li>bar</li>
<li>foo</li>
<li>bar</li>
</ul>
</body>
</html>First note that no CSS is used. Why? Merely because it is not needed in a case like this; however, it of course can be used to add additional styling. The header of the document is marked up using an <h1> element defines it as an important piece of information — to search engines and the user alike. This is much better than using an unsemantic element styled with some CSS because it will now appear as an important header in generally all browsers.
Next, rather than using multiple break elements, the <p> element is used for the welcome message. This makes sense because you'd generally have a paragraph of text welcoming the user; or, multiple paragraphs, and in that case, simply use multiple <p> elements.
Moreover, the "some stuff" text is now in an <h3> element, because it holds some importance but of course not as much as a title or subtitle of the page (the importance of your headers goes from 1 being the most important, to 6 being the least important).
Finally, rather than using the incredibly unsemantic and messy multiple break tags to make each list item appear on a new line, we use some semantically meaingful markup — an unordered list. It's a list of items which aren't organized in any particular way. Each one is rendered on a new line (unless you specify otherwise) and therefore the markup is left uncluttered while being semantically meaningful.
There are of course more issues similar to this, (e.g., lying out a FAQ using semantic markup) but I figured I'd present a generally simple one just to present the idea of using semantic markup as opposed to unsemantic markup, and when CSS is good — to apply style to semantic, structural markup — and when it is not good — when there is semantic markup that can be used to create it.Basically use semantic code but the XHTML 1.1 list of elements gives you good indication.Fred -
Your description here should be sticky. It should be FAQ. That is the best 'exemplified' illustration that I've seen.
Now if you had only included some examples of styling the symantic elements, and the inheritance of those.
Most tutorials are NOT layed out that way, and it's really important to us newbies to understand the differences in:
a:hover
img a:hover
text a:hover
and the like.. (in fact, all that I typed above may be complete garbage... like I said, I'm a newbie!)
Johna:link
a:visited
a:hover
a:active
(LoVe HAte)Originally posted by Robert Wellock
a:link
a:visited
a:hover
a:active
(LoVe HAte)
but can't you define different symantec levels of those types of actions, like:
a.plain:link
I'm still trying to figure out all the puncutation...
#= a unique ID
. = ? (a class?)
: = special (like visited, hover, first-letter)
I need to get all the symantic levels sorted out in my head.. but it's all starting to be clearer to me.
JohnOriginally posted by Bigjohn
#= a unique ID
. = ? (a class?)
: = special (like visited, hover, first-letter)
# denotes an ID
. denotes a class
: denotes a pseudo-class
Example:
<div id="navigation">
<!-- This <div> would be called in CSS through #navigation or div#navigation -->
</div>
<div class="entry">
<!-- This <div> would be called in CSS through .entry or div.entry -->
</div>
The Selectutorial (<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/selectutorial/selectors_pseudo_class.htm">http://css.maxdesign.com.au/selectutori ... _class.htm</a><!-- m -->) has a good explanation of pseudo classes.
// freakfred,
very good post! helped me a lot!
No problem guys; glad you enjoyed it. I'm also lookng to become more semantec. But I need to know. What would you replace a <div> with? I mean, there's only 6 <hX> elements. What element would you use inplace of <div>'s?-DanOriginally posted by DanieLTomaS
I'm also lookng to become more semantec. But I need to know. What would you replace a <div> with? I mean, there's only 6 <hX> elements. What element would you use inplace of <div>'s?Sometimes they're the only option though that might not be the case by the time XHTML 2.0 comes around. However, I'd consider them very acceptable if no other tag describes the data in question better. They do, however, describe a division of the page after all.OK, that's good to know. So, is there some kind of Semantecs validator?To put it quite simply, use your best judgement. What does this element mean and how does it describe the content within it? Are we displaying a header? Making a list? Displaying tabulated data? Things like that.interesting...
would you use the table tag or the div tag and more importantly why?Originally posted by Ice3T
would you use the table tag or the div tag and more importantly why?
You should use the table tag if you are displaying tabular data, and use the div tag when marking a division of a page.
-Dan