Sintaxe e padrão HTML

Índice-

Neste artigo, discutiremos a sintaxe e o padrão HTML. Se você mantiver seu código HTML de maneira organizada, consistente e limpa, será mais fácil de ler, entender e manter.

Aqui estão algumas diretrizes para aqueles que gostariam de aprender a escrever código HTML adequado .

Primeiro, sempre declare o tipo de documento

Certifique-se de declarar o tipo de documento no início do seu documento.

Os documentos HTML devem ser digitados da seguinte forma:

<!DOCTYPE html>

Fechar todas as tags HTML

Não é necessário fechar todos os elementos HTML como a tag <p> em Html .

É altamente recomendável que você feche todos os elementos HTML fornecidos no exemplo abaixo:

  Good Practice

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><div><br><p> Mr Examples </p><br></div><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Sintaxe Errada

<!DOCTYPE html>
<html>
<body>
<div>
<p> Senhor Exemplos
</div>
</body>
</html>
Executar

Use nomes de elementos em minúsculas

Ao nomear elementos, o HTML permite que letras maiúsculas e minúsculas sejam usadas juntas.

É aconselhável, no entanto, que os nomes dos elementos sejam em letras minúsculas, conforme a seguir:

  1. Nomes maiúsculos e minúsculos misturados parecem desleixados e difíceis de ler.
  2. Nomes minúsculos são geralmente usados ​​por desenvolvedores.
  3. Usar letras minúsculas é mais atraente.
  4. Há menos confusão ao escrever em letras minúsculas.

  Good Practice

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html><body><br>
<p>This is a paragraph.</p>
<br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Example:  Bad Practice

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><p>This is a paragraph.</p><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Sempre citar valores de atributos

A sintaxe HTML permite valores de atributo sem aspas.

No entanto, os valores de atributo entre aspas são recomendados, pois:

  1. Os valores de atributo geralmente são citados pelos desenvolvedores.
  2. A legibilidade é melhorada por valores entre aspas.
  3. Qualquer valor contendo espaços DEVE ser colocado entre aspas.

  Perfect Example

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><table class="Stitched"><br></table><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

  Bad Practice

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><table class="Stitched"><br></table><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O valor contém espaços, então isso não funcionará:

  Wrong Syntax

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><table class="table" stitched><br></table><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Espaços e Sinais de Igualdade

Sinais de igual podem ter espaços ao redor deles em HTML. O formato sem espaço é mais fácil de ler e facilita o agrupamento de entidades .

  Good Practice

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><link rel="stylesheet" href="styles.css"><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Example:  Bad Practice

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><link rel="stylesheet" href="styles.css"><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Linhas em branco e recuo:

Quando falamos sobre sintaxe HTML , recuos, espaços e linhas em branco nunca devem ser adicionados sem justa causa.

Ao dividir códigos longos ou lógicos, adicione linhas em branco para melhorar a legibilidade.

Dois espaços de recuo adicionados tornam a leitura mais confortável. Seria melhor se você não usasse a tecla tab.

  Good Practice

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><h1>Quantum computers</h1><br><h2>What is Quantum Computers?</h2><br><p>Superposition and entanglement are quantum-mechanical phenomena used by quantum computers for data processing. Qubits are quantum information units that are used in quantum computers.</p><br><h2>Quantum computers vs. conventional computers</h2><br><p>There are many differences between quantum computers and the computers we use today. There are only two types of bits in conventional computers: ones and zeros. There are qubits in quantum computers that can be either 1 or 0. Multiple calculations can be performed simultaneously. Compared to conventional computers, quantum computers are also much faster. A conventional computer takes many times longer to solve a problem than a quantum computer.</p><br><h2>When we can use it?</h2><br><p>In order for quantum computing to be used on a large scale, many challenges must be overcome. Quantum computing has enormous potential benefits, however. Many industries, including medicine, finance, and manufacturing, may be revolutionized by it.</p><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

  Bad Practice

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><h1>Quantum computers</h1><br><h2>What is Quantum Computers?</h2><p>Superposition and entanglement are quantum-mechanical phenomena used by quantum computers for data processing. Qubits are quantum information units that are used in quantum computers.</p><br><h2>Quantum computers vs. conventional computers</h2><p>There are many differences between quantum computers and the computers we use today. There are only two types of bits in conventional computers: ones and zeros. There are qubits in quantum computers that can be either 1 or 0. Multiple calculations can be performed simultaneously. Compared to conventional computers, quantum computers are also much faster. A conventional computer takes many times longer to solve a problem than a quantum computer.</p><br><h2>When we can use it?</h2><p>In order for quantum computing to be used on a large scale, many challenges must be overcome. Quantum computing has enormous potential benefits, however. Many industries, including medicine, finance, and manufacturing, may be revolutionized by it.</p><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

  Good Table Example

