Meaning vs. Layout
Article ID: KB101454
In the next few articles, you'll learn about how to bold and italicize fonts
and other ways to get your page to look the way you want. But before we tackle
those fun topics, there is a very important underlying concept to consider:
Meaning vs. Layout.
For the purposes of this article, we'll define "layout" as the visual aspect
of web design - what your page "looks" like in a web browser. "Meaning" will
refer to the actual meaningful content of the page - the text AND the page
elements, as well as how they are defined. (In other places, you may hear this
described as "structure vs. layout," "structure vs. presentation," or "meaning
vs. style.")
First, a quick fact from HTML's history. HTML is based on another language
called SGML. Both HTML and SGML, when created, were meant to help define a
logical structure for documents. For example, think of an article or essay
with headings, subheadings, and paragraphs. HTML provides a way to label which
lines are headings, which lines are subheadings, and which lines are paragraphs.
HTML can even label which parts are quotations or citations.
So, theoretically, HTML information can then be presented in lots of
different, useful ways. For example, many web browsers will display headings in
larger text, so that you can tell visually which lines are headings or
subheadings. Or, you could create a different kind of program or web browser
that only takes all the headings from an article and makes a quick table of
contents sheet.
Well, over the years, creative web designers have figured out how to take
HTML code and force it to create designs and layouts that are pleasing to the
eye -- often at the expense of a "well-structured" document. We can't blame them
-- after all, if every web page looked like an outlined research paper, it
wouldn't be as much fun to surf the web. Almost every web designer in these days
creates tables that are used to create a certain kind of layout on the page,
although tables were originally designed to provide a way to "mark up" rows and
columns of data. And in order to get the fonts and text colors they wanted,
designers started using the <FONT> tag excessively. Even on some sites today,
you can see more than 200 instances of the <FONT> tag on a single page!
With the advent of cascading style sheets, web designers have begun to
go back towards preserving the structure, or meaning, of a document by
separating more of the layout and presentation from the HTML document. While
"HTML purists" would still be unhappy with the way designers still use tables
for layout, it seems that a compromise is slowly being reached.
What does this mean for you? In the next few articles you'll be
learning about how to start formatting text -- and formatting your page -- to
look the way you want it to. But you should try to start with your content
first. Once you know what you're going to say, then you can take steps to decide
how you're going to say it. Many of the formatting tags that you'll be learning
about can usually be thrown out the window when you learn about style sheets,
and we may even include examples of how you can use style sheets or some other
method to achieve the same effect.
And one last warning on why you shouldn't only focus on layout: In this day
and age, accessibility is a growing concern. In fact, all federal web
sites are now required to be accessible for people with disabilities, and there
is a growing movement to make commercial sites accessible as well. When it comes
down to it, well-structured code is usually accessible. Code full of font tags,
crazy layout tables, and undefined images are not. If you are able to learn how
to balance a great layout with well-structured code, you'll be on top of the new
wave -- not under it!
In the next article, we'll be looking at some of the specific tags used to
bold, italicize, and more!
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al0/kb101454.htm
permalink to this article:
http://www.pixelmill.com/support/kb101454.htm
Back to top