﻿<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Travis Miller &#187; semantic markup</title>
	<atom:link href="http://www.electrumdigital.com/tag/semantic-markup/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.electrumdigital.com</link>
	<description>Web Developer for Hire</description>
	<lastBuildDate>Thu, 22 Jul 2010 14:17:43 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Toward Better Buttons</title>
		<link>http://www.electrumdigital.com/2009/09/toward-better-buttons/</link>
		<comments>http://www.electrumdigital.com/2009/09/toward-better-buttons/#comments</comments>
		<pubDate>Tue, 22 Sep 2009 22:31:49 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[XHTML & CSS]]></category>
		<category><![CDATA[semantic markup]]></category>

		<guid isPermaLink="false">http://www.electrumdigital.com/?p=111</guid>
		<description><![CDATA[I see this a lot:

&#60;input type=&#34;submit&#34; class=&#34;button&#34; value=&#34;Save Changes&#34; /&#62;

Because the &#60;input /&#62; element can represent many things other than a button&#8212;and because many browsers still don't support attribute selectors, such as input[type=button]&#8212;the author has added class="button" for the sole purpose of giving the stylesheet something to match on.
May I suggest a better way?


&#60;button type=&#34;submit&#34;&#62;Save [...]]]></description>
			<content:encoded><![CDATA[<p>I see this a lot:</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;submit&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Save Changes&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span></pre></div></div>

<p>Because the <code class="html">&#60;input /&#62;</code> element can represent many things <em>other</em> than a button&#8212;and because many browsers still don't support attribute selectors, such as <code class="css">input[type=button]</code>&#8212;the author has added <code class="html">class="button"</code> for the sole purpose of giving the stylesheet something to match on.</p>
<p>May I suggest a better way?</p>
<p><span id="more-111"></span></p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">button</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;submit&quot;</span>&gt;</span>Save Changes<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">button</span>&gt;</span></pre></div></div>

<p>Now our stylesheet can simply use the selector <code class="css">button</code>, and we don't have to add any extra classes to our markup. Overall, it makes for cleaner, more concise, and more semantically descriptive code.</p>
<p>That one isn't so bad, but this one is:</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;image&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button.gif&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Save Changes&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span></pre></div></div>

<p>This is technically valid under <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> 1.0 Transitional, but not under <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> 1.0 Strict, and it's a bad idea in either case.</p>
<p>Why? Because it couples semantics with presentation, and that's exactly the sort of thing <acronym title="Cascading Style Sheets">CSS</acronym> exists to prevent. If the client later decides to replace <code>button.gif</code> with <code>newbutton.jpg</code>&#8212;or wants to change all image buttons to text buttons&#8212;you'll have to edit every page to make the change.</p>
<p>Instead, use this markup:</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">button</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;submit&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;submit&quot;</span>&gt;</span>Save Changes<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">button</span>&gt;</span></pre></div></div>

<p>...and use your favorite <a href="http://css-tricks.com/css-image-replacement/"><acronym title="Cascading Style Sheets">CSS</acronym> image replacement</a> technique to <a href="http://www.alistapart.com/articles/understandingprogressiveenhancement/">progressively enhance</a> the document for graphical user agents. I typically use something like this:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">button<span style="color: #6666ff;">.submit</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* to suppress default button styling */</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* to suppress default button styling */</span>
    <span style="color: #000000; font-weight: bold;">background-image</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000;">&quot;button.gif&quot;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">128px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">24px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-indent</span><span style="color: #00AA00;">:</span> <span style="color: #933;">-9999px</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* to hide the plain text */</span>
    <span style="color: #000000; font-weight: bold;">outline</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* suppress the dotted hairline border */</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Now you'll only have to edit one file&#8212;the stylesheet. Yes, we've re-introduced classes, but in this case it actually <em>helps</em> us separate concerns. You can define a base <code class="css">button</code> style, and then define styles for <code class="css">button.submit</code>, <code class="css">button.cancel</code>, <code class="css">button.delete</code>, <code class="css">button.help</code>, and so on&#8212;each one pulling in the appropriate <code class="css">background-image</code> and specifying the appropriate dimensions.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.electrumdigital.com/2009/09/toward-better-buttons/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
