DiversificaDev
|Thalles Bastos
As tags HTML são elementos fundamentais para a criação de páginas web. Elas são utilizadas para definir a estrutura e o conteúdo de um documento HTML. Cada tag representa um elemento diferente, como um parágrafo de texto, um cabeçalho, uma imagem ou um link. Aprender a utilizar as tags corretamente é essencial para criar páginas web com um layout consistente e acessível. Neste artigo, vamos explorar as principais tags HTML e como utilizá-las para criar páginas web funcionais e bem estruturadas.
- <!DOCTYPE html>: define o tipo de documento HTML que está sendo utilizado, geralmente colocado no início do documento. Exemplo:
<!DOCTYPE html>- <html>: define o início e o fim do documento HTML. Todo o conteúdo da página deve estar dentro dessa tag. Exemplo:
<html>
<!-- conteúdo da página -->
</html>- <head>: contém informações sobre o documento HTML, como o título da página e conexões com arquivos externos. Exemplo:
<head>
<title>Título da página</title>
<link rel="stylesheet" href="estilos.css">
</head>- <title>: define o título da página que é exibido na aba do navegador. Exemplo:
<title>Título da página</title>- <body>: contém todo o conteúdo da página, como textos, imagens e outros elementos. Exemplo:
<body>
<h1>Título</h1>
<p>Parágrafo de texto.</p>
<img src="imagem.jpg" alt="Descrição da imagem">
</body>- <h1> a <h6>: define cabeçalhos de diferentes níveis. Exemplo:
<h1>Título de nível 1</h1>
<h2>Título de nível 2</h2>
<h3>Título de nível 3</h3>- <p>: define um parágrafo. Exemplo:
<p>Parágrafo de texto.</p>- <a>: define um link para outra página ou recurso. Exemplo:
<a href="pagina.html">Link para outra página</a>- <img>: insere uma imagem na página. Exemplo:
<img src="imagem.jpg" alt="Descrição da imagem">- <ul> e <li>: cria uma lista não ordenada. Exemplo:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>- <ol> e <li>: cria uma lista ordenada. Exemplo:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>- <table>, <tr>, <th> e <td>: cria uma tabela com linhas e colunas. Exemplo:
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr>
<td>João</td>
<td>25</td>
</tr>
<tr>
<td>Maria</td>
<td>30</td>
</tr>
</table>- <form>: cria um formulário para o usuário preencher. Exemplo:
<form action="/enviar-dados" method="post">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Enviar">
</form>- <div>: cria uma seção genérica que pode ser usada para agrupar outros elementos. Exemplo:
<div>
<h1>Título</h1>
<p>Parágrafo de texto.</p>
</div>Essas são algumas das principais tags HTML que você deve conhecer para começar a criar suas próprias páginas web. É importante lembrar que existem muitas outras tags disponíveis, cada uma com suas próprias funcionalidades e atributos. À medida que você avança em seus estudos sobre programação web, você aprenderá mais sobre essas tags e como utilizá-las. Esperamos que este artigo tenha sido útil para você e que possa ter ajudado a dar os primeiros passos em direção ao desenvolvimento web.
-
DiversificaDev - Oferecendo mentoria gratuita para iniciantes em tecnologia e programação para estimular a diversidade na área.
Autor
Desenvolvedor Full Stack com mais de 12 anos de experiência. Sou gay, amo esportes, pets e inquieto com a falta de diversidade na área de TI estou em busca de ajudar a aumentar a inclusão social e a diversidade através de mentoria.
Nenhum comentário
Comentar