<?xml version="1.0" encoding="utf-8"?>
<feed xml:lang="en-us" xmlns="http://www.w3.org/2005/Atom"><title>Simon Willison's Weblog: semantic</title><link href="http://simonwillison.net/" rel="alternate"/><link href="http://simonwillison.net/tags/semantic.atom" rel="self"/><id>http://simonwillison.net/</id><updated>2006-12-06T16:35:04+00:00</updated><author><name>Simon Willison</name></author><entry><title>WYMeditor</title><link href="https://simonwillison.net/2006/Dec/6/wymeditor/#atom-tag" rel="alternate"/><published>2006-12-06T16:35:04+00:00</published><updated>2006-12-06T16:35:04+00:00</updated><id>https://simonwillison.net/2006/Dec/6/wymeditor/#atom-tag</id><summary type="html">
    
&lt;p&gt;&lt;strong&gt;&lt;a href="http://www.wymeditor.org/en/"&gt;WYMeditor&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
A semantic rich text editor that appears not to suck!


    &lt;p&gt;Tags: &lt;a href="https://simonwillison.net/tags/javascript"&gt;javascript&lt;/a&gt;, &lt;a href="https://simonwillison.net/tags/richtext"&gt;richtext&lt;/a&gt;, &lt;a href="https://simonwillison.net/tags/semantic"&gt;semantic&lt;/a&gt;&lt;/p&gt;



</summary><category term="javascript"/><category term="richtext"/><category term="semantic"/></entry><entry><title>Defending Structural Markup</title><link href="https://simonwillison.net/2003/May/4/structuralMarkup/#atom-tag" rel="alternate"/><published>2003-05-04T14:20:02+00:00</published><updated>2003-05-04T14:20:02+00:00</updated><id>https://simonwillison.net/2003/May/4/structuralMarkup/#atom-tag</id><summary type="html">
    &lt;p&gt;I've been somewhat taken by surprise by the latest round of anti-&lt;acronym title="Cascading Style Sheets"&gt;CSS&lt;/acronym&gt; rants (initiated by &lt;a href="http://www.livejournal.com/users/jwz/193866.html" title="jwz: CSS is BS"&gt;JWZ&lt;/a&gt;, followups &lt;a href="http://www.technorati.com/cosmos/links.html?url=http%3A%2F%2Fwww.livejournal.com%2Fusers%2Fjwz%2F193866.html" title="technorati link cosmos for JWZ&amp;apos;s rant"&gt;all over the place&lt;/a&gt;), mainly because I've been using &lt;acronym title="Cascading Style Sheets"&gt;CSS&lt;/acronym&gt; for long enough now that I'd started to forget about the legions of web developers out there who haven't yet realised what they're missing. Instead of getting stuck in to dissecting other people's complaints I'm just going to lay down a few of my own core beliefs.&lt;/p&gt;

&lt;ol&gt;
 &lt;li&gt;&lt;strong&gt;If you work with the web professionally and you have not yet started using &lt;acronym title="Cascading Style Sheets"&gt;CSS&lt;/acronym&gt;, you are doing both yourself, your clients and your profession a disservice.&lt;/strong&gt;&lt;/li&gt;
 &lt;li&gt;&lt;acronym title="Cascading Style Sheets"&gt;CSS&lt;/acronym&gt; may not be a magic bullet, but it offers far more effective ways of creating attractive web pages than &lt;acronym title="HyperText Markup Language"&gt;HTML&lt;/acronym&gt; alone. "Effective" in this case means maintainable, efficient and accessible.&lt;/li&gt;
 &lt;li&gt;&lt;acronym title="Cascading Style Sheets"&gt;CSS&lt;/acronym&gt; is not rocket science! While browser compatibility issues can certainly cause teething problems, they can be defeated with a little perseverance. Basic &lt;acronym title="Cascading Style Sheets"&gt;CSS&lt;/acronym&gt; (of the kind that can replace several layers of nested tables and spacer gifs) can be picked up in very little time with a huge pay back in increased productivity.&lt;/li&gt;
&lt;li&gt;You don't have to ditch layout tables and stop using about presentational markup to begin to enjoy the benefits of structural markup and &lt;acronym title="Cascadin gStyle Sheets"&gt;CSS&lt;/acronym&gt;! (&lt;em&gt;Added 30 minutes after initial publication&lt;/em&gt;)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;And now some clarification. The core issue I am interested in isn't &lt;acronym title="Cascading Style Sheets"&gt;CSS&lt;/acronym&gt; vs Tables, it's structural vs presentational markup. To clarify those terms, presentational markup is when you use &lt;acronym title="HyperText Markup Language"&gt;HTML&lt;/acronym&gt; markup tags purely to control the "look" of your site in desktop browsers, while structural markup is when you use tags to provide a logical structure to a document and keep visual display information separate, generally through use of a stylesheet. The two are not mutually exclusive; for practical reasons, it is often necessary to add markup to a document for purely presentational reasons. The trick is to minimise this as much as possible.&lt;/p&gt;

&lt;p&gt;Why is separating structure from presentation a good idea? From a theoretical point of view, the answer should be obvious: separating the two adds a powerful additional layer of abstraction which allows either to be modified without needing to make changes to the other. The practical benefits come in the form of increased accessibility, better maintainability  and greatly reduced amounts of code (compare the size of a presentational &lt;acronym title="HyperText Markup Language"&gt;HTML&lt;/acronym&gt; page to that of one that uses structural markup and &lt;acronym title="Cascading Style Sheets"&gt;CSS&lt;/acronym&gt;). Being able to change the look of a whole site by modifying a single &lt;acronym title="Cascading Style Sheets"&gt;CSS&lt;/acronym&gt; file is Finally, the ability to re-use content is greatly increased as the clean structure makes it far easier for content to be remoulded for other distribution mediums.&lt;/p&gt;

