O documento apresenta os aspectos semânticos e comportamento dos elementos de bloco e de linha no HTML/XHTML. Explica que elementos de bloco começam em nova linha e possuem espaçamento acima e abaixo, enquanto elementos de linha ocupam apenas a largura necessária. Fornece exemplos de tags de cada tipo e observações sobre sua utilização correta.

1. Curso Superior de Tecnologia em Design Gráfico
DWEB - Design para
Web
D Comportamento
dos elementos
“E o Verbo se fez carne, e habitou entre nós, e vimos a sua glória, como a glória do unigênito do Pai,
cheio de graça e de verdade.” João 1:14
1 Apêndice D - Comportamento dos elementos Tuesday, 10 de April de 12

2. DWEB - Design para Web / Carlos José
Contato
Carlos José
carlosjose.unibratec@gmail.com
www.carlosjose.net
twitter.com/carlosjoser2n
2 Apêndice D - Comportamento dos elementos Tuesday, 10 de April de 12

3. DWEB - Design para Web / Carlos José
Objetivo da Aula
n Apresentar os aspectos semânticos,
das tag’s do HTML/XHTML em
relação ao seu comportamento.
3 Apêndice D - Comportamento dos elementos Tuesday, 10 de April de 12

4. DWEB - Design para Web / Carlos José
Agenda
n Elementos de bloco
n Elementos de linha
4 Apêndice D - Comportamento dos elementos Tuesday, 10 de April de 12

5. DWEB - Design para Web / Carlos José
Comportamento do Elementos HTML/XHTML
n Elementos de bloco
î Os browsers tratam os elementos de bloco como se estivessem em
pequenas caixas retangulares, empilhadas na página.
î Cada elemento de bloco começa em uma nova linha, e
normalmente possuem algum espaço acima e abaixo de todo o
elemento.
Descrição
Tag’s
Títulos
h1,
h2,
h3,
h4,
h5,
h6
Parágrafos
p
Citações
longas
blockquote
Texto
pré-­‐formatado
pre
Diversos
elementos
de
lista
ol,
ul,
li,
dl,
dt,
dd
Endereço
de
contato
address
Linha
horizontal
hr
Tabela
table,
tbody,
thead,
Moot,
tr,
td,
th
Divisão
em
um
elemento
de
bloco
genérico
div
5 Apêndice D - Comportamento dos elementos Tuesday, 10 de April de 12

6. DWEB - Design para Web / Carlos José
Comportamento do Elementos HTML/XHTML
n Elementos de linha
î São aqueles que ocupam somente sua largura necessária e não
possuem algum espaço acima e abaixo de todo o elemento.
Descrição
Tag’s
Abreviação
abbr
Sigla
acronym
Citação;
uma
referência
a
outro
documento,
cite
como
o
Stulo
de
um
livro
Amostra
de
código
de
programa
code
Texto
enfaUzado
em
Citação
curta
q
Texto
fortemente
enfaUzado
strong
Elemento
de
linha
genérico
span
6 Apêndice D - Comportamento dos elementos Tuesday, 10 de April de 12

7. DWEB - Design para Web / Carlos José
Comportamento do Elementos HTML/XHTML
n Observações
î Primeiro:
n Saber diferenciar elementos de bloco de linha é
fundamental na marcação de documentos HTML/XHTML.
n A importância se deve pelo fato da restrição de uso de um
elemento de bloco dentro de um elemento de linha.
n Exemplo:
î Nunca se deve colocar a tag <p> entre a tag <a></a>, ou seja,
pôr um parágrafo dentro de um link.
î Segundo:
n Elementos de bloco e de linha se comportam de forma
diferente quando recebem uma regra de formatação por
meio da CSS.
7 Apêndice D - Comportamento dos elementos Tuesday, 10 de April de 12

8. DWEB - Design para Web / Carlos José
Comportamento do Elementos HTML/XHTML
n Observações
î Terceiro:
n O elemento <div> é usado para identificar uma divisão de
bloco dentro do documento HTML/XHTML.
n Esta divisão será usada como um contêiner envolto de um
agrupamento lógico de elementos no documento.
î Sempre use a propriedade id para identificar de forma
descritiva a <div> que contém os elementos relacionados
gerando assim um contexto e uma estruturação.
î Quarto:
n O elemento <span> oferece as mesmas vantagens que o
elemento <div>, exceto que ele é usado normalmente
para elementos de linha.
n Como o elemento <span> é um elemento de linha, ele só
pode conter texto e outros elementos de linha.
8 Apêndice D - Comportamento dos elementos Tuesday, 10 de April de 12

9. DWEB - Design para Web / Carlos José
Perguntas
?
9 Apêndice D - Comportamento dos elementos Tuesday, 10 de April de 12

10. DWEB - Design para Web / Carlos José
Considerações Finais
Fonte: Silva, Maurício Samy., HTML 5: A linguagem de marcação do futuro, São Paulo, Novatec Brasil,
julho 2011; ROBBINS, Jennifer Niederst. Aprendendo Web Design – guia para iniciantes, 3ª Edição;
http://www.htmldog.com/; http://www.w3schools.com
10 Apêndice D - Comportamento dos elementos Tuesday, 10 de April de 12