Anúncios
HTML é a sigla para HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto. É uma linguagem usada para criar e estruturar páginas web, que podem ser acessadas por meio de navegadores como o Chrome, o Firefox ou o Edge. O HTML é composto por elementos que definem o conteúdo e o layout da página, como títulos, parágrafos, imagens, links, listas, tabelas, formulários e muito mais. Cada elemento é representado por uma tag, que é um conjunto de caracteres entre sinais de menor e maior, como <p> ou </p>. Algumas tags precisam de uma tag de abertura e uma tag de fechamento, enquanto outras são autofechadas, como <img /> ou <br />.
O que é o HTML?
HTML é a sigla para HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto. É uma linguagem usada para criar e estruturar páginas web, que podem ser acessadas por meio de navegadores como o Chrome, o Firefox ou o Edge. O HTML é composto por elementos que definem o conteúdo e o layout da página, como títulos, parágrafos, imagens, links, listas, tabelas, formulários e muito mais. Cada elemento é representado por uma tag, que é um conjunto de caracteres entre sinais de menor e maior, como <p> ou </p>. Algumas tags precisam de uma tag de abertura e uma tag de fechamento, enquanto outras são autofechadas, como <img /> ou <br />.
História e Evolução do HTML
O HTML foi criado em 1990 por Tim Berners-Lee, um cientista da computação britânico que trabalhava no CERN, o Centro Europeu de Pesquisa Nuclear. Ele desenvolveu o HTML como uma forma de compartilhar documentos científicos entre os pesquisadores, usando o conceito de hipertexto, que é um texto que contém links para outros textos. Ele também criou o primeiro navegador web, chamado WorldWideWeb, e o primeiro servidor web, chamado httpd.
Anúncios
O HTML foi inspirado em outras linguagens de marcação, como o SGML (Standard Generalized Markup Language) e o GML (Generalized Markup Language). A primeira versão do HTML, chamada de HTML 1.0, foi publicada em 1993, e continha apenas 18 elementos. Em 1995, foi lançada a HTML 2.0, que adicionou novos elementos, como as tabelas, os formulários e os mapas de imagem. Em 1997, foi lançada a HTML 3.2, que introduziu elementos para multimídia, como o áudio, o vídeo e os objetos. Em 1999, foi lançada a HTML 4.01, que padronizou a sintaxe e a semântica do HTML, e separou o conteúdo da apresentação, usando o CSS (Cascading Style Sheets) para definir o estilo da página.
Em 2004, um grupo de desenvolvedores web, insatisfeitos com a lentidão do desenvolvimento do HTML pelo W3C (World Wide Web Consortium), criou o WHATWG (Web Hypertext Application Technology Working Group), que iniciou o projeto do HTML5, uma nova versão do HTML que incorporava novas funcionalidades, como o armazenamento local, a geolocalização, o canvas, o drag and drop, o websocket e o web worker. Em 2014, o HTML5 foi oficialmente recomendado pelo W3C, e se tornou o padrão de facto para o desenvolvimento web.
Estrutura e Elementos-Chave do HTML
Um documento HTML é composto por uma estrutura básica, que define a versão do HTML, o idioma do documento, o título da página e o conteúdo visível. Essa estrutura é formada pelos seguintes elementos:
<!DOCTYPE html>: É a declaração do tipo de documento, que informa ao navegador que o documento é um HTML5.<html lang="pt-br">: É o elemento raiz, que contém todo o código HTML. O atributolangdefine o idioma do documento, que no caso é o português do Brasil.<head>: É o elemento cabeçalho, que contém informações sobre o documento, como o título, o estilo e os scripts.<title>: É o elemento título, que define o título da página, que aparece na aba do navegador.<meta>: É o elemento meta, que define informações adicionais sobre o documento, como o conjunto de caracteres, as palavras-chave e a descrição. O elemento meta é autofechado, e usa atributos para especificar os dados, como ocharset, onamee ocontent.<link>: É o elemento link, que define uma relação entre o documento e um recurso externo, como uma folha de estilo, um ícone ou uma fonte. O elemento link é autofechado, e usa atributos para especificar o tipo, o relacionamento e o endereço do recurso, como otype, orele ohref.<script>: É o elemento script, que define um código em uma linguagem de script, como o JavaScript, que pode alterar o comportamento ou o conteúdo da página. O elemento script pode conter o código diretamente entre as tags, ou usar o atributosrcpara referenciar um arquivo externo.<body>: É o elemento corpo, que contém o conteúdo visível da página, como os textos, as imagens e os botões.
Um exemplo de um documento HTML com a estrutura básica é:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>O que é o HTML?</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<!-- O conteúdo da página vai aqui -->
</body>
</html>
Dentro do elemento <body>, podemos usar diversos elementos para criar e organizar o conteúdo da página, como:
<h1>a<h6>: São os elementos de cabeçalho, que definem títulos e subtítulos de diferentes níveis, sendo o<h1>o mais importante e o<h6>o menos importante. Os elementos de cabeçalho ajudam a estruturar o conteúdo e a melhorar a acessibilidade e o SEO da página.<p>: É o elemento de parágrafo, que define um bloco de texto. Os elementos de parágrafo são separados por uma quebra de linha automática, e podem conter outros elementos dentro deles, como links, imagens ou ênfases.<a>: É o elemento de âncora, que define um link para outra página ou para uma parte da mesma página. O elemento de âncora usa o atributohrefpara especificar o endereço do destino, e pode conter texto ou imagem como conteúdo. O elemento de âncora também pode usar o atributotargetpara definir como o link será aberto, como em uma nova aba ou na mesma aba.<img>: É o elemento de imagem, que define uma imagem na página. O elemento de imagem é autofechado, e usa o atributosrcpara especificar o endereço da imagem, e o atributoaltpara especificar um texto alternativo, que será exibido caso a imagem não seja carregada, ou lido por um leitor de tela. O elemento de imagem também pode usar os atributoswidtheheightpara definir a largura e a altura da imagem, respectivamente.<ul>e<ol>: São os elementos de lista, que definem uma lista de itens. O elemento<ul>define uma lista não ordenada, que usa marcadores como símbolos, enquanto o elemento<ol>define uma lista ordenada, que usa números ou letras como símbolos. Os elementos de lista devem conter elementos<li>como filhos, que definem cada item da lista. Os elementos de lista podem ser aninhados, criando listas dentro de listas.<table>: É o elemento de tabela, que define uma tabela na página. O elemento de tabela deve conter elementos<tr>como filhos, que definem cada linha da tabela. Cada elemento<tr>deve conter elementos<td>ou<th>como filhos, que definem cada célula da tabela. O elemento<td>define uma célula de dados, enquanto o elemento<th>define uma célula de cabeçalho. O elemento de tabela também pode conter elementos<caption>,<thead>,<tbody>e<tfoot>, que definem o título, o cabeçalho, o corpo e o rodapé da tabela, respectivamente.<form>: É o elemento de formulário, que define um formulário na página. O elemento de formulário pode conter elementos como<input>,<label>,<select>,<option>,<textarea>e<button>, que definem os campos, os rótulos, as listas, as opções, as áreas de texto e os botões do formulário, respectivamente. O elemento de formulário usa o atributoactionpara especificar o endereço do servidor que processará os dados do formulário, e o atributomethodpara especificar o método de envio dos dados, como oGETou oPOST.<div>e<span>: São os elementos de divisão, que definem uma seção ou um grupo de elementos na página. O elemento<div>é um elemento de bloco, que ocupa toda a largura disponível e cria uma quebra de linha antes e depois dele. O elemento<span>é um elemento de linha, que ocupa apenas o espaço necessário e não cria uma quebra de linha. Os elementos de divisão são usados principalmente para aplicar estilo ou identificar uma parte da página, usando os atributosclassouid.
Um exemplo de um documento HTML com alguns elementos dentro do <body> é:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>O que é o HTML?</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>O que é o HTML?</h1>
<p>HTML é a sigla para <strong>HyperText Markup Language</strong>, que significa <strong>Linguagem de Marcação de Hipertexto</strong>. É uma linguagem usada para criar e estruturar páginas web, que podem ser acessadas por meio de navegadores como o Chrome, o Firefox ou o Edge.</p>
<img src="html-logo.png" alt="Logo do HTML" width="200" height="200">
<h2>Fundamentos do HTML</h2>
<p>O HTML é uma linguagem baseada em <em>regras</em> ou <em>sintaxe</em>, que devem ser seguidas para que o navegador possa interpretar corretamente o código e exibir a página da forma desejada. Algumas dessas regras são:</p>
<ul>
<li>O HTML é <em>case-insensitive</em>, ou seja, não faz diferença se as letras das tags são maiúsculas ou minúsculas. Por exemplo, <code><P></code> e <code><p></code> são equivalentes.</li>
<li>O HTML é <em>aninhado</em>, ou seja, os elementos podem conter outros elementos dentro deles. Por exemplo, um elemento <code><div></code> pode conter um elemento <code><p></code> que contém um elemento <code><a></code>. Nesse caso, o elemento <code><a></code> é o <em>filho</em> do elemento <code><p></code>, que é o <em>filho</em> do elemento <code><div></code>. O elemento <code><div></code> é o <em>pai</em> do elemento <code><p></code>, que é o <em>pai</em> do elemento <code><a></code>.</li>
<li>O HTML é <em>hierárquico</em>, ou seja, os elementos seguem uma ordem lógica de organização. Por exemplo, o elemento <code><html></code> é o <em>elemento raiz</em> de todo o documento, e deve conter dois elementos <em>filhos</em>: o elemento <code><head></code> e o elemento <code><body></code>. O elemento <code><head></code> contém informações sobre o documento, como o título, o estilo e os scripts. O elemento <code><body></code> contém o conteúdo visível da página, como os textos, as imagens e os botões.</li>
</ul>
<!-- O restante do conteúdo da página vai aqui -->
</body>
</html>
Importância do HTML no Desenvolvimento Web
O HTML é a base de qualquer página web, pois define o conteúdo e a estrutura da página. Sem o HTML, não seria possível criar páginas web dinâmicas, interativas e responsivas, que se adaptam a diferentes dispositivos e resoluções.
O HTML também é essencial para o SEO (Search Engine Optimization), que é a otimização da página para os mecanismos de busca, como o Bing, o Google ou o Yahoo. O SEO ajuda a melhorar o posicionamento da página nos resultados de busca, aumentando a visibilidade, o tráfego e a conversão da página. Para isso, o HTML deve seguir as boas práticas de desenvolvimento web, como:
- Usar elementos semânticos, que descrevem o significado do conteúdo, como o
<article>, o<section>, o<nav>e o<footer>. - Usar atributos
altnas imagens, que descrevem o conteúdo da imagem, facilitando a compreensão dos usuários e dos mecanismos de busca. - Usar títulos e subtítulos relevantes e descritivos, que resumem o conteúdo da página ou da seção, usando os elementos
<h1>a<h6>. - Usar palavras-chave, que são termos relacionados ao tema da página, que os usuários podem usar para buscar o conteúdo, usando os elementos
<meta>e<title>. - Usar links internos e externos, que conectam a página com outras páginas, aumentando a autoridade, a relevância e a navegação da página, usando os elementos
<a>.
Interatividade e Novas Funcionalidades no HTML5
O HTML5 é a versão mais recente e mais avançada do HTML, que trouxe novas funcionalidades e possibilidades para o desenvolvimento web. O HTML5 permite criar páginas web mais interativas, dinâmicas e ricas em conteúdo, usando elementos como:
<canvas>: É o elemento de tela, que define uma área na página onde é possível desenhar gráficos, animações e jogos, usando uma linguagem de script, como o JavaScript.<audio>e<video>: São os elementos de áudio e vídeo, que definem um áudio ou um vídeo na página, sem a necessidade de usar plugins externos, como o Flash ou o QuickTime. Os elementos de áudio e vídeo usam o atributosrcpara especificar o endereço do áudio ou do vídeo, e podem conter elementos<source>como filhos, que definem diferentes formatos do áudio ou do vídeo, como o MP3, o OGG ou o MP4. Os elementos de áudio e vídeo também podem usar o atributocontrolspara exibir os controles de reprodução, como o play, o pause e o volume.<svg>: É o elemento de gráfico vetorial escalável, que define um gráfico vetorial na página, que é uma imagem composta por formas geométricas, como círculos, retângulos e curvas. O elemento<svg>pode conter elementos como<circle>,<rect>e<path>como filhos, que definem as formas do gráfico. O elemento<svg>também pode usar atributos comowidth,height,fill,strokeetransformpara definir a largura, a altura, a cor, o contorno e a transformação do gráfico.<datalist>: É o elemento de lista de dados, que define uma lista de opções para um campo de entrada, como um campo de busca ou um campo de texto. O elemento<datalist>deve conter elementos<option>como filhos, que definem cada opção da lista. O elemento<datalist>deve usar o atributoidpara identificar a lista, e o elemento<input>deve usar o atributolistpara referenciar a lista, criando uma relação entre eles.<progress>e<meter>: São os elementos de progresso e de medida, que definem uma barra de progresso ou um medidor na página, que indicam o status ou o valor de uma tarefa ou de uma medida. Os elementos<progress>e<meter>usam os atributosvalueemaxpara especificar o valor atual e o valor máximo da barra ou do medidor, respectivamente. Os elementos<progress>e<meter>também podem conter um texto como conteúdo, que será exibido caso o navegador não suporte os elementos.<details>e<summary>: São os elementos de detalhes e de resumo, que definem um conteúdo que pode ser expandido ou contraído na página, como um FAQ ou um spoiler. O elemento<details>define o conteúdo que pode ser mostrado ou escondido, e usa o atributoopenpara especificar se o conteúdo está expandido ou contraído. O elemento<summary>define o título ou o resumo do conteúdo, que é sempre visível. O elemento<summary>deve ser o primeiro filho do elemento<details>, e pode conter texto ou imagem como conteúdo.
Um exemplo de um documento HTML com alguns elementos do HTML5 dentro do <body> é:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>O que é o HTML?</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<!-- O conteúdo da página vai aqui -->
<h1>O que é o HTML?</h1>
<!-- ... -->
<h2>Interatividade e Novas Funcionalidades no HTML5</h2>
<p>O HTML5 é a versão mais recente e mais avançada do HTML, que trouxe novas funcionalidades e possibilidades para o desenvolvimento web. O HTML5 permite criar páginas web mais interativas, dinâmicas e ricas em conteúdo, usando elementos como:</p>
<h3>Canvas</h3>
<p>O elemento <code><canvas></code> define uma área na página onde é possível desenhar gráficos, animações e jogos, usando uma linguagem de script, como o JavaScript. Veja um exemplo de um gráfico de pizza desenhado com o canvas:</p>
<canvas id="pie-chart" width="300" height="300"></canvas>
<script>
// Código JavaScript para desenhar o gráfico de pizza
</script>
<h3>Áudio e Vídeo</h3>
<p>Os elementos <code><audio></code> e <code><video></code> definem um áudio ou um vídeo na página, sem a necessidade de usar plugins externos, como o Flash ou o QuickTime. Veja um exemplo de um vídeo do YouTube incorporado com o elemento <code><video></code>:</p>
<video src="https://www.youtube.com/watch?v=dQw4w9WConclusão
Neste artigo, você aprendeu o que é o HTML, quais são os seus fundamentos, a sua história e evolução, a sua estrutura e elementos-chave, a sua importância no desenvolvimento web e as suas novas funcionalidades no HTML5. Espero que este artigo tenha sido útil e interessante para você, e que você tenha ficado com vontade de aprender mais sobre o HTML e o desenvolvimento web.
Se você gostou deste artigo, por favor, deixe a sua opinião sincera e sugestões nos comentários, compartilhe o post nas suas redes sociais e fique ligado para mais conteúdos sobre tecnologia e programação.
Obrigado pela leitura e até a próxima! 😊