Cabeçalhos
HTML tem 6 níveis de cabeçalho.
<h1>Este é o cabeçalho principal</h1>
<h2>Este é o segundo subtítulo</h2>
<h3>Este é o terceiro subtítulo</h3>
<h4>Este é o quarto subtítulo</h4>
<h5>Este é o quinto subtítulo</h5>
<h6>Este é o sexto subtítulo</h6>O tamanho desses cabeçalhos pode mudar de navegador para navegador e os usuários também podem alterar o tamanho da fonte nos navegadores.
A gente vai ver como controlar o tamanho do texto, a cor e a fonte usada quando a gente chegar no CSS. Mas é importante manter em mente que dentro do documento são considerados subtítulos.
Paragráfos
<p>Basta escrever o texto entre essas duas tags</p>Esse elemento é usado em todo parágrafo do nosso site.
Negrito e itálico
<b> tudo que estiver entre essas duas tags está em negrito</b>Utilizamos esse elemento quando queremos que uma sessão do texto apareça visualmente diferente, digo isso pois temos tags que além de mudar visualmente altera o significado do texto. O uso dessa tag não implica em nenhum significado adicional.
<i> tudo que estiver entre essas duas tags estará em itálico</i>Esse elemento é utilizado para representar uma sessão de texto que provavelmente seria dito de uma forma diferente. Como termos técnicos, nome de navios estrangeiros, palavras estrangeiras, pensamentos ou outros termos que geralmente são escritos em itálico.
Sobrescrito e sobescrito
<p>Temos então, 2<sup>n</sup> para todo n pertencente aos reais</p>O elemento <sup></sup> é usado para caracteres que devem ficar sobrescrito, como elevar um número à segunda potência.
<p> A fórmula química da água é H<sub>2</sub>O</p>O elemento sub é usado para conter caracteres que deveriam ficar sob escritos, normalmente usado para anotações ou fórmulas químicas.
Espaço em branco
Para fazer com que o código fique mais fácil de ler, programadores de página web geralmente adicionam espaço extra ou começam alguns elementos em novas linhas. Quando os navegadores se deparam com dois ou mais espaços próximos um do outro apenas um espaço é mostrado. O mesmo acontece quando encontra duas quebras de linha, é tratado como se fosse uma.
<p> As palavras estão ficando cada vez mais distantes</p>
<p> As palavras estão ficando cada vez mais distantes</p>
<p> As palavras estão ficando cada
vez mais distantes</p>Quebra de linhas e linhas (regras) horizontais
Como você já deve ter notado, o navegador irá automaticamente ignoras seus espaços extras e quebras de linha. Como criar uma quebra então?
<p> Dessa forma as quebras de linha <br />não são ignoradas pelo navegador</p>Para criar uma quebra entre dois temas. Tais como a mudança de tópico em um livro ou uma nova cena em uma peça, ou você pode adicionar uma linha horizontal entre seções usando o <hr />.
<p> Dessa forma as quebras de linha <br />não são ignoradas pelo navegador</p>
<hr />
<p> Outro parágrafo sem uma quebra de linha</p>Marcação semântica
O uso do elemento <strong></strong> para indicar que o conteúdo tem uma forte importância. Por exemplo, as palavras contidas neste elemento podem ser destacadas por uma ênfase forte quando for lida por um leitor de tela. Por padrão, os navegadores vão mostrar os conteúdos desse elemento em negrito.
<p> <strong>Cuidado!</strong> Esses elementos químicos não podem ser manuseados sem os devidos equipamentos de segurança</p>O elemento <em></em> indica ênfase que subitamente muda o significado da sentença. Por definição, os navegadores vão mostrar o conteúdo desse elemento em Itálico.
<p> Eu <em>acho</em> que você está enganado</p>Citações
<blockquote cite=“https://www.pensador.com/citacoes_de_filosofos/”>
<p>A morte não é nada para nós, pois, quando existimos, não existe a morte, e quando existe a morte, não existimos mais.<p>
<p>Epicuro</p>
</blockquote>O elemento <blockquote></blockquote> é usado para citações longas, que pegam um parágrafo inteiro. Notou que tem um elemento <p> ainda está dentro da tag de citação? Navegadores tendem a indentar o conteúdo da tag de citação. Contudo, você não pode usar esse elemento apenas para identação do texto. Você deve fazer isso utilizando o CSS.
<p> O filósofo Epicuro disse centenas de anos atrás <q cite=“https://www.pensador.com/citacoes_de_filosofos/”> É estupidez pedir aos deuses aquilo que se pode conseguir sozinho. </q> e atualmente pagam a um homem para que ele peça por você. </p>Esse elemento é usado para situações mais curtas, que ficam em um parágrafo. Os navegadores deveriam colocar esse elemento com um destaque especial, geralmente itálico. Contudo, o Internet Explorer não faz isso, o que faz essa tag ser pouco usada.
Ambas as tags devem usar o atributo citação, que indica de onde a situação é. Esse valor deve ser um mau ar que tem mais informações sobre a fonte da citação.
Abreviações e acrônimos
<p> O<abbr title=“Professor”>prof</abbr> disse para fazer o trabalho até terça.</p>Se você usar uma abreviação ou um acrônimo, então o elemento <abbr></abbr> deve ser usado. Um atributo título na abertura da tag é usado para especificar o termo completo.
Citações e definições
<p><cite>As Crônicas de Gelo e Fogo</cite> de George R. R. Martin foram um sucesso internacional. </p>Quando você está se referindo a um trecho de um livro, filme ou uma pesquisa no jornal o elemento citação pode ser usado. Os navegadores irão renderizar o conteúdo de um elemento <cite> em Itálico.
<p>Um <dfn>conjuto</dfn> é uma coleção de elementos.</p>A primeira vez que você explica alguma nova terminologia, talvez um conceito acadêmico ou algum jargão em um documento é recomendado usar a tag <dfn> para definir essas instâncias. É o elemento usado para indicar a definição de um novo termo.
Alguns navegadores mostram o conteúdo do elemento <dfn> em Itálico. Safari e Chrome não mudam sua aparência.
Detalhes do autor
<address>
<p><a href=”mailto:saitama@onepunch.com”> saitama@onepunch.com </a></p>
<p> 123, Rua dos Loucos. Springfield. </p>
</address>O elemento, <address> tem um uso bem específico para conter, detalhes de contatos do autor da página. Não precisa ser necessariamente um endereço físico. Pode ser, por exemplo, um número de telefone ou endereço de e-mail. Navegadores frequentemente mostram o conteúdo desse elemento em itálico.
Mudanças no conteúdo
<p> Custava <s> R$ 300,00 </s> <del>muito caro</del> agora está custando <ins>R$ 150,00</ins> </p>
O elemento <ins> pode ser usado para mostrar um conteúdo que foi inserido em um documento.
O elemento <del> pode ser usado para mostrar um texto que foi deletado do documento.O elemento <s> indica algo que não é mais atual ou relevante, mas que não deve ser deletado. Visualmente, o conteúdo desse elemento. Será geralmente mostrado com uma linha. Muito centro. Versões mais antigas do HTML tinham um elemento, <u> para conteúdo sublinhado. Mas já não é mais utilizado.
Referências:
Duckett, J. (2011). “HTML and CSS: Design and Build Websites.” Hoboken, NJ: Wiley.
VISUAL QUICKSTART GUIDE HTML 5 and CSS3 Seventh Edition, Elizabeth Castro, Bruce Hyslop
Was this helpful?
0 / 0