Como criar documentos HTML usando elementos e atributos HTML?

Neste artigo, iremos guiá-lo pelos fundamentos do HTML. No artigo anterior , A World Wide Web , já cobrimos o que significa HTML, de onde vem a linguagem e para que é usada: para criar a parte do conteúdo de suas páginas da web. Já sabemos que este conteúdo é colocado entre as tags: <tag> para abrir e </tag> para fechar.

Estaria além do escopo deste artigo fornecer uma referência completa a todas as tags ou elementos HTML e todos os seus atributos. Existem algumas referências boas simplesmente Google “HTML” seguido por um nome de tag sobre a qual gostaria de saber mais e você encontrará ótimas fontes alternativas.

Portanto, descreveremos apenas as tags HTML mais comumente usadas neste artigo, agrupadas pela função que desempenham no documento. Por exemplo, todas as tags que podem ser usadas em uma tabela são agrupadas sob o título table.

Versões HTML

Desde a sua criação, houve de Claro, várias versões e sabores diferentes de HTML. Os mais notáveis ​​são HTML4, XHTML e HTML5:

• HTML4 : este é o último de uma série de versões de HTML e é o que a maioria das pessoas implicitamente se referem quando falam sobre HTML.
• XHTML : Isso é diferente de HTML e uma tentativa de fazer do HTML um membro da família XML, dando-lhe regras mais rígidas. Uma vantagem é que seria mais fácil usar ferramentas e linguagens destinadas a manipular e traduzir documentos XML. No entanto, o interesse em manter esse padrão parece ter diminuído.
• HTML5 : este é o garoto mais novo no proverbial bloco HTML. Muitos livros foram publicados sobre isso e, se você leu um deles, você terá descoberto que HTML5 é mais do que apenas uma nova versão da linguagem de marcação. Com certeza, ele vem com algumas tags novas, como as tags <nav> ou <section>. HTML5 também apresenta o uso de atributos de dados personalizados, como os data-whateveryouchoose que você pode usar em seu documento. Mais tarde, você pode manipulá-los usando JavaScript. É uma maneira de passar dados dentro de um elemento; daí o nome escolhido: data-*.

Eu disse JavaScript? Todos os outros novos recursos em HTML5 são, na verdade, APIs de JavaScript como HTML5 Canvas. O Canvas permite que você desenhe coisas em sua página da web, gráficos de pizza, por exemplo. Por mais empolgantes que sejam essas APIs, elas estão além do escopo deste artigo.

HTML semântico e de apresentação

A abordagem que estamos fazendo neste artigo é usar apenas elementos HTML e atributos que são cobertos por todos os três padrões. Na prática, isso significa que não usaremos nenhum atributo HTML4 que tenha desaparecido no HTML5 e não usará nenhum elemento ou atributo HTML5 que não existia no HTML4.

Por outro lado, nós não queremos desencorajar o uso de coisas novas, então listaremos os elementos específicos do HTML5 em uma lista separada. Também usaremos os novos elementos nonoss próximos artigos, onde apresentaremos uma estrutura CSS/JavaScript legal.

Pode-se facilmente dividir os elementos HTML em dois grupos. O primeiro grupo consiste em elementos que se referem a partes de um documento: cabeçalhos, parágrafos, tabelas, formulários, listas e assim por diante. ( <h1>, <h2>, <p>, <table>, <ul>). Chamamos isso de HTML semântico, pois se referem aos nomes das coisas; eles descrevem o que são.

Outro grupo contém os elementos utilizados para indicar como as coisas parecem: como eles estão alinhados, que fonte é usada, se ele estiver em negrito ou itálico, e assim por diante ( <center>, <font>, <b>, <i>), e poderíamos chamá-los HTML de apresentação. O mesmo é verdadeiro para atributos HTML. class="green" ou id="chapter" seria semântico, enquanto width="150px" ou valign="top" seria apresentacional.

Nota

