Principais elementos do HTML 5

Dentro dos elementos estruturais gerais do HTML 5 (Header, Nav, Article, Section, Aside e Footer), encontramos os elementos aglutinadores de conteúdo, que organizam a marcação do código (São conhecidos também como grupo de conteúdos). Esses grupos de conteúdos, são os responsáveis pelas principais sessões de texto dentro da web, como títulos, subtítulos, parágrafos, listas, citações e outros. Os principais elementos que cumprem essa função são:

Gerais

- <h1> - Título: Indica que o conteúdo inserido entre <h1> </h1> é um título. É possível também inserir subtítulos utilizando as tags <h2>,<h3>,<h4>,<h5> e <h6>.

- <div> - Bloco: serve para alterar o estilo em partes específicas da página e posicionar objetos. Devemos iniciar pela tag <div> e terminar com a tag </div>, colocando todo conteúdo entre as duas.Esta div também pode ser definida como uma classe.
Exemplo: <div class=”nome_da_div”></div>

- <p> - Parágrafo: Define uma parte do conteúdo que deve ser exibido como um parágrafo.

- <hr> - Linha horizontal: Representa uma ruptura temática entre parágrafos de um artigo ou seção ou qualquer conteúdo mais longo. Separa o conteúdo através de uma linha.

- <blockquote> - Citação: Representa uma citação, ele marca um bloco de citação. Geralmente os navegadores exibem o blockquote com uma edentação (Pequeno recuo no texto.)

- <br> ou <br/>- Quebra de linha: Força uma quebra de linha

- <wbr> ou <wbr>- Oportunidade de quebra de linha: Usado para indicar onde pode ocorrer a quebra de linha no texto.

Formatações visuais

Apesar de serem formatações visuais no textos, também tem o poder de realçar ou intensificar o significado

de uma palavra ou frase que está sendo destacada.

- <b> - Negrito: Destaca visualmente tornando o conteúdo em negrito, porém não indica maior relevância semântica.
- <strong> - Negrito: Destaca visualmente o conteúdo em negrito e também confere ao item uma importância particular, um destaque dentro do contexto.

- <i> - Itálico: Torna o texto em itálico sem relevância semântica, é somente algo visual.
- <em> - Itálico: Torna o texto em itálico, porém enfatiza ou exagera o significado.

- <small> - Texto pequeno: torna o conteúdo de texto com tamanho reduzido.
- <sub> - Subescrito: Marca um texto sobrescrito (Desloca o texto para baixo).
- <sup> - Superescrito: Marca o texto (Desloca-lo para cima).
- <s> - Riscado: Marca um texto riscado.

- <cite> - Citações: Indicados para fazer referências ou citações a outros conteúdos
- <q> - Citações: Indicados para fazer referências ou citações a outros conteúdos
- <dfn> - Significados e abreviações: Marca um termo a ser definido no próprio documento ou em documento externo.
- <abbr> - Significados e abreviações: Permite identificar o significado de uma determinada sigla ou abreviação que foi definida pelo elemento dfn.

Listas


Lista Simples 

- <ol> Lista ordenada: São usadas para indicar alguma sequência ou numeração.

 - <ul> Lista não ordenada: são usadas para listar itens, sem se preocupar com sua sequência.

 - <li> Item da lista (Usada nas lista "ul" e "ol"): <li> é usada para cada item da lista. Exemplo:

             <ol>

                     <li>item 1</li>

                     <li>item 2 </li>

            </ol>


Lista de Descrição

Constrói um glossário ou legenda, elas servem para explicar o conteúdo de uma forma didática. Listas de definição são constituídas de duas partes: um termo e uma descrição. Para codificar uma lista de definição são necessários três elementos HTML:

 - <dl> Lista de descrição

 - <dt> Item a ser descrito

 - <dd> A descrição

Exemplo:

           <dl>

                     <dt>Sapo</dt>

                     <dd>Criatura verde pegajosa</dd>

                     <dt>Banana</dt>

                     <dd>Fruta com casca amarela</dd>

            </dl>

Links

- <a> - Elemento link: O elemento ancora define uma hiperligação. Para criar um link, devemos inserir dentro desse elemento o atributo "href", ele indica para onde o link será apontando. Outro atributo importante para essa tag, é o "target", ele indicará se o link abrirá na mesmo janela ou em outra aba no navegador. Deve ser inserido target = "_blanck" para abrir o conteúdo em uma nova janela e target = "_selfi" para abir a nova página, porém permanecer na mesma janela do navegador.

Exemplo:

<a href = "folig.blogspot.com" target = "_blank"> Abrir em uma nova janela </a>

Também dentro do elemento link, nós podemos inserir o atributo "title", quando colocado entre aspas, pode explicar conteúdo do link para os mecanismos de busca.

Exemplo:

 <a href = "folig.blogspot.com" title = "Blog do folig"> Folig </a>

