Elementos componentes do HTML 12

HTML - Elementos componentes do HTML 12

Como ficou definido no documento 2, os elementos html podem ser divididos nas seguintes classes :

Classes dos elementos HTML:

1-ELEMENTOS BÁSICOS: <body>
2-ELEMENTOS DE METADADOS: <base><head><link><meta><style>
3-ELEMENTOS DE SEÇÕES DE CONTEÚDO: <address><article><aside> <footer> <header><h1> a <h6><hgroup><nav>
4-ELEMENTOS DE CONTEÚDOS EM TEXTO: <dd><dl><dt><div><figure> <figcaption><hr><li><main><ol><p><pre><ul>
5-ELEMENTOS DE TEXTO EM LINHA: <a><abbr><b><br><cite><code> <data><dfn><em><i><kbd><mark><q><s><samp> <small><span><strong><sub><sup><time><u><var>
6-ELEMENTOS DE IMAGEM E MULTIMÍDIA: <img><area><audio><map><track><video>
7-ELEMENTOS DE CONTEÚDOS EMBARCADOS :<embed><object><param><source>
8-ELEMENTOS DE SCRIPT: <canvas><noscript><script>
9-ELEMENTOS DE MARCAÇÃO DE EDIÇÃO: <del> <ins>
10-ELEMENTOS DE CONTEÚDOS EM TABELA: <caption><col><colgroup><table> <tbody><td><tfoot><th><thead><tr>
11-ELEMENTOS DE FORMULÁRIO: <button><datalist><fieldset><form><input> <label><legend><meter><optgroup><option><output><progress> <select><textarea>
12-ELEMENTOS INTERATIVOS: <details><menu><menuitem><summary>

Neste documento discutiremos nenhuma das classes acima, são tags extras ou tags que já foram exintas.

As tags  são usadas para inserir comentários no código fonte HTML.

As tags de comentário é tido como uma 'Regra de boas práticas' e apesar de não influenciarem no código gerado em si é uma recomendação de todo bom profissional porque melhora muito na qualidade do código evitando erros e analises desnecessárias - aumentam a produtividade.

Os comentários não são exibidos nos navegadores nem sofrem qualquer tipo de processamento. São completamente ignorados pelo browser. . Contudo são enviados ao browser do cliente e por esse motivo não devem conter nada sigiloso ou que o cliente não deva saber.

Você pode usar comentários para explicar seu código, o que pode ajudá-lo quando você editar o código-fonte posteriormente. Isso é especialmente útil se você tiver muito código.

Comentários são muito úteis, por exemplo, quando precisamos destacar um código muito parecido com outro e não queremos fazer confusão entre eles. Citando um exemplo onde tenho 2 menus que vem logo em seguida : Um superior e outro lateral esquerdo. No meu código ficaria assim:
..........Código.......

..........Código.......

..........Código.......

..........Código.......

..........Código.......

Assim os menus estão claramente divididos.

Os comentários São muito usados para desativar temporariamente um trecho de código do programa. Por exemplo, tem uma grande modificação no site e estamos subindo tudo mas ainda está em fase de testes e queremos que os usuários do site não vejam as mudanças até estarem completamente terminadas e testadas.

Outra utilização muito importante dos comentários é evitar a análise de um código. Fica muito mais fácil colocar  do que ter que analisar 50 linhas de código para ver o que está fazendo.

Antigamente utilizavamos o comentário para esconder os scripts de browsers que não entendiam scripts. Foi numa época brontossaurica e hoje em dia todo browser trata scripts.

Cuidado : a tag  serve apenas para comentários dentro do html mas se o comentário fosse num bloco de código script seria // e se fosse numa css seria /* e */.

<!DOCTYPE>

A declaração <! DOCTYPE> deve ser a primeira linha em seu documento HTML, antes da tag <html>.

A declaração <! DOCTYPE> não é uma tag HTML mas sim uma instrução para o navegador da web sobre em qual versão do HTML a página foi escrita.

No HTML 4.01, a declaração <! DOCTYPE> refere-se a um DTD, porque o HTML 4.01 foi baseado no SGML.
O DTD especifica as regras para a linguagem de marcação, para que os navegadores processem o conteúdo corretamente.
O HTML5 não é baseado em SGML e, portanto, não requer uma referência a uma DTD.

Dica: sempre adicione a declaração <! DOCTYPE> aos seus documentos HTML, para que o navegador saiba que tipo de documento esperar.

O motivo principal para o uso desta tag é que de uma versão para outra do documento html algumas tags são exibidas de maneira diferente. Por exemplo, na versão 4 não há separação entre a tag body e o primeiro elemento (por exemplo, uma div) mas na versão 5 existe uma separação ( margem ). Portanto se no seu documento for importante não deixar ou deixar esse espaço a versão do documento poderia influenciar no seu leioute.

Exemplos de declaração:
html5 : <!DOCTYPE html>

html 4.01 strict : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
html 4.01 transacional : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html 4.01 com frameset : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
html 4.01 strict sem aceitar tags descontinuadas(deprecated) : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<bdi>

BDI significa Isolamento Bidirecional.
A tag <bdi> é nova em HTML5 e destaca uma parte do texto do restante que pode ser de um idioma diferente da página. A tag BDI ainda pode formatar a direção do texto da página.
A tag antiga BDO era muito similar a BDI mas apenas invertia o texto da direita para a esquerda mas com a tag BDI além dessa função tem a função de isolar a palavra que, normalmente, está em um idioma diferente da página.

No exemplo abaixo a intenção é isolar os nomes de usuário do seus respectivos scores:
        <ul>
            <li>Usuário <bdi>José</bdi>: 60 pontos</li>
            <li>Usuário <bdi>Luiz</bdi>: 80 pontos</li>
            <li>Usuário <bdi>Marcos</bdi>: 90 pontos</li>
        </ul>

Como o browser exibe:

Usuário José: 60 pontos
Usuário Luiz: 80 pontos
Usuário Marcos: 90 pontos

A inteção desta tag (BDI) é destacar o texto de outro texto em sua volta para efeitos de busca ou destaque.

<bdo>

bdo significa Substituição bidirecional.
A tag <bdo> é usada para substituir a direção do texto atual.
Foi substituída no HTML5 pela tag BDI(logo acima)

Exemplo:
        <bdo dir="rtl">
            Este texto vai da direita para a esquerda.
        </bdo>

Como o browser exibe:
Este texto vai da direita para a esquerda.

O parametro dir pode ser:
rtl : Direita para a esquerda, ao contrário do normal.
ltr : Esquerda para a direita, o normal.

<blockquote>

A tag <blockquote> especifica que uma seção do documento corrente que é citada de outra fonte.
Navegadores geralmente recuam elementos <blockquote> mas o Chrome não deu qualquer destaque ao texto.

Exemplo:
        <blockquote cite="http://www.worldwildlife.org/who/index.html">
            Há 50 anos, o WWF protege o futuro da natureza. A organização líder em conservação do mundo, o WWF trabalha em
            100 países e é apoiada por 1,2 milhão de membros nos Estados Unidos e perto de 5 milhões em todo o mundo.
        </blockquote>

Como o browser exibe:

Há 50 anos, o WWF protege o futuro da natureza. A organização líder em conservação do mundo, o WWF trabalha em 100 países e é apoiada por 1,2 milhão de membros nos Estados Unidos e perto de 5 milhões em todo o mundo.

<dialog>

A marca <dialog> define uma caixa de diálogo ou janela.
O elemento <dialog> facilita a criação de caixas de diálogo pop-up e modais em uma página da web.
Esta elemento apenas exibe o texto em seu interior com uma border média em sua volta.

Exemplo:
<dialog id="meuPrimeiroDialogo" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">

Como o browser exibe:

Ao utilizar esta tag deu um erro no Chrome onde o restante da página não foi exibido.
Ao abrir o console de depuração nenhuma mensagem de erro foi exibida.
O browser simplesmente parou de renderizar os elementos da página a partir deste ponto.
Aconselho a não usar ou testar bem testado antes de liberar para produção.

<iframe>

A tag <iframe> especifica uma janela dentro do documento html com conteúdo que pode ser até de outro site.
A janela é usada para incorporar outro documento no documento HTML atual.

Cuidado....A maioria dos browsers não suportam mais este elemento por motivos de segurança barrando este recurso por ser uma brecha grande porque o site atual pode ser idôneo mas o incorporado ao iframe não dá pra ser testado antes de abrir a página pois é feito no browser local. É o mesmo problema pelo qual o Flash foi retirado do HTML5 : Segurança.

Utilize a tag object em seu lugar:

Exemplo de utilização:
<iframe src="http://www.ideapedia.com.br"></iframe>

Como o browser exibe:

Coloquei a tag acima e obtive o seguinte erro:

'Refused to frame 'http://www.ideapedia.com.br/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://ideapedia.com.br".'

<picture>