É recomendação do W3C usar CSS para coisas de apresentação, e nós seguimos essa recomendação. Desta forma, você também evitará aprender um monte de coisas novas, apenas para descobrir mais tarde que elas não são mais usadas, pois a maioria dos elementos e atributos HTML4 que não estão mais disponíveis em HTML5 são de apresentação. A palavra que você encontrará online para indicar que algo não é mais usado está obsoleta .

Quando encontrei essa palavra pela primeira vez, interpretei-a erroneamente como depreciada. Essa palavra poderia ter sido a melhor escolha. De qualquer forma, se os elementos e atributos forem rotulados como tal, evite usá-los.

Como consequência, nós não mostraremos exemplos bonitos de documentos HTML neste artigo, como a parte que o deixará bonito é o CSS, terá que esperar um pouco até chegarmos ao a falar sobre CSS.

A estrutura e sintaxe de um documento HTML

Um documento HTML é um arquivo de texto com um nome terminando em .html, para exemplo hello.html,. Um documento HTML moderno e mínimo tem a seguinte aparência:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8"/>
<title>Hello, world</title>
</head>
<body>
<h1>Hello, World</h1>
</body>
<html>

Doctype

A primeira linha especifica otipo de documento ( <!DOCTYPE html>). Hoje, isso pode ser tão simples quanto uma palavra html dizendo a um navegador que esse arquivo deve ser interpretado como um documento HTML5. Documentos gravados com as especificações mais antigas contêm o nome dessa especificação seguido por um caminho para um Arquivo de definição de tipo de documento ( DTD ) que pode ser usado para examinar a conformidade do documento. As coisas são muito mais flexíveis hoje em dia.

<html>

Esta é a raiz do documento. Tudo no restante do documento estará dentro desta htmltag. O que está dentro da htmltag consiste em duas seções, o head e o body.

<head>

A seção head contém uma ou mais <meta> tags. Aquele em nosso exemplo anterior especifica que a codificação da parte do texto do documento deve estar em UTF-8 .

Esta seção também é onde a <title> marca vive. O texto dentro desse elemento é o texto que será exibido na parte superior da janela do navegador e é examinado intensamente pelos mecanismos de pesquisa. Portanto, é importante sempre incluir uma tag title e que seu conteúdo seja correto e significativo.

Além disso, a seção <head> é usada para incluir mais informações que o navegador terá que ler antes que a parte body do documento seja carregada. Seu exemplo mais típico serão os caminhos para as Folhas de estilo CSS que são usadas para o documento.

<body>

Dentro da tag body está o conteúdo central do nosso documento. Como consequência, se houver certos elementos de estilo que você deseja ser usado em todo o documento, você poderá fazer isso simplesmente estilizando a tag <body>. Iremos lembrá-lo sobre isso mais tarde. Claro, primeiro temos que aprender o que podemos colocar dentro do corpo.

Sintaxe para tags ou elementos dentro do documento

A sintaxe de uma tag HTML é muito simples:

<tag attribute1="value1" attribute2="value2">text</tag>

Isso é seguido por a tag next. Você pode colocar tudo em uma única linha ou cada par de tags em uma linha separada para facilitar a leitura, pois novas linhas e espaços entre os pares de tags são ignorados.

Dentro da parte text, os espaços não são ignorados, mas vários espaços em uma linha são reduzidos a um. Portanto, se você quiser inserir mais espaços, terá que usar um método diferente (consulte as entidades HTML posteriormente).

Para elementos que não têm conteúdo, existe uma notação abreviada. Podemos usar:

<tag/>

Usamos isso em vez de:

<tag></tag>

Em nosso exemplo, a notação abreviada é usada para:

<meta charset="utf-8"/>

O atributo class pode ter vários valores, caso em que seria escrito como:

<tag class="value1 value2">text<?tag>

Não está escrito assim:

<tag class="value1" class="value2">text<tag>

Esta última linha demonstra uma omissão comum quando um atributo class é adicionado sem perceber que um atributo de classe já estava presente. Nesse caso, o segundo será ignorado. O navegador também irá ignorar todos os elementos e atributos que não são reconhecidos como tags HTML.

