25 May 2004
Defining the terms; as I see them
Summary: My personal opinions on what ‘Content’ and ‘Structure’ mean. Content = Copy & Semantics, Structure = XHTML that defines the logical structure of the document.
Last week I wrote a bit about the separation of 'content' and 'structure'. After reading some other sites, and comments, I think that we have a problem. Everybody seems to have a personal interpretation of what these terms actually mean.
For example, some folks seem to think that ‘Structure’ includes Semantic code. So in the following example, they believe that separating the content and structure would be to remove the copy (the text) from the XHTML tags (all of them).
<p> This is a paragraph. </p> <p> This is <em> another </em> paragraph. </p> <p> This is <strong> yet another </strong> paragraph. </p>
The Content
Let me give it to you as I see it; ‘Structure’ IS NOT the same as Semantic Markup. There is no structure in the above example. This is ALL content that has been given Semantic meaning for the medium that is the web. You could, if you wish, say that there are two separate layers within the ‘Content Layer’; the Copy, and Semantic Markup. But separating Copy and Semantics is both nigh impossible, and useless. Why would one want to remove semantic meanings from some copy? Once semantic markup is applied to the copy, there should be next to no call to change it. A Heading is always a heading, and emphasized words are emphasized for a reason.
There is a point where the Copy and Semantics are separate. Someone writes up the copy, and then someone else (maybe the same person) adds the semantic markup later on. But once that forgery has been made, there is next to no turning back.
To explain; right now, I am typing this into MS Word. At this point I am only dealing with the Copy. There is no semantic markup involved at all at this level. It all starts this way, with just the copy.
Later on, after I have checked my grammar and spelling, I will cut this copy into Dreamweaver, and the semantic markup will be applied. By the time you read this, both the Copy and the Semantic markup will be together. There is no need for me to separate these two levels again. This is the Content; Copy, plus Semantic Markup.
Now, knowing that some people believe Structure to be semantic markup, I understand why some people think that “Separating content and structure is daft. You wouldn't separate your car and its engine, would you?”. It is understandable to think that way, because separating copy and semantic markup is daft!
The Structure
What then is ‘Structure’ if it is not the Semantic XHTML? We have defined the ‘Content’ as being the mixture of the Copy with the Semantic Markup.
It is good to point out right now that to publish an article on the web, that is all you need; the Copy (Essential), and Semantic Markup. At this stage the user agent can translate the copy into something meaning full.
Structure, is everything else.
What I mean is this; Structure is not needed for the copy to be accessible on the web. I could publish this little collection of ramblings as it is, after I add the semantic markup in Dreamweaver, and it would be available to everyone in a meaningful and accessible format.
But I don’t. I add more layers to it. Structure is everything within this XHTML document that goes beyond the Copy and Semantic meanings. I place the content into a larger document, with a preset structure. The article content goes into one div labeled with an ID ‘mainContent’, and my Unordered List of links (also content – copy and semantics), goes into another <div> with the ID ‘mainNavigation’. These all go into a DIV with an ID ‘container’, and that goes into the <body> tag. So on, and so on. Thus the Structure is added!
Sure, It can be argued that some of this ‘structure’ also gives semantic meaning, but this is not meaning that will be missed if I were to take it all away again. Thus, it is not needed in the same way that the other semantic markup is.
Sure also, it can be argued that some of the ‘semantic markup’ within the content gives the document a form of structure. Header tags are rendered larger, and bolder. <em> is rendered in italics. <strong> comes out in bold. An unordered list is given as an indented list (and so it should be). But none of these tags are really structural tags at all! They are semantic tags, and the user agent translates them. That is what semantic tags are for, to give the copy, the data, meaning.
The Idealistic Evolution of a Web Page
If my explanations make no sense to you what so ever, I apologise profusely. To help me to explain how I feel the web page should be built in layers, I have drawn up some diagrams which I call “The Idealistic Evolution of a Web Page”.
This work is licensed under a Creative Commons License.
- Time: 11:42
- Wubb Development
Comments ( 8 )
Richard@Home
Now that IS scary
It nice to see I wasn't barking up the wrong tree.
Interesting how you've grouped the presentation layer along side the Behviour Layer. My diagram has them as distinct layers.
I can see your point of view though, CSS rollover effects for example are actually what could be called a 'Presentational Behavour': a mixture of the two layers (even though its done in pure CSS).
Excellent article all round, I was tempted to finish writing my own article, but yours says it much more succinctly than I ever could.
This should be on everyones required reading list.
Richard@Home
Richard@Home
Phil Baines
'Copy' is a term I have only just started using a lot myself, but I do think that it covers what I need it for rather well.
In regards to the Behviour and Presentational layers, I do see them as separate layers, because they can work without each other. Yet sometimes, one it reliant on the other, and both are capable of crossing over (JavaScript doing something Presentational, or CSS doing some Behviour). But the main reason that I have put them next two each other is that they are applied at the same time, and to the same file, not to each other. Thus, adding Presentation and Behaviour can be seen as one step.
I hope that makes sense.
I like your image by the way, I think you should still publish it, even if you just want to link to this article for more information. Mind you, if you were to write an alternate article, it would be good too. Some people might prefer your writing to mine, so it could still benefit people.
Phil Baines
Eric
Let me (sort of) disagree
Basically, I don't agree with the distinction you're making between the page's semantic markup as structure and the text's semantic markup as "content." The text, on its own, needs the semantic markup to be meaningful (headings, paragraphs, etc.) The page needs its semantic markup to be meaningful (divs have names that indicate their importance and meaning in a document). One is simply another scale of the other.
Both scales use hooks sometimes that aren't necessary - sometimes it's a span element in the copy, sometimes it's an unnecessary nested div for an effect you want. But it's the same issue.
I agree that it is daft to separate the two layers, just as it would be daft to speak in a monotone all the time and put no breaks in between your words and sentances. Oh, and to speak without facial expressions and moving your hands. Technically, that is all extraneous to the actual copy, but it adds a layer of meaning and significance that the words themselves don't necessarily convey.
In addition, you talk as though once the semantic tags (sorry, elements...) are attached, there is no turning back. But this isn't the case. h1s could change into h2s. uls could change into ols. Whole paragraphs could be put into li elements. em could change to strong, or to the dt element in a dl. None of this is set in stone; it is just a way of fleshing out the meaning that the original text had and making it logical for display on the web. You could say that this meaning itself is inherent in the pure copy, and the semantic markup exists to make it legible, but the only thing that doesn't actually change is the intangible meaning of the original words. This, imo, is the copy. We then structure it, with h1s and lis and etc. to make the hidden meaning understandable. Just as we structure it in divs to make it understandable in the context of the entire document. It's important to know that your sidebar is a sidebar, and not the main content. It's important to know that your footer is a footer, and not just an extension of your story copy.
I don't know how much sense this makes, it's my first go at getting my thoughts coalesced on this issue. I'll think about it on my vacation :)
One weakness of it is that you can take my argument further and break it - the words themselves are simply semiotic indicators of the thoughts in my head, so maybe they are structure too... I'll have to brush up on de Saussure sometime.
hass
Eric, semiotics and linguistics and de Saussure, oh my! Headers and paragraphs are not necessary for text to have meaning, they just help clarify meaning. And the whole semantic-markup thang is really for the benefit of non-modern browsers and screen-readers, isn't it? With CSS you can give the text visual meaning regardless of the elements you use. Phil's graphics illustrate this perfectly, as images they have one definition (image) but visually they convey much more, and he even qualifies "give meaning for machines...readable by machines".
So Phil, why use the nebulous terms "structure, content, presentation"? Just use "text, images, elements, properties, XHTML document, CSS document" and there will be no doubt.
Phil Baines
Hass and Eric
Hmmm, I found it hard to collect my thoughts on this one, and put it into words. I just know that I find it easier to explain web page layering in these terms.
Eric,
> > "First, what you are typing into MS Word has the same structure as your web semantic mark-up (though much more bloated, I'm sure)."
I’m not sure what you mean by this. Word doesn't use XHTML (Unless you’re working on a HTML doc in Word), so I'm not sure how you can say it is the same semantic mark-up as XHTML semantic mark-up.
Truthfully, I imagine that word must have some sort of semantics, so that it can tell the difference between a heading, and a paragraph. But it isn't semantic mark-up that Firefox will understand when I try to open it. That is the sort of semantics I mean.
> > "The text, on its own, needs the semantic mark-up to be meaningful (headings, paragraphs, etc.) The page needs its semantic mark-up to be meaningful (DIV's have names that indicate their importance and meaning in a document)."
I think that this can be argued in many ways. I, personally, don't consider DIVS (used in such a way to split up in document into sections, or divides) are actually passable as semantic mark-up. This mark-up is used, mainly, to give the presentations layer, and behaviour layer, hooks to attach them to. If the document is viewed without the CSS and JavaScript from these layers, it is quite possible that you won’t even know those DIV’s are there. They then become as useful as HTML comments (<!-- --> ), that tell you how the code is split up. That is why I consider them to be Structural Mark-up, and not Semantic Mark-up.
> > "In addition, you talk as though once the semantic tags (sorry, elements...) are attached, there is no turning back."
I don't think I explained myself very well on this one. What I really meant, is that after the Semantic layer has been added, there should be no need to take it away again. Sure, if someone realises that an Unordered List should be an Ordered List, or a collection of Headers and Paragraphs a Definition List, then yes, the semantics can CHANGE. But the layer should never need to be removed.
Then again, a heading will always remain a heading of some sort. It will never become a paragraph. It could however change in heading type (h1, h2, h3, dt), or become a definition title. I think I spoke to broadly on this one, but I didn't want to go into to much detail.
---------------------
As the title suggests, this is all IMO (in my opinion). I have put it this way for two reasons; partly for safety, so that I can say, well it is only my opinion. Secondly for more safety, so that I can change it in the future, as my opinion changes. I am entitled to change my opinion, and I am honest enough to say that it probably will as my knowledge increases. This is as much a learning curve for me as it is for anyone else.
online poker tools
online poker tools
Sorry, commenting has been disabled for a while. I am getting a stupid amount of comment spam, and need to find a new way of doing things.
I will not publish your email address, but I may use it to get in contact with you.
HTML tags and entities display as source; they do not render. To create a live link, simply type the URL (including http://).