Web Markup: What you Didn’t Know You Needed to Know

Make your site stand out and give yourself an edge: Let Web Techniques Magazine contributing editor and New Riders’ author Molly E. Holzschlag teach you the goals of successful markup and which method is right for your project. Molly explains the various markup languages and slips you a few tips.

From the author of

From the author of

Before you dive into coding, give yourself an edge: Let Molly E. Holzschlag
teach you the goals of successful markup and which method is right for your
project. As a contributing editor and columnist for Web Techniques Magazine,
Molly explains the various markup languages and slips you a few tips on the
best ways to use them.

Most web authors have bootstrapped their way into the industry, learning how
to mark up documents through whatever resources were available rather than a
formal education. In the rush to build the web, there simply hasn’t been
time to study the history of markup and the technology’s underlying concepts.
But what does that matter? After all, you’ve likely created pages and sites
that work just fine.

It matters quite a bit, actually. Taking the time to understand markup and
the World Wide Web Consortium’s (W3C’s) recommended approaches to
creating web pages not only makes sense, but also offers benefits to designers
and users alike, such as the following:

Following W3C recommended markup approaches creates consistency between
documents. This, in turn, saves time and frustration when you try to find
errors within a document. What’s more, if you’ve got multiple people
working on a site, adhering to standard practices creates a more efficient working
environment.

If you’re frustrated by browser and platform inconsistencies, following
recommendations will eliminate many struggles. When you follow W3C recommendations,
documents become more interoperable, reducing testing time and increasing
the portability of documents.

Documents conforming to W3C recommendations pay attention to the needs
of the disabled. This ensures that the information within those documents
can be accessed and easily understood.

Porting to multiple languages becomes easier. Formal markup provides
a means by which documents can be prepared to display in a variety of languages
using different character sets.

Markup that adheres to current recommendations and approaches can easily
be interpreted by a wider range of user agents beyond the browser. This
makes your information widely accessible. As people move from web to wireless
and alternative means of accessing web-based data, clean markup becomes
imperative.

These advantages come when designers are all on the same page in terms of markup
and style. One of the best ways to get to this stable platform upon which to
develop fantastic sites is to look back at what today’s markup options
were built on.

What Is HTML?

To understand HTML, you need to understand its parent markup language, the
Standard Generalized Markup Language(SGML). SGML has been around
for many years, and became a standard for document markup specialists in
government and such industries as medicine, law, and finance.

SGML is a meta language: It exists to create other markup languages.
SGML is essentially a collection of language rules that authors use to create
their own document languages. HTML is one of the resulting languages—a
child, if you will, of its meta-parent SGML.

From SGML, HTML took its structure, syntax, and basic rules. However, HTML
even in its current seemingly complex state—is less complex and detailed
than SGML. Especially in its early life, HTML was very simple. It existed to
enable basic markup of pages for the web: paragraphs, line breaks, headers.
Remember that the web was first a text-only environment! HTML was not developed
with presentation concerns in mind; its goal was to structure data.

Enter the visual browser, which changed the web environment from one
constructed of text documents to one that promised growing opportunities for
visual design. HTML and web browsers themselves were stretched out of proportion
to accommodate the rapid-fire pace of the web’s visual and interactive
growth.

Trying to manipulate HTML to do what you want is frustrating. No consistent
methods for creating layout exists, and there’s essentially no stable way
to manage type. To lay out a page in columns, for example, you often have to
rely on tables, instead of style sheet positioning, to ensure cross-browser
compatibility for the designs. You also have little control over white space,
relying on workarounds such as single-pixel spacer GIFs. HTML is, in many ways,
a designer’s nightmare born of the fact that the web was never intended to
be a visual environment. But it became one, and how to manage that reality has
been a challenge ever since.