DEV Community

Jessilyneh
Jessilyneh

Posted on

5 1 1 1 1

Guia do HMTL prático

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

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>
Enter fullscreen mode Exit fullscreen mode

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> 
Enter fullscreen mode Exit fullscreen mode

Listas ordenadas

lista ordenada de alguma forma, seja por ordem numérica ou alfabética.

Lista numérica
  1. ordered item
  2. ordered item
  3. ordered item
            <ol>
                <li>ordered item</li>
                <li>ordered item</li>
                <li>ordered item</li>
            </ol>
Enter fullscreen mode Exit fullscreen mode
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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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:

Equação quadrática

Para isso, seu código HTML deverá ser assim:

$x = \frac{{-b \pm \sqrt{{b^2 - 4ac}}}}{{2a}}$

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

<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>
Enter fullscreen mode Exit fullscreen mode

Navegação

Links

<a href="http://github.com">Click here</a>

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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"
            >
Enter fullscreen mode Exit fullscreen mode

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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay