Elementos componentes do HTML 12

Como ficou definido no documento 4, os elementos html podem ser divididos nas seguintes classes :
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.

A tag commentário é usada para inserir comentários no código fonte.
Os comentários não são exibidos nos navegadores.
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.
Cuidado : a tag  serve para o html mas num bloco de script seria // para uma linha ou numa css seria /* e */.

<!DOCTYPE>

A declaração <! DOCTYPE> deve ser a primeira coisa em seu documento HTML, antes da tag <html>.
A declaração <! DOCTYPE> não é uma tag HTML; é uma instrução para o navegador da web sobre em qual versão do HTML a página está 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. 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> isola uma parte do texto que pode ser formatada em uma direção diferente de outro texto fora dela.
Esse elemento é útil ao incorporar conteúdo gerado pelo usuário com uma direcionalidade desconhecida.

Exemplo ( Isola os nomes de usuário das configurações de direção do texto ao redor ):
        <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

<bdo>

bdo significa Substituição bidirecional.
A tag <bdo> é usada para substituir a direção do texto atual.

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>

Como o browser exibe:
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:
        <table>
            <tr>
                <th>Janeiro <dialog open>Mês Corrente-Este é um texto dentro da tag dialog</dialog></th>
                <th>Fevereiro</th>
                <th>Março</th>
            </tr>
            <tr>
                <td>31</td>
                <td>28</td>
                <td>31</td>
            </tr>
        </table>

Como o browser exibe:

Janeiro Mês Corrente-Este é um texto dentro da tag dialog	Fevereiro	Março
31	28	31

<html>

A tag <html> informa ao navegador que este é um documento HTML, ou seja, contém metadados HTML.
A tag <html> representa a raiz de um documento HTML, ou seja, todos os demais elementos dependem dela para funconar.
A tag <html> é o contêiner para todos os outros elementos HTML (exceto a tag <! DOCTYPE>).

<iframe>

Cuidado....alguns browsers não suportam mais este elemento e alguns sistemas de segurança barram este recurso por ser uma brecha grande de segurança porque o site atual pode ser idôneo mas o incorporado ao iframe não dá pra ser testado pois é feito pelo browser local.
A tag <iframe> especifica um quadro embutido, ou seja, dentro do documento html uma janela é aberta com outro conteúdo que pode ser até de outro site.
Um quadro embutido é usado para incorporar outro documento no documento HTML atual.

Como o browser exibe:

<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.