Ao contrário de compiladores para linguagens de programação da velha escola, você vainunca vê uma mensagem de erro quando você digita algo errado. As coisas simplesmente não parecerão certas ou você poderá até obter uma tela em branco. É por isso que é extremamente produtivo usar um editor de HTML ou outra ferramenta que reconheça tags e atributos como HTML válidos, de preferência ferramentas que os exibam em cores.

Comentários HTML

Qualquer lugar dentro do código HTML, você pode inserir um comentário: um lembrete para você mesmo, para a posteridade ou (provavelmente mais importante) para outras pessoas de sua equipe que precisam compartilhar seu código. A sintaxe é muito simples. Qualquer coisa que esteja dentro de um bloco HTML pode ser comentada, colocando <!--na frente e --> depois dele:

Recomendamos fortemente inserir mais comentários em vez de menos. Aplicar comentários também é útil quando alguém pede para você remover algo do site e você tem a sensação de que pode voltar. Porque se você remover: se foi, se foi!

Por outro lado, cada linha de comentário HTML adiciona uma linha ao seu arquivo e também o torna visível para o mundo, já que cada navegador tem a opção de ver o código-fonte. Portanto, depois de começar a usar uma linguagem do lado do servidor, como PHP, que você aprenderá em outros artigos, é melhor colocar seus comentários dentro desse código. Você descobrirá que a sintaxe para comentários em CSS e PHP é diferente.

Conforme prometido, agora descreveremos as tags e atributos HTML mais importantes, divididos em grupos de funcionalidade. Vamos começar com o que começou tudo: links.

Links

Muito provavelmente, a primeira web página que já foi criada continha um link para a segunda página da web. Para colocar um link em uma página, usamos a tag âncora <a>.

A tag e os atributos <a>

Se simplesmente colocarmos algum texto dentro de uma tag <a>, nada realmente acontecerá quando você clicar nela, a menos que você programe o evento em JavaScript. No entanto, você pode dizer pela forma como ele aparece na tela que a intenção é que seja um link. De padrão o conteúdo de uma tag <a> é renderizado no (agora provavelmente notório) estilo sublinhado e azul.

<a>Clique Aqui</a>

O atributo href

Para fazer o link funcionar, você precisa usar o atributo de referência href ou hipertexto . Você pode vincular a outro página da web, externa ou local, um documento ou imagem, ou outra seção da página atual. aqui estão alguns exemplos:

<a href="http://www.comodesenvolver.com.br">Visite nosso Site</a>
<a href="index.html">Home</a>
<a href="pdfs/manual.pdf">Clique para Baixar PDF</a>
<a href="#top">Voltar ao Topo</a>

Os primeiros três exemplos devem ser auto explicativos. Há um URL completo, um único nome de arquivo index.html, e um caminho relativo para um arquivo PDF. Nomes de caminho absolutos são suportados, mas seu uso não é recomendado. O último exemplo requer mais explicação. Você notou o sinal jogo da velha?

O atributo <a> name

O atributo name quando usado em conjunto com a tag <a> pode ser usado para nomear um ponto específico na página. Esse nome pode então ser usado em outro lugar na página em um link.

Então, você pode colocar isso em algum lugar próximo ao topo da sua página:

<a name="top"></a>   <!-- observe que não precisa haver nenhum conteúdo  -->

Um link em outro lugar da página, usando o mesmo nome, mas precedido de um #sinal, nos levará de volta lá:

<a href="#top">Volta ao topo</a>

O atributo <a> target

Quando um usuário clica em um link e chega em uma nova página, às vezes eles querem voltar para o lugar de onde vieram. Alguns dispositivos e a maioria dos navegadores apresentam um botão voltar e até mesmo avançar no qual o visitante pode clicar e descobrir que o navegador nem sempre os leva de volta à página que esperam. Ou o botão pode não ter nenhum efeito.

Em um próximo momento, nós criaremos um artigo inteiro com este tópico e na noção do que uma página anterior realmente deveria ser. Por enquanto, pode ajudar sua causa e seu visitante adicionando o atributo target para o seu elemento âncora. Ele permite que você determine se a página target (daí o nome do atributo) será aberta ou não em uma nova janela do navegador. Existem quatro opções:

• target = “_ blank” : Esta página abre em uma nova janela ou guia
• target = “_ self” : Esta página abre na mesma janela em que foi clicado; este é o padrão, mas às vezes também significa que você criou um ponto sem volta
• target = “_ top” : Esta página abre na janela de tamanho completo do navegador
• target = “_ parent” : Esta página abre na janela principal

Elementos clássicos do documento

Esta seção lista alguns elementos HTML que parecerão familiares aos usuários de processadores de texto ou programas de editoração eletrônica.

<h1>, <h2>, <h3>,… <h6> – cabeçalhos

Esses são títulos. oquanto menor o número, maior será o tamanho da fonte em que o navegador renderizará o título.

<p> – parágrafo

Este é o parágrafotag. Os navegadores adicionam automaticamente algum espaço (margem) antes e depois de cada elemento <p>. As margens podem ser modificadas com CSS (com as propriedades das margens).

<span> – span

A tag span por si só não tem efeito visual, mas é extremamente útil quando você precisa estilizar apenas uma parte do texto.

Você pode usá-lo assim:

<h3>Exemplo</h3>
<p>Este é um parágrafo com um <span class="azul">azul</span> no meio</span>

Listas

Em quase todos os documentos, você encontrará a necessidade de somar vários itens em uma lista. Em HTML você tem a escolha entre uma lista não ordenada (pense em marcadores) e uma lista ordenada (pense em números). Os elementos HTML dessas listas são <ul> e <ol>.

Este exemplo produz uma lista de cores:

<h2>Cores</h2>
<ul>
<li>vermelho</li>
<li>verde</li>
<li>azul</li>
</ul>

Isso irá gerar uma lista de cores, cada uma precedida por um marcador (redondo). A substituição <ul>/</ul> por <ol>/</ol> lhe dará uma lista numerada. Atributos existiam para especificar a forma do marcador, mas já se foram. Os estilos de marcadores são especificados em CSS atualmente. Você pode até usar um arquivo de imagem para o marcador.

Um terceiro elemento de lista que vale a pena examinar é <dl> ou lista de dados.

Imagens

É difícil imaginar um site sem imagens. A maioria das pessoas presume que adicionar uma imagem a um site é fácil, que pode demorar um pouco para fazer no Photoshop e pronto. Na verdade, isso não é verdade, mas é tudo administrável. Fiquei desapontado ao descobrir, em minha primeira experiência com HTML, que colocar texto ao lado de uma imagem em uma página da web era doloroso. Isso porque eu não sabia CSS suficiente na época.

Na verdade, há apenas um elemento HTML necessário para lidar com imagens: a tag <img>.

elemento e atributos <img>

Uma peça típica de HTML contendo uma imagem seria:

<img  src="images/nomedaimagem.jpg" alt="Minha Imagem" />

Uma tag img nunca terá nenhum conteúdo dentro, então sempre usamos a notação abreviada. Os dois atributos que estão sempre presentes é o src e alt. O valor do atributo alt é um texto que será exibido quando o arquivo de imagem não puder ser encontrado ou quando for usado um dispositivo que não pode exibir imagens. O atributo src contém o caminho para o arquivo de imagem. O arquivo de imagem pode estar em um dos muitos formatos diferentes: .jpg, .gif, .png, .tiff, etc.

Quando nenhuma informação é fornecida sobre o tamanho real da parte da tela que queremos usar para exibir a imagem, ela será mostrada em seu tamanho real, portanto, tome cuidado com arquivos de imagem grandes.

Largura e altura da imagem

Existem dois atributos que você pode usar para isso: width e height. Isso fará com que o navegador renderize a imagem no tamanho que você especificar, mas é muito melhor não usar esses atributos e especificar a largura e a altura em CSS. Portanto, dê à sua tag <img> tem uma classe ou uma tag id para fazer isso.

