Curso de HTML5 — Parte 2/2

Curso rápido de HTML5, texto semânticos

[click here for English]

Clique aqui para ir para a parte 1!

Textos Semânticos

Usa-se para definir o significado, estrutura, ou estilo de uma palavra, linha, ou de qualquer outro tipo de texto.

• <abbr> Representa uma abreviação e opcionalmente fornece uma descrição completa para ela. Se presente, o atributo title deve conter a descrição completa e apenas ela.
• <b> Representa um intervalo de texto estilisticamente diferente do texto normal, sem transmitir qualquer importância ou relevância. Ele é geralmente usado para destacar palavras-chaves em um resumo, nomes de produtos em um comentário ou outros vãos de texto cuja a apresentação típica seria negrito. Outro exemplo de seu uso é como marcação da frase principal de cada parágrafo de um artigo.
• <br> (Break-Row) Quebra-de-linha, produz uma quebra de linha em um texto (carriage-return). É útil para escrever poemas ou um endereço, onde a divisão de linha é significante.
• <cite> Representa uma referência a um trabalho artístico. Deve incluir o título do trabalho ou uma URL de referência, que pode ser em uma forma abreviada de acordo com as convenções usadas para a adição dos metadados de citação.
• <em> Marca o texto que tem ênfase. O elemento <em> pode ser alinhado, com cada nível de aninhamento indicando um grau maior de ênfase.
• <i> Representa uma parte do texto que é destacada do restante por algum motivo, por exemplo, termos técnicos, expressões de outros idiomas ou pensamentos de personagens fictícios. Normalmente, é apresentado com o uso do tipo “itálico”.
• <span> É um contêiner genérico em linha para conteúdo fraseado, que não representa nada por natureza. Ele pode ser usado para agrupar elementos para fins de estilo (usando os atributos class ou id ), ou para compartilhar valores de atributos como lang. Ele deve ser usado somente quando nenhum outro elemento semântico for apropriado. <span> é muito parecido com o elemento <div> , entretanto <div> é um elemento de nível de bloco enquanto <span> é um elemento em linha.
• <strong> Este elemento inclui apenas os global attributes(atributos globais).
• <p> Representa um parágrafo do texto. Parágrafos são, geralmente, representados em mídia visual , como bloco de texto que são separados dos blocos adjacente por espaços brancos verticais e/ou recuo de primeira-linha. Parágrafos são elementos em bloco.

Listas

• <ul> O elemento HTML de Lista desordenada representa uma lista de itens sem ordem rígida, isto é, uma coleção de itens que não trazem uma ordenação numérica e as suas posições, nessa lista, são irrelevantes. Caracteristicamente, os itens em uma lista desordenada são exibidos com um marcador que pode ter várias formas, como um ponto, um círculo, ou um quadrado. O tipo de marcador não é definido na descrição HTML da página, mas na CSS associada, utilizando a propriedade list-style-type.
• <li> O elemento HTML <li> (ou a Lista dos Itens de um elemento HTML) é usado para representar um item que faz parte de uma lista. Este item deve estar contido em um elemento pai: uma lista ordenada (<ol>), uma lista desordenada (<ul>), ou um menu (<menu>) e representa uma única entidade dessa lista. Em menus e listas desordenadas a relação de itens é exibida, normalmente, usando pontos de marcação (as bolinhas). Em listas ordenadas eles são, comumente, mostrados com algum contador ascendente — como um número, ou letra — à sua esquerda.
• <ol> O Elemento HTML de lista ordenada representa uma lista de itens ordenados. De forma característica esses itens ordenados em uma lista são mostrados com uma contagem que os precede, que pode ser de qualquer tipo, como numerais, letras, algarismos romanos, ou simples símbolos. Esse modelo numérico não é definido na descrição html da página, mas na folha de estilos CSS associada, pela propriedade list-style-type.

Imagem

• <img> Representa a inserção de imagem no documento, sendo implementado também pelo HTML5 para uma melhor experiência com o elemento <figure> e <figcaption>.
• <figure> Representa o conteúdo independente, frequentemente com uma legenda (<figcaption>), e é normalmente referido como uma única unidade.
• <figcaption> Representa a legenda da imagem.