1
2
3
4
<!DOCTYPE html>
<html><body><br><table><br><tr><br><th>Name</th><br><th>Description</th><br></tr><br><tr><br><td>A</td><br><td>Description of A</td><br></tr><br><tr><br><td>B</td><br><td>Description of B</td><br></tr><br></table>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

  Good List Example

1
2
3
4
<!DOCTYPE html>
<html><body><br><ul><br><li>What is Quantum Computers?</li><br><li>Quantum computers vs. conventional computers</li><br><li>When we can use it?</li><br></ul>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Use nomes de atributos em minúsculas

Você pode usar letras maiúsculas ou minúsculas para o nome de um atributo em HTML quando se trata de sintaxe HTML .

Os nomes dos atributos devem ser minúsculos, no entanto, pelas razões indicadas abaixo.

  1. Nomes que diferenciam maiúsculas de minúsculas têm aparência mais profissional do que aqueles que combinam letras maiúsculas e minúsculas.
  2. Os codificadores geralmente colocam apenas em maiúscula a primeira letra de um nome.
  3. A versão em minúsculas é a mais esteticamente agradável.
  4. Menos energia mental é necessária ao usar letras minúsculas.

  Readable Document

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><a href="https://mrexamples.com/html/">See our HTML tutorial for more information</a><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

  Not Readable Document

1
2
3
4
<!DOCTYPE html>
<html><body><br><a href="https://mrexamples.com/html/">LeArN HtMl bY vIsItInG oUr tuTorIal pAgE</a>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

As imagens devem sempre incluir largura, altura e alt

Os atributos Alt devem sempre ser definidos para imagens. Caso uma imagem não possa ser retratada por algum motivo, esse atributo é essencial.

Certifique-se de que as imagens sejam sempre descritas em termos de largura e altura . Por causa disso, a cintilação é diminuída. O navegador pode comprometer a área antes de carregar a imagem. Este é um excelente guia para a sintaxe HTML .

  Good Practice

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><img src="https://mrexamples.com/wp-content/uploads/html_images/html5.gif" alt="Alt is defined" style="width:224px;height:224px"><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

  Bad Practice

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><img src="https://mrexamples.com/wp-content/uploads/html_images/html5.gif"><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Encurte Seu Código

Rolar para a direita e para a esquerda não é bom para a leitura de código HTML em um editor de HTML .

Sempre que possível, evite escrever longas linhas de código. A sintaxe e o padrão HTML são definidos aqui.

Não ignore o <title> :

HTML exige o elemento de título. SEO (search engine optimization) depende muito do conteúdo de um título de página. Nos resultados de pesquisa, os mecanismos de pesquisa usam os títulos das páginas para determinar sua ordem. Este documento descreve a sintaxe e o padrão HTML apropriados.

Um elemento de título consiste no seguinte:

  1. Definindo o título da barra de ferramentas no navegador
  2. Quando uma página é adicionada aos favoritos, ela recebe um título.
  3. Os resultados do mecanismo de pesquisa incluem um título para a página.
Dica: certifique-se de dar ao título o máximo de significado e precisão possível.

Você está pulando a cabeça?

Há também a opção de ignorar a tag HTML <head> .

