Meaningful Markup: XHTML com significado

Capa do Livro Nos ultimos meses eu tive a oportunidade de ter acesso a todas as obras de CSS, XHTML, XML (dentre outras) que eu pudesse me interessar. Uma das razões era poder revisar meu vocabulário técnico e como sempre acontece, aprender mais detalhes sobre desenvolvimento para web. Os últimos livros que eu li recentemente foram CSS Mastery, Advanced Web Standards Solutions de Andy Budd (é o primeiro livro dele e muito bem acolhido entre os outros escritores) e Web Standards Solutions: The Markup and Style Handbook de Dan Cederholm.

Apesar de não ser um segredo de estado o conteúdo tratado em todos os livros, eles tem o propósito de serem didádicos, práticos e conceituais ao mesmo tempo e não somente documentais (como os textos da W3C). Outro fato interessante ao ter contato com várias “cartilhas” diferentes sobre o mesmo tema, é poder refletir sobre determinado assunto com uma ótica diferente (a de cada autor), mesmo que seja sobre assuntos que você esteja cansado de saber (se já for um expert), como listas, tabelas, forms etc e para os iniciantes, eles tem a oportunidade de ter o caminho das pedras da forma menos dolorosa possível e sem precisar quebrar a cabeça. Este é o benefício que estes livros clássico sobre o assunto podem te trazer.

Todo campo de estudo possui uma terminologia canonizada que eu acho (“eu acho” = opinião) que é muito pouco explorada no Brasil por razões que eu já até discuti anteriormente. Como essa terminologia nasce entre aqueles que estão à frente do desenvolvimento das próprias linguagens, os termos geralmente permanecem em seu idioma materno, o inglês. Quero trabalhar neste texto o conceito chave do título deste artigo: “meaningful markup” ou “marcação com significado”.

O que é Markup?

Markup ou “marcação” é o nome dado ao processo de escrever a sintaxe de uma das linguagens de marcação. O XML e o HTML por exemplo, são chamadas de linguagens de marcação (markup languages) e servem para estruturar a informação (e não a apresentação) daquilo que você compartilha na web, “marcando” (mark up) certos trechos com determinadas tags (tag do inglês “etiqueta” ou “identificadores”) dando significado ao conteúdo.

Como cada um diz?

Em vários livros escritos pela Molly como o The Zen of CSS Design (no capítulo 1 do texto “Semantic Markup”), no livro do Jeffrey Zeldman “Designing with web standards“, no do Andy Budd e do Dan Cederholm, todos trabalham a sua própria maneira a diferença entre presentational markup e semantic (ou “meaningful”) markup. Para quem quer entender semântica de marcação sem nenhum sacrifício deve entender bem estes conceitos. Veja alguns trechos que eu extraí destes livros (por razões puramente práticas eu mantive os trechos como no original em inglês):

Web Standards SolutionsDan CederHolm (Introduction: Structured Markup)

You may hear me use the word “semantic” quite a bit throughout this book. I may also use the term “structured markup” at times as well. They are interchangeable. What I mean when I talk about semantics is that we’re striving to use tags that imply meaning, rather than a presentational instruction. Are you dealing with a list of items? Then mark it up as such. Is this a table of data? Then structure it that way.

By structuring web pages with semantic markup, we’ll move closer to separating content from presentation and, in turn, our pages will have a better chance of being understood properly—the way you intend them to be—by a wider variety of browsers and devices.

Capa do Livro Designing with Web StandardsJeffrey Zeldman (Chapter Eight. XHTML by example: A Hybrid layout (part 1) – First Pass Markup: Same as Last Pass Markup)

Presentation, Semantics, Purity, and Sin

