Web Markup: What you Didn’t Know You Needed to Know
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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.