Tabelas

• <table> Representa dados em duas dimensões ou mais.
• <caption> O Elemento HTML Subtítulo de Tabela representa o título de uma tabela. Embora ele seja sempre o primeiro filho de um <table>, seu estilo, usando CSS pode colocar ele em qualquer lugar relativo a tabela.
• <tbody> O elemento HTML <tbody> encapsula um conjunto de linhas da tabela (<tr> elementos), indicando que eles compõem o corpo da tabela (<table>).
• <td> A célula da tabela HTML elemento (<td>) define uma célula de uma tabela que contém os dados. Participa no modelo da tabela.
• <tfoot> Define um conjunto de linhas as quais farão parte do rodapé de uma tabela HTML.
• <th> Define uma célula cabeçalho do grupo de células de sua tabela. A exatidão natural deste grupo é definida pelos atributos escopo e headers.
• <thead> Define um conjunto de linhas que definem o cabeçalho das colunas da tabela.
• <tr> Define uma linha de células em uma tabela. As células da linha podem ser estabelecidas usando uma combinação de elementos <td> (célula de dados) e <th> (célula de cabeçalho).

Separação de conteúdo

• <div> É um container genérico para conteúdo de fluxo, que de certa forma não representa nada. Ele pode ser utilizado para agrupar elementos para fins de estilos (usando class ou id), ou porque eles compartilham valores de atributos, como lang. Ele deve ser utilizado somente quando não tiver outro elemento de semântica (tal como <article> ou <nav>).
• <hr> Representa uma quebra temática entre elementos de nível de parágrafo (por exemplo , uma mudança da cena de uma história, ou uma mudança de tema com uma seção). Nas versões anteriores do HTML, representava uma linha horizontal. Pode continuar sendo exibida como uma linha horizontal nos navegadores, mas agora está definida em termos semânticos, em vez de termos de apresentação.
• <iframe> O elemento HTML inline frame representa um contexto de navegação aninhado, efetivamente incorporando outra página HTML para a página atual. Em HTML 4.01, um documento pode conter uma cabeça e um corpo ou uma cabeça e um conjunto de quadros, mas não tanto um corpo e um conjunto de quadros. No entanto, um <iframe> pode ser usado dentro de um corpo de documento normal. Cada contexto de navegação tem sua própria história de sessão e o documento ativo. O contexto de navegação que contém o conteúdo incorporado é chamado o pai de contexto de navegação. O contexto de navegação de nível superior (que não tem um pai) normalmente é a janela do navegador.
• <address> Fornece informações de contato para seu ancestral <article> ou <body> mais próximo; no segundo caso, ele se aplica ao documento inteiro.
• <article> Representa uma composição independente em um documento, página, aplicação, ou site, ou que é destinado a ser distribuído de forma independente ou reutilizável, por exemplo, em sindicação. Este poderia ser o post de um fórum, um artigo de revista ou jornal, um post de um blog, um comentário enviado por um usuário, um gadget ou widget interativos, ou qualquer outra forma de conteúdo independente.
• <aside> Representa uma seção de uma página que consiste de conteúdo que é tangencialmente relacionado ao conteúdo do seu entorno, que poderia ser considerado separado do conteúdo. Essas seções são, muitas vezes, representadas como barras laterais. Elas muitas vezes contêm explicações laterais, como a definição de um glossário; conteúdo vagamente relacionado, como avisos; a biografia do autor; ou, em aplicações web, informações de perfil ou links de blogs relacionados.
• <footer> Representa um rodapé para o seu sectioning content (conteúdo de seção) mais próximo ou sectioning root elemento (ou seja, seu parente mais próximo <article>, <aside>, <nav>, <section>, <blockquote>, <body>, <details>, <fieldset>, <figure>, <td>). Normalmente um rodapé contém informações sobre o autor da seção de dados, direitos autorais ou links para documentos relacionados.
• <header> Representa um grupo de suporte introdutório ou navegacional. Pode conter alguns elementos de cabeçalho mas também outros elementos como um logo, seções de cabeçalho, formulário de pesquisa, e outros.
• <main> Define o conteúdo principal dentro do <body> em seu documento ou aplicação. Entende-se como conteúdo principal aquele relacionado diretamente com o tópico central da página ou com a funcionalidade central da aplicação. O mesmo deverá ser único na página, ou seja, dentro do elemento <main> não deverão ser incluídas seções da página que sejam comuns a todo o site ou aplicação, tais como mecanismos de navegação, informações de copyright, logotipo e campos de busca (a não ser, é claro, caso a função principal do documento seja fazer algum tipo de busca).
• <nav> Representa uma seção de uma página que aponta para outras páginas ou para outras áreas da página, ou seja, uma seção com links de navegação.
• <section> Representa uma seção genérica contida em um documento HTML, geralmente com um título, quando não existir um elemento semântico mais específico para representá-lo.

