This content originally appeared on DEV Community and was authored by Jessilyneh
Esse artigo surgiu de anotações que eu tinha já faz um tempo no meu Github sobre HTML e que estou passando pra cá para o conteúdo não ficar parado. Comecei as anotações 3 anos atrás e fiz mais uma atualizações aqui enquanto escrevia esse artigo.
Se você já está com familiaridade sobre o que é, como funciona e procura algo prático com tags essenciais, era exatamente isso que eu estava buscando quando escrevi essas anotações.
Nesse conteúdo, é preciso que você já tenha conhecimentos sobre o que é HTML. Caso não tenha, acompanhe a documentação oficial antes de continuar a leitura :)
Por fim, como é um guia, o conteúdo vai ser um pouco mais longo que os demais conteúdos publicados aqui. Um outro adendo é que eu não estou tentando resumir documentação, essas foram as anotações que eu achei pertinente na época que estava lendo sobre o tema. Portanto, não deixe de consultar a documentação sempre que sentir necessidade de aprofundar em algum conceito.
Aqui vou falar sobre:
- Formatação de texto
- Elementos genéricos
- Navegação
- Audio
- Imagem
Formatação de Texto
Para que o seu texto, titulos e todo conteúdo textual da página esteja organizado e facilite manutenção futura, mas que também traga ganho de acessibilidade (a experiência de uso de um leitor de tela com um HTML semântico vai tornar a jornada de quem tem alguma deficiencia visual, funcional)e inclusive ganhos em SEO, tão importante para seu site ser indexado e encontrado nas pesquisas dos motores de busca.
Títulos
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
Aqui, a ideia é hierarquia de títulos, do mais importante e que precisa ser visto primeiro, seguindo numeração decrescente. Lembre que é recomendável ter apenas um titulo h1 por página.
A parte do layout conseguimos fazer usando CSS, o importante agora é pensar em uma hierarquia de títulos para tornar a arvore de acessibilidade funcional e para marcar as sessões da página.
Itálico e ênfase
A tag <i> é usada para distinção visual de itálico, enquanto a tag <em> faz ênfase acrescentando valor semântico.
Bold e Strong
Da mesma forma, a tag <b> acrescenta distinção visual e a tag <strong> serve para ênfase de alertas ou avisos
Listas
Lista não ordenadas
lista que não precisa seguir ordenação.
- unordered item
- unordered item
- unordered item
<ul>
<li>unordered item</li>
<li>unordered item</li>
<li>unordered item</li>
</ul>
Listas ordenadas
lista ordenada de alguma forma, seja por ordem numérica ou alfabética.
Lista numérica
- ordered item
- ordered item
- ordered item
<ol>
<li>ordered item</li>
<li>ordered item</li>
<li>ordered item</li>
</ol>
Lista ordenada por letras
c - ordered item
d - another item
e - one more item
Utiliza a propriedade type para definir o tipo da enumeração, neste caso, o type="a" significa letras minúsculas. Ja a propriedade start para definir a partir de qual ponto sua lista vai começar. Como vamos usar letras minúsculas e o valor de start é 3, vamos começar da letra c:
<ol start="3" type="a">
<li>ordered item</li
<li>another item</li
<li>one more item</li
</ol>
Listas de definição
Lista tipo key:value, com um <dt>de definição do termo e um <dd>de descrição da definição:
definition term
definition description
<dl>
<dt>definition term</dt>
<dd>definition description</dd>
</dl>
Quotes
Usado para destacar trechos ou palavras num texto
Blockquote
usado para blocos de texto
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis eius maiores aperiam aut tenetur animi!. Eius modi necessitatibus natus enim sint vel rem accusamus excepturi! Mollitia nam dignissimos quo ea.
-- Ipsum Dolor
<blockquote>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis eius maiores aperiam aut tenetur animi!.
Eius modi necessitatibus natus enim sint vel rem accusamus excepturi! Mollitia nam dignissimos quo ea.</p>
<cite> -- Ipsum Dolor </cite>
</blockquote>
Marcações de quotes
usado para marcar citações em linha
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis eius maiores aperiam aut tenetur animi!
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. <q>Reiciendis eius maiores aperiam aut tenetur animi!</q></p>
Datas
Transforma qualquer data em um formato que o navegador (máquina) consegue entender
<time datetime="2022-07-15">15 de julho de 2022 </time>
<time datetime="23:00">11:00 p.m. </time>
<time datetime="2022-07-13">2 dias atrás </time>
<time datetime="23:00-06:00">11:00 no Canadá </time>
<time datetime="2022-07-15T23:00">Quinta, 15 de julho as 23h </time>
Código, tag < e >
Para acrescentar cores em um texto, podemos usar {color:red}
<code>
<p>Para acrescentar cores em um texto, podemos usar <code>{color:red} </code></p>
</code>
Superscripts, subscripts e textos minúsculos
Subscripts:
A tag <sub> em HTML é usada para exibir um texto como sobrescrito, que aparece metade acima da linha de base normal e é renderizado usando um tamanho de texto menor
exemplo: H2O
<p>H<sub>2</sub>O</p>
Superscripts:
O texto dentro da tag <sup> é renderizado meio caractere acima da linha normal e tem um tamanho de fonte menor.
exemplo: a área compreende 25m²
<p>A área compreende 25m<sup>2</sup></p>
Fórmulas Matemáticas
Se voce precisa criar formulas complexas, pode usar o MathML, que é uma linguagem de marcação matemática baseada em XML, que vai ser renderizado em navegadores que tenham suporte.
Para exibir expressões matemáticas no GitHub usando MathML, você pode usar a sintaxe do LaTeX, colocando entre $ o conteúdo desejado.
Exemplo: Para exibir a equação quadrática ( ax^2 + bx + c = 0 ), você pode usar a fórmula:
Para isso, seu código HTML deverá ser assim:
$x = \frac{{-b \pm \sqrt{{b^2 - 4ac}}}}{{2a}}$
Elementos Genéricos
div e span
Devem ser utilizados apenas nos casos onde:
- Não exista outro elemento semântico mais adequado;
- Para envolver um grupo de elementos ou frase para aplicar alguma estilização (CSS) ou ação (Javascript)
Tanto a div como spam fazem a mesma coisa: NADA. Servem apenas para envolver elementos.
<div>
Utilizada como container genérico, para facilitar a aplicação de estilização ou ação, usando "class" ou "id" para identificação.
<div class="container">
<h2>HTML Notes</h2>
<p>Repositório de assuntos importantes sobre HTML </p>
</div>
<span>
Utilizada para edição inline (em linha) de um elemento, como por exemplo, aplicar estilização para uma frase em outro idioma.
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<span class="subtitle">Pellentesque habitant morbi </span> tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
Navegação
Links
<a href="http://github.com">Click here</a>
onde:
<a>: anchor - essa tag indica que é um elemento de linha.
href: Hypertext Reference - atributo da tag <a>. Nele, definimos para qual link vai apontar.
="http://github.com": URL absoluta contem todas as informações necessárias da localização de um recurso. É formada por scheme, server, path e um recurso, assim: scheme://server/path/resource
="index.html":URL relativa localiza um recurso, contendo apenas um path e as vezes, um resource.
Audio
A tag contém uma ou mais tags com diferentes fontes de áudio. O navegador escolhe a primeira fonte que ele suporta.
O texto entre as tags e só será exibido em navegadores que não suportam o elemento .
Existem três formatos de áudio suportados em HTML: MP3, WAV e OGG.
<audio controls>
<source src="/Audio/passaros.mp3" type="audio/mpeg">
<source src="/Audio/passaros.ogg" type="audio/ogg" codec="opus">
Seu browser não suporta esse arquivo de audio
</audio>
Atributos
controls é um atributo booleano.
Especifica que os controles de áudio devem ser exibidos. Os controles de áudio incluem:
- Play
- Pause
- Volume
- Baixar arquivo
- Velocidade de reprodução
Você pode encontrar mais informações na documentação da Mozilla
Também tem um exemplo de implementação com audios no repo do Github
Imagens
Usamos a tag <img> para renderizar diferentes arquivos de imagem para telas de tamanhos diferentes.
Uso básico da tag image
<img src="" alt="" width="" height=">
Uso do srcset
O atributo srcset oferece ao browser escolhas de tamanho de imagem que se adaptam melhor, evitando carregamento desnecessário. Neste exemplo, o w fornece o pixel measurement, no lugar de colocarmos 2x, 3x, saindo de um resolution-based para um srcset width-based. Dessa forma, conseguimos especificar o width de origem da imagem
<img src="img/img-480.png" alt="flores" width="auto" height="auto"
srcset="img/img-480.png 480w,
img/img-w960.png 960w,
img/img-w1440.png 1440w,
img/img-w1920.png 1920w"
sizes="(max-width:480px) 240px,
(max-width:960px) 480px,
(max-width:1440px) 690px,
1920px"
>
Figure e Caption
O elemento Figure vai encapsular o elemento caption e outros elementos gráficos, mas que vai manter a legenda junto da imagem.
figure
para usar em tudo que aparecer como uma figura, ilustrando algo.
figcaption
para demonstração de um conceito que precisa de uma legenda.
Você pode encontrar mais informações na documentação da Mozilla
Também tem um exemplo de implementação com as imagens no repo do Github
This content originally appeared on DEV Community and was authored by Jessilyneh
Jessilyneh | Sciencx (2025-01-17T12:04:00+00:00) Guia do HMTL prático. Retrieved from https://www.scien.cx/2025/01/17/guia-do-hmtl-pratico/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.