Você vai aprender mais tarde que você ainda tem a oportunidade de especificar diferentes tamanhos de imagem para diferentes tamanhos de tela quando estamos discutindo designs responsivos .

De qualquer forma, uma vez que você saiba qual é o maior tamanho da imagem que será usado, crie uma versão de seu arquivo de imagem exatamente com essas dimensões para usar em seu site. Se o original era maior, você não forçará o visitante a baixar um arquivo grande de que ele não precisa. Se o original era menor, crie um arquivo de imagem de qualidade em tamanho maior, para que tenha uma boa aparência, em vez de você depender de como o navegador extrapola a imagem.

Formulários de entrada

Todos vocês os viram e usaram e agora você vai criá-los: formulários de registro, formulários de pedido – resumindo: formulários . O que todos os formulários têm em comum é que o usuário insere, ou insere, algumas informações. Em seguida, essa entrada é validada – por exemplo, para verificar se um endereço de e-mail está realmente no formato correto – e então é processada de uma forma ou de outra.

O formulário será, obviamente, escrito em HTML e CSS. A validação pode acontecer no lado do cliente antes de ser processada, em JavaScript e no lado do servidor enquanto é processada. O processamento é, na maioria dos casos, feito em PHP e o resultado armazenado em algum tipo de banco de dados, como MySQL ou MongoDB, um arquivo XML ou uma planilha Excel. Por enquanto, vamos nos concentrar na criação do próprio formulário.

Elementos de formulário

Os elementos que discutiremos aqui para ser utilizado em formulários são: <form>, <label>, <input>, <textarea>, <button>, <select>, e <option>. Vamos tratar <select> separadamente.

Este é um exemplo típico de HTML que descreve um formulário:

<form id="meuform" action"processardaddos.php" method="post" class="formclass">
<label for="title">Titulo</label>
<input type="radio" value="Ms" id="title" "name="title" class="classic">Sr.</input>
<input type="radio" value="Sr" id="title" "name="title" class="classic">Sr.</input>
<label for="first">Nome</label>
<input type="text" name="first" id="first" class="classic" />
<label for="last">Sobrenome </label>
<input type="text" name="last" id="last" class="classic" />
<label for="email">e-mail</label>
<input type="text" name="email" id="email" class="classic" />
<button type="submit">Registrar</button>
</form>

Atributos de formulário

Observe o action e atributos method para a tag form. Eles indicam o nome do programa que será usado para processar os dados e o método usado para fazer isso. Explicaremos isso quando estivermos falando sobre PHP.

O atributo label

O elemento label é uma tag útil para rotular o elemento input o atributo for vincula uma tag label a uma tag input.

Atributos de entrada

O elemento input é o elemento mais versátil para ser usado em um formulário. É usado para permitir que o usuário forneça dados, seja digitando algum texto ou verificando fora de uma caixa de seleção ou botão de rádio.

Existem vários tipos, especificados pelo atributo type:

O atributo name

Cada elemento de entrada que será processado assim que o visitante fizer algo com ele, precisa ter um nome. Esse nome vai acabar sendo usado para criar uma variável nome no lado do servidor quando o formulário é processado. Elementos Radio button de entrada que pertencem juntos devem receber o mesmo nome.

No caso do tipo de checkbox de entrada, você não deve apenas usar o mesmo nome para cada elemento de entrada da caixa de seleção, você também deve usar colchetes atrás do nome. O resultado disso é que você terá acesso a uma matriz de todos os elementos marcados no lado do processamento, o que será extremamente útil.

O atributo value

Este é usado para atribuir valores padrão para inserir ou para atribuir valores que antes eram usados ​​no formulário e que desde então foram armazenados em um banco de dados, como seria o caso em qualquer tipo de situação.

O atributo checked

Use quando um radio button ou checkbox precisa ser verificado por padrão.

O atributo readonly

Se você especificar readonly, o visitante não será capaz para inserir qualquer entrada.

Textarea

Quando a entrada é esperada em uma forma que é mais longo do que apenas algumas palavras, você pode usar o elemento textarea para exibir uma caixa de entrada. Você pode especificar o tamanho da caixa em linhas e colunas usando os atributos rows e cols. Aqui está um exemplo:

<textarea row="4" cols="50" id="mytextbox">
</textarea>

Listas suspensas

Freqüentemente, precisamos que os visitantes façam uma escolha em uma lista. Para este propósito, podemos usar o elemento <select> em combinação com a <option> etiqueta para cada escolha individual. A parte de texto do elemento <option> é o que será exibido e o valor do atributo  value é o que será passado para processamento. É muito útil fazer da primeira opção aquela que não deve ser escolhida, como no exemplo a seguir:

<select name="colorlist" id="colorlist">
<option value="0">Escolha uma Cor</option>
<option value="red">Vermelho</option>
<option value="blue">Azul</option>
<option value="green">Verde</option>
<option disabled value="orange">Laranjado</option>
</select>

O atributo disabled

Tanto o <select> quanto o <option> suporta o disabled caso você queira desativar uma opção (ou a lista suspensa inteira) a ser exibida, mas não selecionável.

O atributo selected

Se você quiser pré-selecionar uma das escolhas, use o atributo selected em <option>.

Tabelas

As tabelas são muito usadas em documentos HTML. Se você deseja apresentar os dados em uma grade de colunas e linhas, como em uma planilha, você pode criar uma tabela. Uma célula de uma tabela pode conter não apenas números ou palavras, mas também uma imagem ou … outra tabela.

Por padrão, o navegador fará um julgamento sobre a largura de cada coluna, dependendo da largura do conteúdo da célula e de quanto espaço existe para a tabela em geral.

Elementos de tabela

Os seguintes elementos HTML são usados ​​para criar tabelas:

<table>

Esta é a tag principal para criar uma tabela. Cada tabela começa com uma tag <table> e termina com uma tag </table>.

<thead> <tbody>

Esses elementos (opcionais) permitem separar (e subsequentemente estilizar) a parte do cabeçalho e a parte do corpo de uma tabela. Como em planilhas, o cabeçalho é usado para as descrições do que vai nas linhas da tabela e o corpo para o conteúdo real. Você pode usar mais de uma <tbody> seção para organizar (e estilizar) melhor sua tabela.

<tr>

A linha da tabela <tr> ou é o elemento que você vai usar para todos as linhas em sua tabela, tanto o cabeçalho quanto a seção do corpo.

<th> <td>

Estes são os elementos para suas células da tabela. As tags <th> são usadas para seus rótulos no cabeçalho da tabela e os <td> (dados da tabela) para suas células de conteúdo no corpo da tabela.

Atributos da tabela

Algumas tabelas os elementos têm atributos exclusivos. Nós vamos falar sobre isso aqui.

colspan (td)

Uma tabela que consiste em x linhas e y colunas certamente conterá x vezes y células. Com o atributo colspan, você pode especificar, para uma determinada célula, você deseja estendê-la em várias colunas. A linha a seguir abrangerá esta célula da tabela em três colunas:

<td colspan="3">Texto Aqui</td>

Rowpan (td)

Isso é o equivalente a colspan mas para linhas. Com este atributo, você pode especificar que deseja que uma célula da tabela seja mais alta do que apenas uma única linha.

Vamos dar uma olhada em um exemplo de tabela:

<table>
<thead>
<tr><th>First</th><th>Last</th><th>Organization</th><th>Phone</th></tr>
</thead><tbody>
<tr><td>John</td><td>Muir</td><td>Yosemite</td><td></td></tr>
<tr><td colspan="2">Michael Tilson Thomas</td><td>San Francisco Symphony</td><td>4158885555</td></tr>
<tr><td>Diane </td><td>Nicolini</td><td rowspan="2">KDFC</td><td rowspan="2">415888KDFC</td></tr>
<tr><td>Bill</td><td>Lueth</td></tr>
</tbody>
</table>

<div>, o “uebertag”

Por fim, existe a tag <div> de todas as tags. Quando você tem um problema ao tentar encaixar as coisas na página onde você desejá-los, você provavelmente o resolverá inserindo uma série de elementos <div>. Pense em <div> como uma seção retangular de sua página. Você pode até organizar sua página como uma grade. 