Formulários

• <button> Representa um botão clicável.
• <datalist> Contém um conjunto de elementos <option> que representam as opções possíveis para o valor de outros controles.
• <fieldset> É usado para agrupar elementos, assim como labels (<label>), dentro de um formulário web.
• <form> Representa uma seção de um documento que contém controles interativos que permitem ao usuário submeter informação a um determinado servidor web.
• <input> Este elemento inclui os atributos globais.
• <label> Representa uma legenda para um item em uma interface de usuário. Ele pode estar associado com um elemento de controle, colocando este dentro do elemento label, ou usando o atributo for. Tal controle é chamado o controle etiquetado do elemento etiqueta. Um input pode ser associado a diversas etiquetas (<label>s).
• <legend> Representa um rótulo para o conteúdo do seu ancestral <fieldset>.
• <meter> Pode representar um valor escalar dentro de um intervalo conhecido ou um valor fracionário.
• <optgroup> Em um Formulário Web, o elemento HTML <optgroup> cria um agrupamento de opções dentro do elemento <select>.
• <option> Em um formulário Web, o elemento HTML <option> é usado para criar um controle que representa um item dentro de um elemento HTML5 <select>, <optgroup> ou <datalist>. <output> O elemento de saída () é um elemento no qual um site ou aplicativo pode injetar os resultados de um cálculo ou o resultado de uma ação do usuário.
• <progress> É usado para visualizar o progresso de uma tarefa. Embora as especificidades de como é mostrado ficam a cargo do desenvolvedor, tipicamente, é mostrado como uma barra de progresso.
• <select> Representa um controle que apresenta um menu de opções. As opções dentro do menu são representadas pelo elemento <option>, que podem ser agrupados por elementos <optgroup>. As opções podem ser pré-selecionadas para o usuário.
• <textarea> Representa um controle de edição para uma caixa de texto, útil quando você quer permitir ao usuário informar um texto extenso em formato livre, como um comentário ou formulário de retorno.

Elementos interativos

• <details> É usado como uma ferramenta de onde o usuário irá obter informações adicionais.
• <summary> É utilizado como um sumário ou legenda para o conteúdo de um elemento <details>.
• <dialog> Representa uma caixa de diálogo ou outro componente interativo, tal como um inspetor ou janela.

Estrutura HTML5

Validador

A W3 oferece um link para analisar a estrutura do HTML e verificar erros de sintaxe.

Markup Validation Service

Padrão de Codificação

Toda linguagem deixa uma gama de possibilidades de trabalhar com ela, o HTML não é diferente, você pode escrever tags em maiúscula ou minúsculas ou não colocar certos atributos e etc.

Para deixar a escrita de forma mais compatível o ideal é ter um padrão de codificação.

Padrão de Codificação — HTML

Documentação

Toda Linguagem tem documentação e o HTML não seria diferente, uma ferramenta que gosto bastante para ler documentação é o DevDocs.

DevDocs

Caso precise de alguma dica de forma mais rápida use o devhints

HTML cheatsheet

Clique aqui para ir para a parte 1!

Obrigado por ler!

Se você tiver alguma dúvida, reclamação ou dica, pode deixar aqui nos comentários. Vou ter o maior prazer em responder!

😊😊Até mais! 😊😊