A cabeça é adicionada por padrão a todos os elementos antes do corpo na maioria dos navegadores.

Example

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head><title>Without Head tag</title>
</head><body><h1>There is no head tag in start of this example</h1>
<p>We have missed head tag.</p></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Dica: Nossa recomendação é usar a tag <head> .

Omitindo <html> e <body>?

Na ausência das tags <html> e <body> , uma página HTML é válida:

Example

1
2
3
4
5
6
<!DOCTYPE html>
<html><head>
<title>Here Is A Page Title</title>
</head><body><h1>And this is a heading</h1>
<p>A paragraph.</p></body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Você deve sempre adicionar as tags <html> e <body> !

Pode haver erros em navegadores mais antigos se você esquecer a tag <body> .

Uma falha de software DOM ou XML também pode ocorrer quando <html> e <body> são esquecidos.

O HTML vazio está fechado?

O fechamento de elementos vazios é opcional em HTML.

  Advised

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><meta charset="utf-8"><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

  Another Way

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><meta charset="utf-8"><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Importante: Você deve manter a barra final (/) se espera que o software XML / XHTML acesse sua página.

Metadados:

A linguagem e a codificação de caracteres do documento HTML devem ser representadas o mais cedo possível <meta charset=”charset”> para confirmar que o texto será adequadamente compreendido e indexado pelos mecanismos de busca.

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br>lang="en-us"><br><br><meta charset="UTF-8"><title>Example Page Title</title><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Não perca o atributo lang:

Ainda é recomendável ter o atributo lang dentro da tag <html> para declarar o idioma da página da Web. Os mecanismos de pesquisa e navegadores se beneficiarão disso quando se trata de sintaxe HTML .

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>We have lang attribute before head</title>
</head>
<body><h1>This is an example heading</h1>
<p>And this is a paragraph.</p></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Definir janela de visualização:

Viewports são áreas de um site que são visíveis para o usuário enquanto ele navega. Os telefones celulares têm telas menores que os computadores, portanto, eles diferem dependendo do dispositivo no que diz respeito à sintaxe HTML .

Em todas as suas páginas da web, você deve incluir o seguinte:

<meta name=”porta de visualização” content=”largura=largura do dispositivo, escala inicial=1.0″>

Ele informa ao navegador como regular o tamanho e as dimensões da página.

Ao definir a largura = parte da largura do dispositivo, a largura da página é determinada pela largura da tela do dispositivo (que pode variar).

Quando o navegador carrega preferencialmente a página, a parte initial-scale=1.0 define o nível de zoom.

A seguir estão exemplos de páginas da web sem e com meta tags de viewport:

Dica: Para entender melhor a sintaxe e os padrões HTML , você pode clicar nas duas imagens abaixo se estiver navegando nesta página com um telefone ou tablet.

Sem a
metatag da janela de visualização

Com a
metatag da janela de visualização

Comentários HTML:

Você deve escrever comentários curtos em uma única linha, assim:

<!– Isto é um comentário –>

Para comentários que abrangem mais de uma linha, escreva-os da seguinte forma:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><p>When we take a look at this illustration, we can plainly see that it is rather lengthy.<br>--></p><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Quando comentários longos são recuados com dois espaços, eles são muito mais simples de entender e analisar. Aderir aos princípios da sintaxe HTML é uma prática recomendada.

Folhas de estilo:

Você deve usar uma sintaxe direta para vincular às folhas de estilo se desejar seguir a sintaxe e o padrão de estilo HTML . (o atributo type não é necessário)

<link rel=”stylesheet” href=”styles.css”>

Veja a seguir um exemplo de uma regra CSS curta que pode ser abreviada:

p.intro {font-family:Verdana;font-size:16em;}

É melhor documentar regras CSS extensas em várias linhas:

body {
background-color: black;
font-family: “Arial Black”, Helvetica, sans-serif;
font-size: 12em;
color: white;
}

