HTML COM ACESSIBILIDADE

Entendendo a hierarquia dos elementos HTML

A linguagem HTML está estruturada sobre um modelo de objetos (DOM – Document Object Model), onde os seus elementos estão classificados dentro de uma cadeia hierárquica e deste modo, os elementos inseridos em níveis mais altos desta hierarquia, podem ter as suas propriedades modificadas pelos elementos que estão em um nível mais baixo.

Esta técnica está diretamente relacionada com o modelo de programação orientado a objetos, que acrescentou inúmeras vantagens sobre os outros modelos de programação.

Para entendermos bem este relacionamento na linguagem HTML, vamos analisar as duas situações descritas logo abaixo: 

Perceba que ao definirmos na tag <body> a formatação de cores para os links carregados (link), ativos (alink) e visitados (vlink), estas características são herdadas automaticamente pelos elementos <a> (links) que estão definidos dentro do bloco <body> (corpo do documento), desde que nestes, não seja aplicada uma
formatação individual, pois primeiramente são respeitadas as características particulares de cada elemento.

O elemento <body>, só consegue alterar as propriedades dos elementos <a> (links), por estar em um nível hierárquico menor.

Perceba que ao definirmos na tag <body> a formatação de cores para os links carregados (link), ativos (alink) e visitados (vlink), estas características são herdadas automaticamente pelos elementos <a> (links) que estão definidos dentro do bloco <body> (corpo do documento), desde que nestes, não seja aplicada uma formatação individual, pois primeiramente são respeitadas as características particulares de cada elemento.

O elemento <body>, só consegue alterar as propriedades dos elementos <a> (links), por estar em um nível hierárquico menor.

Para realizar esta segunda análise, observe o trecho de código no exemplo ao lado:

<body>
<font style="font-family: Verdana; font-size: 14pt; color: #0000ff;">
<p align="justify"> Texto (1), usando a fonte Verdana, tamanho 14 e cor azul. </p>
<p align="justify"><font style="font-family: Arial; font-size: 12pt; color: #000000; font-weight: bold;"> Texto (2), usando a fonte Arial, tamanho 12, cor preta e em negrito. </font></p>
<p align="justify"> Texto (3), usando a fonte Verdana, tamanho 14 e cor azul. </p>
</font>
</body>

Os três parágrafos acima, estão delimitados pelo elemento <font>, porém, as suas características de formatação são herdadas somente pelos parágrafos que contém respectivamente o "Texto (1)" e o "Texto (3)", pois o parágrafo que contém o "Texto (2)" possui internamente a sua própria definição de fonte.

Pressione ENTER para retornar a página anterior.Pressione ENTER para retornar ao Menu. Pressione ENTER para avançar para a próxima página.