Noções básicas de HTML
Neste artigo, explicamos as noções básicas de HTML.
Isso explica as principais tags, como a declaração DOCTYPE, as tags <html>, <head> e <body>. Também descreve tags, atributos e caracteres especiais.
YouTube Video
Noções básicas de HTML
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>No início do arquivo, declaramos que este é um documento HTML5, indicando que segue as regras do HTML5.
-
<html>A tag
<html>é o elemento mais externo em um documento HTML que envolve todo o conteúdo. Cada arquivo HTML contém apenas uma tag<html>, e todas as outras tags são aninhadas dentro desta tag. Olang="en"dentro da tag<html>de abertura é chamado de atributo e informa ao navegador que o documento está escrito em inglês. Isso ajuda a notificar leitores de tela e mecanismos de busca sobre o idioma do documento. -
<head>A tag
<head>define os metadados (informações) para a página. Isso inclui o título da página, codificação de caracteres e configurações de design responsivo. Design responsivo refere-se a um método concebido para que sites ou aplicativos se adaptem e exibam bem em vários dispositivos e tamanhos de tela. Isso permite que os usuários vejam o conteúdo confortavelmente em diferentes dispositivos, como smartphones, tablets e desktops.<meta charset="UTF-8">define a codificação de caracteres do documento para UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">é uma configuração que otimiza a exibição para dispositivos móveis. A página se ajusta à largura da tela do dispositivo.A
<title>representa o título da página exibido na aba do navegador. Neste exemplo, o título 'Noções básicas de HTML' está definido. -
<body>A tag
<body>contém a parte que exibe o conteúdo para os usuários. Dentro desta tag, texto, imagens, links, etc. são escritos. -
<main>A tag
<main>representa o conteúdo principal da página. Isso inclui cabeçalhos e parágrafos. -
<h1>A tag
<h1>representa o cabeçalho mais importante na página. É comum usar a tag<main>e a tag<h1>apenas uma vez em um documento. -
<p>A tag
<p>representa um parágrafo. -
<!-- Comment -->Você pode escrever comentários em HTML neste formato. Como o HTML do lado do cliente pode ser visualizado por qualquer pessoa, não inclua informações sensíveis como senhas ou chaves de API nos comentários.
O HTML possui muitas tags, mas preste atenção nos seguintes pontos aqui. Um arquivo HTML consiste em uma declaração DOCTYPE e uma tag <html>. A tag <html> contém uma tag <head> e uma tag <body>. No HTML, todas as tags estão contidas dentro da tag <html>, expressando a estrutura do texto através de relações de pai, filho e irmãos, similar a uma estrutura de árvore. Ao escrever HTML, foque também na estrutura do documento.
Tags e Atributos
Em seguida, vamos dar uma olhada nas tags e atributos do HTML.
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->Tags são delimitadas por colchetes angulares (<, >) e normalmente consistem em um par de tags de abertura e fechamento. No entanto, também existem tags únicas, como a tag <meta> e a tag <img>, que não contêm conteúdo. Tags únicas não requerem uma tag de fechamento.
Tags podem ter atributos, que fornecem informações adicionais à tag. Os atributos são escritos dentro da tag de abertura no formato attributeName="valor".
Aqui, <div> é referido como uma tag, e <div>Content</div> como um elemento.
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>Atributos comuns em HTML incluem id, class e style. O atributo id é usado para dar a um elemento um identificador único, e só pode haver um elemento com o mesmo id em uma página. É útil ao manipular elementos específicos com JavaScript ou CSS. O atributo class permite agrupar vários elementos com CSS ou JavaScript atribuindo um nome de classe. Você pode atribuir a mesma classe a vários elementos, permitindo que os estilos sejam compartilhados. O atributo style especifica estilos CSS inline para um elemento. Normalmente, os estilos são definidos em uma folha de estilo externa ou dentro da tag <style>, mas este atributo é usado quando você deseja especificar estilos diretamente para elementos individuais.
Caracteres especiais em HTML
Em seguida, vamos examinar os caracteres especiais no HTML.
No HTML, existem caracteres especiais usados para exibir símbolos e caracteres específicos. Esses caracteres especiais são chamados de entidades. Caracteres especiais começam com & (e comercial), seguidos por um nome ou número, e terminam com ; (ponto e vírgula).
Caracteres especiais representativos em HTML
Aqui estão alguns caracteres especiais comuns.
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
Exemplos de uso de caracteres especiais em HTML
Particularmente, os colchetes angulares (<, >) e as aspas duplas precisam ser usados corretamente no HTML.
Os colchetes angulares (<, >) e as aspas duplas devem ser representados como caracteres especiais em HTML, conforme mostrado abaixo.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
Versões do HTML
Vamos dar uma olhada nas versões do HTML aqui.
As versões de HTML evoluíram para definir a estrutura e funcionalidade das páginas web. Aqui estão as versões principais:.
-
HTML 1.0 (1993)
A primeira versão do HTML tinha apenas recursos de marcação muito básicos. Ele definiu elementos como links, cabeçalhos, parágrafos e listas.
-
HTML 2.0 (1995)
A primeira versão padronizada, com mais elementos adicionados, incluindo suporte para formulários e tabelas.
-
HTML 3.2 (1997)
Mais recursos de layout foram adicionados, permitindo a incorporação de elementos de estilo e scripts. Além disso, o layout utilizando o elemento
<table>tornou-se comum. -
HTML 4.01 (1999)
A separação de estrutura e apresentação avançou, e o CSS foi introduzido. A criação de sites em conformidade com os padrões tornou-se recomendada. Além disso, a internacionalização e a acessibilidade dos documentos foram melhoradas.
-
HTML5 (2014)
A última versão principal, introduzindo suporte para vídeo e áudio, canvas, armazenamento local, geolocalização e outras novas APIs. É amigável para dispositivos móveis, permitindo o desenvolvimento de aplicações web mais interativas.
O HTML5.2 é uma versão do HTML recomendada em 2017, e é uma versão melhorada do HTML5. Desde o HTML5.2, ele é continuamente atualizado como HTML Living Standard, em vez de ter um número de versão estático.
O HTML evoluiu através dessas versões, desenvolvendo-se em uma tecnologia web mais flexível e poderosa.
Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.