Resumindo : Picture é um aperfeiçoamento da tag img para fazer o site responsivo. Até um certo limite exibimos uma imagem e depois desse limite outra imagem.
A tag <picture> oferece aos desenvolvedores da Web mais flexibilidade na especificação de recursos de imagem.
O uso mais comum do elemento <picture> será para direção de arte em designs responsivos. Em vez de ter uma imagem dimensionada para cima ou para baixo com base na largura da janela de exibição, várias imagens podem ser projetadas para preencher a janela de exibição do navegador de maneira mais agradável.
O elemento <picture> contém duas marcas diferentes: uma ou mais marcas <source> e uma marca <img>.
O elemento <source> possui os seguintes atributos:
srcset (obrigatório) - define o URL da imagem a ser exibida
media - aceita qualquer consulta de mídia válida que normalmente seria definida em um CSS
sizes - define um descritor de largura única, uma consulta de mídia única com descritor de largura ou uma lista delimitada por vírgula de consultas de mídia com um descritor de largura
type - define o tipo MIME
O navegador usará os valores do atributo para carregar a imagem mais apropriada. O navegador usará o primeiro elemento <source> com uma dica correspondente e ignorará as seguintes tags <source>.
O elemento <img> é necessário como a última tag filho do bloco de declaração <picture>. O elemento <img> é usado para fornecer compatibilidade com versões anteriores para navegadores que não suportam o elemento <picture> ou se nenhuma das tags <source> corresponder.
O elemento <picture> funciona de maneira semelhante aos elementos <video> e <audio>. Você configura fontes diferentes, e a primeira fonte que se encaixa nas preferências é a que está sendo usada.

Exemplo:
        <picture>
            <source media="(min-width: 650px)" srcset="../imagens/img_pink_flowers.jpg">
            <source media="(min-width: 465px)" srcset="../imagens/img_white_flower.jpg">
            <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
        </picture>

Como o browser exibe (redimensione o browser de 650px(flores pink) a abaixo de 465px(flores brancas):

<ruby>,<rt> e <rp> tags de idiomas leste asiático

A tag <ruby> especifica uma anotação em ruby.
Uma anotação ruby é um pequeno texto extra anexado ao texto principal para indicar a pronúncia ou o significado dos caracteres correspondentes.
Esse tipo de anotação é frequentemente usado em publicações japonesas, leste asiático ou árabe.
Use a tag <ruby> junto com as tags <rt> e / ou <rp>:
O elemento <ruby> consiste em um ou mais caracteres que precisam de uma explicação / pronúncia e um elemento.
<rt> que fornece essas informações, e
um elemento <rp> opcional que define o que mostrar para navegadores que não suportam anotações em ruby.

Exemplo:
Como o browser exibe:
        <ruby style="font-size:32px;">
            漢 <rt> ㄏㄢˋ </rt>
            <rp>Seu browser não aceita caracteres japoneses.</rp>
        </ruby>

Como o browser exibe:
漢ㄏㄢˋ Seu browser não aceita caracteres japoneses.

Em baixo ficou o texto em japonês.
Sobre ele ficou a explicação, em japonês também mas poderia ser a tradução ou coisa parecida.

<svg>

O elemento HTML <svg> é um contêiner para gráficos SVG.
O SVG possui vários métodos para desenhar caminhos, caixas, círculos, texto e imagens gráficas.
É utilizado com javascript e outros recursos.

O que é SVG?
SVG significa Scalable Vector Graphics
SVG é usado para definir gráficos para a Web
SVG é uma recomendação do W3C

        <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
        </svg>

Exemplo:

Como o browser exibe:

<template>

A tag <template> mantém seu conteúdo oculto do cliente.
O conteúdo dentro de uma tag <template> não será renderizado.
O conteúdo pode ser visível e renderizado posteriormente usando JavaScript.
Use a tag <template> quando tiver o código HTML que deseja usar repetidamente, mas não até solicitar. Para fazer isso sem a tag <template>, você deve criar o código HTML com JavaScript para impedir que o navegador renderize o código.

Exemplo de código:
        <template>
            <h2>Flor</h2>
            <img src="../imagens/img_white_flower.jpg">
        </template>

Como o browser exibe:

<wbr>

A tag <wbr> (Oportunidade de quebra de palavra) especifica onde, em um texto, seria aceitável adicionar uma quebra de linha.

Dica: quando uma palavra é muito longa ou você tem medo de que o navegador interrompa suas linhas no local errado, você pode usar o elemento <wbr> para adicionar oportunidades de quebra de palavras.

Exemplo:

<p>Para_aprender_AJAX,_você_deve_estar_familiarizado_com_o_objeto_de_solicitação_XML_<wbr>HttpRequest<wbr>.</p>

Como o browser exibe:

Para_aprender_AJAX,_você_deve_estar_familiarizado_com_o_objeto_de_solicitação_XML_HttpRequest.

O espaço é um elemento de quebra de parágrafo quando redimensionamos o browser. Por esse motivo troquei todos os espaços do texto acima por sublinhado.
Redimensione a tela e veja onde quebra.

Importante : Outra tag irmã desta que você deve saber é a  . Ela é o contrário da wbr, ou seja, exibe um espaço e não permite que exista quebra de página no ponto onde a tag se encontra, apesar dela ser exibida como espaço.