Veja este exemplo muito simples, mas não incomum:

<body>
<div id="header"></div>
<div id="container">
<div id="left"></div><div id="middle"></div><div id="right"></div>
</div>
<div id="footer"></div>
</body>

Basta fazer deste o corpo de uma nova página HTML minigrid.html, e olhar para ele. Você vai ver … nada, porque no elemento <div> não têm qualquer conteúdo, caso em que não têm qualquer tamanho. Os elementos <div> são chamados de elementos de bloco. Abordaremos isso em detalhes mais para frente. Antes de fazermos isso, vamos concluir este capítulo sobre HTML com um tópico muito importante: entidades HTML .

Entidades HTML

Como sabemos, todas as tags começam com um sinal < e terminam com um sinal >. Imagine que você deseja usar um deles como parte de seu conteúdo. Isso só pode confundir o navegador. É por isso que temos entidades HTML.

As entidades HTML são strings que começam com um & (É comercial) e terminam com um ponto e vírgula.

• Isso representa o próprio é comercial: &amp;
• Uma entidade HTML muito útil é o espaço ininterrupto:   Ele permite que você insira um ou mais espaços em seu conteúdo. Para usar <ou > assinar em seu conteúdo, temos: < e >
• Também são muito úteis &eur; para o símbolo do Euro,  © para o sinal de copyright e ® para o sinal de marca registrada.
• Os caracteres não ingleses também podem ser representados como entidades HTML, por exemplo, é para é, è para è e ê para ê.

Recomendamos que você procure algumas das referências online se quiser ver uma lista completa.

Tags específicas de HTML5

HTML5 introduziu um número de novas tags que podem ajudá-lo a adicionar estrutura ao seu documento, uma vez que todos eles têm os nomes de componentes comuns de um documento ou site, como cabeçalho, rodapé ou artigo.

Se você já faz desenvolvimento para a web há algum tempo, provavelmente terá usado esses nomes, mas como uma classe para categorizar os elementos <div>. Então, se você usou <div class="header">, agora você pode usar <header>. Ou, para mudar as coisas, se você já usa <header>, seu plano alternativo para oferecer suporte a navegadores não compatíveis com HTML5 pode conter <div class="header">.

Aqui está uma breve visão geral do que são e como podem ser usados:

• <header>: Isso é usado para contém o título de uma página ou seção. Normalmente contém o logotipo da empresa e elementos de navegação.
• <footer>: Os rodapés geralmente contêm links para outras informações relacionadas, informações de contato e direitos autorais afirmações. Certifique-se de mantê-lo atualizado. As pessoas não confiarão nas informações de um site com data de dois anos atrás.
• <nav>: Este contêiner pode ser usado para a parte de navegação principal do seu site.
• <aside>: Esta tag é muito útil colocar o componente do seu lado que muitas vezes fica à esquerda, ao lado de todo o resto.
• <article>e <section>: estes dois são úteis para organizar melhor o seu documento. Você pode usá-los para postagens de blog ou, como os nomes sugerem, artigos ou seções.

Conclusão

Neste artigo, você aprendeu o básico de HTML, a primeira de várias linguagens que usaremos para fazer desenvolvimento web. HTML usa tags como <div> e tags também podem ter atributos, por exemplo <p class="blue">paragrafo azul</p>,. Todas essas tags combinadas em uma página HTML, formam os blocos de construção de um site. Em vez de fornecer uma lista exaustiva e uma descrição de todos os elementos HTML de tags disponíveis, orientamos você pelos mais comuns e úteis.

Os elementos HTML são usados ​​para adicionar conteúdo a um site, não para dar uma aparência específica ao site. As cores, o plano de fundo e o primeiro plano, os tipos de letras, as bordas ao redor das imagens e muitos outros recursos visíveis de um site são tratados por meio de folhas de estilo e outro idioma. Essa linguagem é CSS e esse é o tópico do nosso próximo artigo.