How big a standards geek are you? Did you spot the worst sin in our XHTML? The primary offense took place in the first line—namely the use of the outdated bgcolor (background color) attribute to the body element to specify, even in non-CSS browsers, that the page’s background color should be white (#ffffff). Here it is again:

Writing old-school markup like that could get us thrown out of the Pure Standards Academy faster than a greased meteor. After all, CSS lets us specify the body background color, and the W3C recommends that CSS, not HTML or XHTML, be used for this purpose. In the eyes of many standards fans, our use of bgcolor is a sin.

Capa do LivroThe Zen of CSS Design – Dave Shea e Molly E. Holzschlag (Chapter 1. View Source – Semantic Markup)

Semantic Markup

The difference in philosophy between coding for appearance and coding for proper semantics can be subtle, so here is a code example to help illustrate. This is considered presentational markup:


<b><font size="2">Our Family</font></b>
<br /><br />
<font size="1">Pictured are Matt and Jeremy. As usual, Matt is making
a funny face. We don't have many photos where he isn't.</font>

Whereas this is semantic:


<div id="family">
<h3>Our Family</h3>
<p>Pictured are Matt and Jeremy. As usual, Matt is making a funny
face. We don't have many photos where he isn't.</p>
</div>

In the first example, all tags were chosen strictly for formatting purposes. The
tags were used to force line breaks, the tags were used to make the text bold, and the tags set the text size.

Capa do Livro250 HTML and web designers secrets – Molly E. Holzschlag (Secret #72 – Using headers meaningfully)

HTML specifications are not concerned with visual presentation per se. HTML and especially XHTML are concerned with structure and semantics. Instead of presentation, markup is concerned with the meaning of the elements. A header level 1, h1, isn’t about being bold and large. It’s about being the most significant heading on the page.

Capa do LivroCascading Style Sheet – The Definitive Guide – Eric Meyer ( Chapter 1, CSS Documents – 1.1.1 What a Mess )

For an example of the mess in action, take a quick glance at almost any corporate web site’s markup. The sheer amount of markup in comparison to actual useful information is astonishing. Even worse, for most sites, the markup is almost entirely made up of tables and font elements, none of which conveys any real semantic meaning to what’s being presented. From a structural standpoint, these pages are little better than random strings of letters.

For example, let’s assume that for page titles, an author is using font elements instead of heading elements like h1:


<font size="+3" face="Helvetica" color="red">Page Title</font>

Structurally speaking, the font tag has no meaning. This makes the document far less useful. What good is a font tag to a speech-synthesis browser, for example? If an author uses heading elements instead of font elements, though, the speaking browser can use a certain speaking style to read the text. With the font tag, the browser has no way to know that the text is any different from other text.

Presentational Markup

Marcar um documento de (X)HTML preocupando somente com sua aparência é comumente referênciado como “marcação de apresentação” (presetational markup). O que também é sinônimo de Tag Soup. O HTML e o XHTML de igual modo, bem como as linguagens baseadas no XML, não tratam-se de linguagens de apresentação. Isso é trabalho para o CSS. Por mais que isto pareça muito óbvio (o que realmente é), estar consciente disso influencia seu trabalho na hora de marcar seu documento escolhendo determinadas tags. As linguages de marcação servem exclusivamente para marcar e estruturar a informação, e a apresentação é trabalho exclusivo do CSS. Veja alguns exemplos de como NÃO se deve pensar na hora de estrutar seus documentos:

  1. Estruturar sites usando tabelas
  2. Usar a tag <font> para controlar aparência de texto
  3. Usar o atributo size para controlar o tamanho de textos
  4. Escolher utilizar qualquer tag exclusivamente pela forma como o browser renderiza ela.
  5. Usar a tag <center> para centralizar tabelas
  6. Não use <br> para dar quebra de linhas em texto corrido.
  7. Não utilize as tags <b> para texto em negrito e <i> para texto em itálico.
  8. Não use <h1> para texto grande e negrito
  9. Não use <em> para ter um texto em itálico

Meaningful Markup

Como vimos nos exemplos dos trechos dos livros citados acima, as tags nas linguagens de marcação possuem significados, mesmo no XML onde você cria suas próprias tags e deve dar significado a elas da forma mais livre, responsável e sartriana que puder. Meaningful Markup, significa usar as tags considerando-se exclusivamente seu significado e nunca sua aparência.

Para começar a marcar seu XHTML semanticamente, comece separando tudo relacionado a aparência e apresentação jogando fora tudo o que está relacionado a presentational markup, estruturar o conteúdo de forma racional considerando o significado das tags e comece a controlar a aparência somente por uma folha de estilos externa.

Um código semântico não é necessariamente um código validado, lembre-se disso. Até o Roger Johansson focou este mesmo aspecto. Semântica está muito além disso.

Leia também:

  • ahiyachudjh
  • Felipe Ranieri

    Ótima referência! É como você mesmo disse, apesar de óbvio, muitas pessoas ainda pensam muito em visual quando estão estruturando um documento e esquecem que isso é para ser analisado quando a css for montada. O que eu muito ainda, por exemplo, são divs usados como se fossem tabelas, na tentativa de encaixar conteúdos, de posicionar blocos, etc…

    Parabéns pelo artigo!! Abraços!

  • Pingback: Bruno Alves » links for 2006-04-23()

  • Pingback: Xmedia Webfactory » Arquivo do Blog » Reviews de bons livros gringos()

  • http://www.numclique.net Joares

    Acho uma pena a maioria desses livros serem em inglês…

    Vc sabe algum livro bom sobre CSS em port.???

  • http://meulinux.blogspot.com Monthiel

    meu, tenho que aprender inglês o mais rápido possível. Estou ficando para trás sem esse maldito idioma que gosto tanto.. amo inglês, mas falta dedicação…

    Abraços

  • Pingback: Web Standards e as ferramentas de desenvolvimento » Revolução Etc - Web Standards em uma casca de noz!()

  • elizabella

    td sobre o assunto de revoluçao

  • http://skoffin487.xanga.com/758468020/really-easy-weight-reducing-past-experiences-organic/ pololol