&lt;p&gt;It is true that there are some things (in particular relating to layout) that cannot yet be reliably achieved using &lt;acronym title="Cascading Style Sheets"&gt;CSS&lt;/acronym&gt; rather than presentational tables, almost entirely due to bugs in modern browser implementations of &lt;acronym title="Cascading Style Sheets"&gt;CSS&lt;/acronym&gt;. It is also true that there are a lot of layout effects that cannot be achieved using purely presentational markup. All web designers should be aware that they are working within the limitations of their medium - if you want pixel perfect control of how something appears then go and play with Flash (and throw universal access to content to the wind). Alternatively, the "transitional" approach where presentational markup is used only when there is no other alternative) is a perfectly valid way approach to modern web design.&lt;/p&gt;

&lt;p&gt;Enough ranting: I'm going to put my money where my mouth is. Over the next few weeks I will give this blog over to a complete course in structural &lt;acronym title="HyperText Markup Language"&gt;HTML&lt;/acronym&gt; and &lt;acronym title="Cascading Style Sheets"&gt;CSS&lt;/acronym&gt;, aimed at web developers who know their way around &lt;acronym title="HyperText Markup Language"&gt;HTML&lt;/acronym&gt; but haven't yet come to terms with &lt;acronym title="Cascading Style Sheets"&gt;CSS&lt;/acronym&gt; - kind of like &lt;a href="http://diveintoaccessibility.org/"&gt;Dive Into Accessibility&lt;/a&gt; with a different focus. I haven't planned this, so I have no idea how long it will take or exactly what it will cover. I'm hoping it will lead to some lively discussions and help drag a few more web developers out of the 90s.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Update:&lt;/strong&gt; Having re-read the above it doesn't quite say what I wanted it to. My key point was going to be that CSS may not be perfect, and it may not yet be a complete replacement for presentational markup, but it's an ultra-powerful tool that is ready to be used &lt;em&gt;now&lt;/em&gt; and should have a place in any web professional's toolbox. The promise of a tutorial series still stands.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Update 2:&lt;/strong&gt; I've &lt;a href="/2003/May/06/cssTutorialDelayed/" title="Delay to the start of my CSS tutorial series"&gt;delayed&lt;/a&gt; the planned start of my &lt;acronym title="Cascading Style Sheets"&gt;CSS&lt;/acronym&gt; tutorial series by a week or two.&lt;/p&gt;
    
        &lt;p&gt;Tags: &lt;a href="https://simonwillison.net/tags/css"&gt;css&lt;/a&gt;, &lt;a href="https://simonwillison.net/tags/cssaintrocketscience"&gt;cssaintrocketscience&lt;/a&gt;, &lt;a href="https://simonwillison.net/tags/html"&gt;html&lt;/a&gt;, &lt;a href="https://simonwillison.net/tags/jwz"&gt;jwz&lt;/a&gt;, &lt;a href="https://simonwillison.net/tags/semantic"&gt;semantic&lt;/a&gt;, &lt;a href="https://simonwillison.net/tags/structural"&gt;structural&lt;/a&gt;&lt;/p&gt;
    

</summary><category term="css"/><category term="cssaintrocketscience"/><category term="html"/><category term="jwz"/><category term="semantic"/><category term="structural"/></entry><entry><title>Arouse your PC</title><link href="https://simonwillison.net/2002/Sep/12/arouseYourPC/#atom-tag" rel="alternate"/><published>2002-09-12T23:45:08+00:00</published><updated>2002-09-12T23:45:08+00:00</updated><id>https://simonwillison.net/2002/Sep/12/arouseYourPC/#atom-tag</id><summary type="html">
    &lt;p&gt;&lt;a href="http://scriptingnews.userland.com/backissues/2002/09/12#romanticWeb"&gt;Dave Winer&lt;/a&gt;: &lt;q cite="http://scriptingnews.userland.com/backissues/2002/09/12#romanticWeb"&gt;Why be Semantic when you can be Romantic?&lt;/q&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="http://www.disobey.com/dnn/2002/09/index.shtml#001375"&gt;Morbus Iff&lt;/a&gt;:&lt;/p&gt;
&lt;blockquote cite="http://www.disobey.com/dnn/2002/09/index.shtml#001375"&gt;&lt;p&gt;
Well, buddy ol' pal, the pornoWeb already exists. The Semantic Web is all about making computers aroused, not humans. When computers are aroused, they're much happier pleasing the idiot desires of us fleshlings. So, really, the Semantic Web is about survival and prevention - I'd much rather have happy, complacent computers than angry robots plotting to overthrow the human regime.
&lt;/p&gt;&lt;/blockquote&gt;

&lt;p&gt;I'm pretty sure it's bad manners to quote an entire post like that but Morbus's comment just didn't seem to work if I broke it up any smaller :) To make up for it, here's an extra plug for the &lt;a href="http://www.disobey.com/dnn/" title="it rocks"&gt;Disobey Nonsense Network&lt;/a&gt; (and a plug for &lt;a href="http://www.disobey.com/amphetadesk/" title="it rocks too"&gt;AmphetaDesk&lt;/a&gt;as well, a very cool desktop RSS aggregator).&lt;/p&gt;
    
        &lt;p&gt;Tags: &lt;a href="https://simonwillison.net/tags/dave-winer"&gt;dave-winer&lt;/a&gt;, &lt;a href="https://simonwillison.net/tags/morbusiff"&gt;morbusiff&lt;/a&gt;, &lt;a href="https://simonwillison.net/tags/semantic"&gt;semantic&lt;/a&gt;&lt;/p&gt;
    

</summary><category term="dave-winer"/><category term="morbusiff"/><category term="semantic"/></entry></feed>