Por favor, tenha isso em mente:

  1. Certifique-se de que o suporte de abertura e o seletor estejam na mesma linha
  2. O colchete de abertura deve ser precedido de um espaço
  3. Você deve usar dois espaços para recuo
  4. Você deve usar um ponto e vírgula após cada par propriedade-valor, incluindo o último
  5. Você só deve usar aspas em torno de valores se eles contiverem espaços
  6. Não inclua espaços iniciais no colchete de fechamento

Usando HTML para carregar JavaScript:

Carregue scripts externos usando sintaxe simples (o atributo type não é necessário):

<script src=”myscript.js”>

Usando JavaScript para acessar elementos HTML:

Em alguns casos, erros de JavaScript podem ser causados ​​por código HTML desordenado. Um resultado diferente será produzido por essas duas instruções JavaScript:

Example

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<script>
getElementById("Example").innerHTML = "Hello";
getElementById("example").innerHTML= "Hello";
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Dica: você pode encontrar mais informações sobre guias de estilo JavaScript aqui.

Extensões de arquivo adequadas:

Uma extensão .html é necessária para arquivos HTML ( .htm também é aceitável).

.css é a extensão para arquivos CSS e .js é a extensão para arquivos JavaScript .

.htm vs .html – Qual é a diferença?

Não importa se a extensão é .htm ou .html – Qualquer navegador da web e o servidor tratarão ambos como HTML.

Nomes de arquivo em minúsculas:

Alguns servidores web ( Apache , Unix ) diferenciam maiúsculas de minúsculas: “newyork.jpg” não pode ser acessado como “Newyork.jpg”.

Outros servidores web (Microsoft, IIS) não se importam com maiúsculas e minúsculas: “Newyork.jpg” também funciona.

Você deve ter cuidado com o caso misto. Mesmo pequenas falhas podem destruir seu site se você mudar para um servidor que diferencia maiúsculas de minúsculas.

Nomes de arquivo em letras minúsculas evitam esses problemas.

Nomes de arquivo padrão:

É uma prática padrão para servidores da Web adicionar um nome de arquivo padrão a URLs sem especificar um (por exemplo, “https://mrexamples.com/”)
O arquivo default.html, default.html ou default.htm.

Seu servidor deve ser configurado com um nome de arquivo padrão de “index.html”, não “default.html”.

Na maioria dos casos, as configurações do servidor permitem mais de um nome de arquivo padrão; geralmente você pode configurar um número ilimitado.

Importância da sintaxe e do padrão HTML

Importância da sintaxe e do padrão HTML A sintaxe e o padrão do HTML desempenham um papel vital na criação de páginas da Web bem estruturadas e legíveis. Aqui estão algumas razões pelas quais eles são importantes:

  1. Consistência: a sintaxe e o padrão HTML fornecem um conjunto padrão de regras que garantem consistência em diferentes páginas da web. Essa consistência torna mais fácil para os usuários navegar na Web e encontrar as informações de que precisam.
  2. Acessibilidade: a sintaxe e o padrão HTML ajudam a garantir que as páginas da Web sejam acessíveis a todos, incluindo pessoas com deficiências. Seguindo a sintaxe e o padrão corretos, os desenvolvedores da Web podem criar páginas da Web compatíveis com tecnologias assistivas, como leitores de tela.
  3. Search Engine Optimization (SEO): a sintaxe e o padrão HTML desempenham um papel crucial no SEO. Os mecanismos de pesquisa usam essas regras para rastrear e indexar páginas da Web, o que afeta sua classificação nos resultados da pesquisa. Seguindo a sintaxe e o padrão corretos, os desenvolvedores da Web podem melhorar a visibilidade de suas páginas da Web nos resultados da pesquisa.
  4. Legibilidade: a sintaxe e o padrão HTML tornam as páginas da Web mais legíveis, fornecendo estrutura e hierarquia. Títulos, parágrafos e listas são apenas alguns exemplos de elementos HTML que ajudam a organizar o conteúdo e facilitar a leitura.
Se este artigo de alguma forma atendeu aos seus desejos educacionais, assine nosso boletim informativo abaixo para se conectar às notícias técnicas deste site.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.