Observação: "target" e "title" são opcionais.

Conteúdo Multimídia

- <img> - Imagem: Utilizada para inserção de imagens como jpeg, png, giff e svg. É um elemento vazio, por esse motivo pode ser escrito sem ou com a tag de fechamento. Em seu uso mais comum, é utilizado o atributo "src" para indicar o endereço da imagem dentro de uma pasta ou na web. Utilizamos também o atributo "alt" como alternativa de texto, ou seja, uma descrição da imagem (muito utilizada por questões de acessibilidade).
Para indicar a largura e a altura, são utilizados os atributos "width" para largura e "height" para altura.

Exemplos:

<img src = "folig/foto.jpg" alt="Foto Folig">

 <img src = "folig/foto.jpg" alt="Foto Folig" height="300" width="200" >

Link como imagem

<a href="folig.blogspot.com" title="folig"><img src="imagens/logo_folig.jpg" alt="Pg Folig"></a>

--------------------------------------------------------------------------------------------------------------------

- <audio> - Áudio: Permite a incorporação e reprodução de arquivos de áudio na página (mp3, ogg ou oga, aceito em quase todos navegadores). Utiliza-se o atributo "autoplay" para reprodução automática dos áudios, "controls" para permitir o navegador exibir uma interface de controle, "loop" para indicar repetição do som e "preload" para pré permitir que o arquivo seja carregado na página. O src indica o endereço do áudio.

Exemplo:

<audio src="audio/mozart_trompa.mp3" autoplay controls loop preload ></audio>

Inserindo o mesmo áudio em diversos formatos (Importante: Nesse caso utilizamos o atributo source)


 <audio controls>


<source src="audio/mozart_trompa.aac"/>

<source src="audio/mozart_trompa.ogg"/>

<source src="audio/mozart_trompa.mp3"/>

<p>Baixe o arquivo de áudio em formato <a href="audio/mozart_trompa.mp3">.mp3</a></p>

</audio>

--------------------------------------------------------------------------------------------------------------------

- <vídeo> - Vídeo: Permite a incorporação e reprodução de vídeos na página web. São utilizados os atributos "autoplay" para reprodução automática, "controls" para exibir interface de controles, "loop" para repetição do conteúdo, "preload" para o pré-carregamento do arquivo na página e "src" para informar a origem do conteúdo.

Além dos atributos citados acima, esse elemento também permite os atributos "height" para definir em pixel a altura do player , "widthg" para definir em pixel a altura do player e "poster" para exibir uma imagem caso o browser não carregue o arquivo.

Exemplo:

Com pré carregamento e opção de baixar conteúdo

<p>Seu browser não é compatível, <a href="videos/video.m4v">baixe este vídeo em formato

MP4</a></p>

</video>

Com atributo poster, carregando assim uma imagem para o vídeo caso seja necessário

Servindo o vídeo em vários formatos



<video height="272" width="360" controls preload poster="videos/poster_video.jpg">

<source src="videos/video.m4v"/>



<source src="videos/video.ogv"/>



<source src="videos/video.webm"/>



<p><a href="videos/video.m4v">Baixe o vídeo</a></p>

</video>

Oferecendo o Flash Player como alternativa e link para download


 <video height="272" width="360" controls preload poster="videos/poster_video.jpg">




<source src="videos/video.m4v"/>



<source src="videos/video.ogv" />



<source src="videos/video.webm"/>



<object height="272" width="360" type="application/x-shockwave-flash" data="videos/player_flash.swf">



<param name="movie" value="videos/player_flash.swf"/>



<param name="flashvars" value="autostart=false&controlbar=over&file=videos/video.flv"/>



</object>



<p><a href="videos/video.m4v">Baixe o vídeo</a></p>



</video>

--------------------------------------------------------------------------------------------------------------------

- <figure> Inserção de figuras: marca um bloco de conteúdo independente que contém uma imagem, um gráfico ou um diagrama. Utilizamos o atributo "figcaption" para exibir uma legenda para o elemento figure. Esse elemento também pode ser utilizado para demarcar um grupo de figuras.

Exemplo:


 <figure>


<img src="imagens/trompete.jpg" alt="Trompete Bb">

<img src="imagens/trompete_d.jpg" alt="Trompete D">

<figcaption>Trompetes fabricados por <a href="http://www.bachbrass.com">Vincent Bach Co.</a></figcaption>

</figure>

Observação: Ele deve ser utilizado para marcar um bloco de conteúdo independente que normalmente contém imagens, gráficos, diagrama ou ilustração e que faz referências ao conteúdo principal do documento.

Fontes:

http://www.maujor.com/blog/2006/04/26/dl-lists/

https://cursos.timtec.com.br/ - Curso de html 5

https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5/HTML5_element_list
http://flatschart.com/html5/audio.html

Advertising

Pages