Guia Completo sobre Elementos HTML Dentro do Elemento Body

O HTML (HyperText Markup Language) é a espinha dorsal de qualquer página web. Ele define a estrutura e o conteúdo de um site. Neste artigo, vamos explorar detalhadamente os elementos HTML que podem ser usados dentro do elemento <body>, com exemplos práticos e explicações dos parâmetros adicionais.

Elementos para Adicionar Conteúdo às Páginas

Parágrafos: `<p> ... </p>`

Os parágrafos são usados para adicionar blocos de texto ao seu documento HTML.

<p>Este é um parágrafo de exemplo.</p>

1	<p>Este é um parágrafo de exemplo.</p>

Imagens: `<img>`

O elemento <img> é usado para incorporar imagens. Ele possui alguns atributos importantes:

src: Especifica o caminho da imagem.
alt: Fornece um texto alternativo para a imagem, que é exibido se a imagem não puder ser carregada.

<img src="caminho/para/imagem.jpg" alt="Descrição da imagem">

1	<img src="caminho/para/imagem.jpg" alt="Descrição da imagem">

Links: `<a> ... </a>`

Os links são usados para criar hiperlinks para outras páginas ou recursos. Atributos importantes incluem:

href: Especifica o URL para o qual o link aponta.

<a href="https://www.exemplo.com">Visite o Exemplo</a>

1	<a href="https://www.exemplo.com">Visite o Exemplo</a>

Cabeçalhos: `<h1> ... </h1>` to `<h6> ... </h6>`

Os cabeçalhos são usados para definir títulos e subtítulos, com <h1> sendo o mais importante e <h6> o menos importante.

<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<h3>Seção</h3>
<h4>Subseção</h4>
<h5>Sub-subseção</h5>
<h6>Nota</h6>

<h1>Título Principal</h1>

<h2>Subtítulo</h2>

<h3>Seção</h3>

<h4>Subseção</h4>

<h5>Sub-subseção</h5>

Listas Ordenadas: `<ol> ... </ol>` e `<li> ... </li>`

Listas ordenadas são usadas para criar listas numeradas. Cada item da lista é definido pelo elemento <li>.

<ol>
  <li>Primeiro item</li>
  <li>Segundo item</li>
  <li>Terceiro item</li>
</ol>

<ol>

<li>Primeiro item</li>

<li>Segundo item</li>

<li>Terceiro item</li>

</ol>

Listas Não Ordenadas: `<ul> ... </ul>` e `<li> ... </li>`

Listas não ordenadas são usadas para criar listas com marcadores. Cada item da lista é definido pelo elemento <li>.

<ul>
  <li>Primeiro item</li>
  <li>Segundo item</li>
  <li>Terceiro item</li>
</ul>

<ul>

<li>Primeiro item</li>

<li>Segundo item</li>

<li>Terceiro item</li>

</ul>

Tabelas: `<table> ... </table>`, `<tr> ... </tr>`, `<th> ... </th>`, `<td> ... </td>`

Tabelas são usadas para organizar dados em formato tabular. Os principais elementos são:

<table>: Define a tabela.
<tr>: Define uma linha na tabela.
<th>: Define uma célula de cabeçalho.
<td>: Define uma célula de dados.

<table>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
  </tr>
  <tr>
    <td>João</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>25</td>
  </tr>
</table>

<table>

<tr>

<th>Idade</th>

</tr>

<tr>

</tr>

<tr>

<td>Maria</td>

</tr>

</table>

Agora vamos juntar tudo que aprendemos até aqui em um único arquivo fonte:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Minha Primeira Página HTML</title>
	<link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Bem-vindo ao Meu Site</h1>
    <p>Este é um parágrafo de texto na minha primeira página HTML.</p>
	<img src="imagem.jpg" alt="Descrição da imagem">
	<a href="https://maykosilva.com">Visite o Exemplo</a>
	<h1>Título Principal</h1>
	<h2>Subtítulo</h2>
	<h3>Seção</h3>
	<h4>Subseção</h4>
	<h5>Sub-subseção</h5>
	<h6>Nota</h6>
  <ol>
  <li>Primeiro item</li>
  <li>Segundo item</li>
  <li>Terceiro item</li>
</ol>

<ul>
  <li>Primeiro item</li>
  <li>Segundo item</li>
  <li>Terceiro item</li>
</ul>
<table>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
  </tr>
  <tr>
    <td>João</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>25</td>
  </tr>
</table>
<div id="main-content" class="container">
  <p>Este é um parágrafo dentro de um <span class="highlight">div</span> que está estilizado com CSS.</p>
  
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Minha Primeira Página HTML</title>

</head>

<body>

<h1>Bem-vindo ao Meu Site</h1>

<p>Este é um parágrafo de texto na minha primeira página HTML.</p>

<a href="https://maykosilva.com">Visite o Exemplo</a>

<h1>Título Principal</h1>

<h2>Subtítulo</h2>

<h3>Seção</h3>

<h4>Subseção</h4>

<h5>Sub-subseção</h5>

<ol>

<li>Primeiro item</li>

<li>Segundo item</li>

<li>Terceiro item</li>

</ol>

<ul>

<li>Primeiro item</li>

<li>Segundo item</li>

<li>Terceiro item</li>

</ul>

<table>

<tr>

<th>Idade</th>

</tr>

<tr>

</tr>

<tr>

<td>Maria</td>

</tr>

</table>

<p>Este é um parágrafo dentro de um <span class="highlight">div</span> que está estilizado com CSS.</p>

</div>

</body>

</html>

Você pode salvar esse arquivo como index.html em um diretório de sua preferência e abrir com seu browser favorito.

Elementos Usados em Conjunto com CSS

Divisões: `<div> ... </div>`

O elemento <div> é um contêiner genérico usado para agrupar outros elementos e aplicar estilos CSS. Atributos comuns incluem:

class: Define uma ou mais classes CSS para o elemento.
id: Define um identificador único para o elemento.

<div id="main-content" class="container">
  <p>Conteúdo dentro de um div.</p>
</div>

<p>Conteúdo dentro de um div.</p>

</div>

Vamos criar um exemplo mais completo que demonstre claramente a relação e o impacto dos elementos <div> e <span> quando usados em conjunto com CSS. Vamos incluir um exemplo de código HTML e CSS, e explicar como eles interagem.

Exemplo Completo: Usando `<div>` e `<span>` com CSS

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de CSS com Div e Span</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="main-content" class="container">
        <h1>Bem-vindo ao Meu Site</h1>
        <p>Este é um parágrafo dentro de um <span class="highlight">div</span> que está estilizado com CSS.</p>
        <p>Outro parágrafo com <span id="special-text" class="highlight">texto especial</span> que tem um estilo diferente.</p>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Exemplo de CSS com Div e Span</title>

</head>

<body>

<h1>Bem-vindo ao Meu Site</h1>

<p>Este é um parágrafo dentro de um <span class="highlight">div</span> que está estilizado com CSS.</p>

<p>Outro parágrafo com <span id="special-text" class="highlight">texto especial</span> que tem um estilo diferente.</p>

</div>

</body>

</html>

O arquivo acima faz uso da tag <link> que como vimos nesse outro artigo, serve para referenciar um arquivo de estilos. Portanto precisamos criar também um arquivo de estilos com o nome “styles.css” que consta em href=”styles.css”. O conteúdo do arquivo será o seguinte:

/* Estilo para o contêiner principal */
.container {
    border: 2px solid #000;
    padding: 20px;
    background-color: #f9f9f9;
}

/* Estilo para o texto destacado */
.highlight {
    color: red;
    font-weight: bold;
}

/* Estilo específico para o texto especial */
#special-text {
    color: blue;
    font-style: italic;
}

/* Estilo para o contêiner principal */

.container {

border: 2px solid #000;

padding: 20px;

background-color: #f9f9f9;

}

/* Estilo para o texto destacado */

.highlight {

color: red;

font-weight: bold;

}

/* Estilo específico para o texto especial */

#special-text {

color: blue;

font-style: italic;

}

Explicação

HTML

<div id="main-content" class="container">: Este div serve como contêiner principal para o conteúdo. Ele possui um id chamado “main-content” e uma class chamada “container”.
<span class="highlight">: Este span dentro do parágrafo é usado para destacar uma parte específica do texto. Ele possui uma class chamada “highlight”.
<span id="special-text" class="highlight">: Este span tem tanto um id (“special-text”) quanto uma class (“highlight”). Isso permite aplicar estilos específicos via CSS.

CSS

.container: Aplica um estilo ao div com a classe “container”, adicionando uma borda, preenchimento e uma cor de fundo.
.highlight: Aplica um estilo ao span com a classe “highlight”, mudando a cor do texto para vermelho e tornando-o em negrito.
#special-text: Aplica um estilo específico ao span com o id “special-text”, mudando a cor do texto para azul e aplicando itálico.

Resultado ao Carregar a Página

Quando você carrega a página HTML, verá um contêiner com uma borda preta e um fundo cinza claro. Dentro desse contêiner, há dois parágrafos:

O primeiro parágrafo contém um span com texto vermelho e em negrito.
O segundo parágrafo contém um span com texto azul e em itálico, além de ser em negrito devido à classe “highlight”.

Este exemplo demonstra claramente como os elementos <div> e <span> podem ser usados em conjunto com CSS para estilizar partes específicas de uma página web. A combinação de id e class permite aplicar estilos gerais e específicos de maneira eficiente.

Span: `<span> ... </span>`

O elemento <span> é usado para aplicar estilos a partes específicas do texto. Atributos comuns incluem:

class: Define uma ou mais classes CSS para o elemento.
id: Define um identificador único para o elemento.

<p>Este é um <span id="highlight" class="text-red">texto vermelho</span> dentro de um parágrafo.</p>

1	<p>Este é um <span id="highlight" class="text-red">texto vermelho</span> dentro de um parágrafo.</p>

Neste exemplo, o elemento <span> possui os atributos id e class:

id="highlight": Define um identificador único para o elemento, que pode ser usado para aplicar estilos específicos via CSS ou manipular o elemento via JavaScript.
class="text-red": Define uma classe CSS que pode ser usada para aplicar estilos específicos ao elemento.

Elementos para Adicionar JavaScript ao Website

Script: `<script> ... </script>`

O elemento <script> é usado para incluir código JavaScript. Atributos comuns incluem:

src: Especifica o caminho para um arquivo JavaScript externo.
type: Define o tipo de script (geralmente “text/javascript”).

<script>
  alert('Olá, mundo!');
</script>

alert('Olá, mundo!');

</script>

Agora vamos fornecer um exemplo completo que inclua os atributos src e type no elemento <script>.

Exemplo com Código JavaScript Interno.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de JavaScript Interno</title>
</head>
<body>
    <h1>Bem-vindo ao Meu Site</h1>
    <p id="demo">Este texto será alterado pelo JavaScript.</p>

    <script type="text/javascript">
        document.getElementById("demo").innerHTML = "Texto alterado pelo JavaScript!";
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Exemplo de JavaScript Interno</title>

</head>

<body>

<h1>Bem-vindo ao Meu Site</h1>

<p id="demo">Este texto será alterado pelo JavaScript.</p>

document.getElementById("demo").innerHTML = "Texto alterado pelo JavaScript!";

</script>

</body>

</html>

Exemplo com Código JavaScript Externo

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de JavaScript Externo</title>
</head>
<body>
    <h1>Bem-vindo ao Meu Site</h1>
    <p id="demo">Este texto será alterado pelo JavaScript.</p>

    <!-- Incluindo um arquivo JavaScript externo -->
    <script src="script.js" type="text/javascript"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Exemplo de JavaScript Externo</title>

</head>

<body>

<h1>Bem-vindo ao Meu Site</h1>

<p id="demo">Este texto será alterado pelo JavaScript.</p>

</body>

</html>

Arquivo JavaScript Externo (script.js)

document.getElementById("demo").innerHTML = "Texto alterado pelo JavaScript externo!";

1	document.getElementById("demo").innerHTML = "Texto alterado pelo JavaScript externo!";

Explicação

HTML com JavaScript Interno

<script type="text/javascript">: O atributo type especifica o tipo de script. Embora “text/javascript” seja o valor padrão e possa ser omitido, é bom incluí-lo para clareza.
Código JavaScript: O código dentro da tag <script> altera o conteúdo do elemento <p> com id="demo".

HTML com JavaScript Externo

<script src="script.js" type="text/javascript"></script>: O atributo src especifica o caminho para o arquivo JavaScript externo. O atributo type define o tipo de script.
Arquivo JavaScript Externo (script.js): Contém o código JavaScript que altera o conteúdo do elemento <p> com id="demo".

Resultado ao Carregar a Página

JavaScript Interno: Ao carregar a página, o texto dentro do parágrafo com id="demo" será alterado para “Texto alterado pelo JavaScript!”.
JavaScript Externo: Ao carregar a página, o texto dentro do parágrafo com id="demo" será alterado para “Texto alterado pelo JavaScript externo!” usando o código no arquivo script.js.

Este exemplo demonstra como usar o elemento <script> tanto para incluir código JavaScript diretamente no HTML quanto para referenciar um arquivo JavaScript externo. A inclusão dos atributos src e type mostra claramente como especificar o caminho do script e o tipo de conteúdo.

Elementos para Formatar Texto

Negrito: `<strong> ... </strong>`

O elemento <strong> é usado para destacar texto em negrito.

<p>Este é um texto <strong>importante</strong>.</p>

1	<p>Este é um texto <strong>importante</strong>.</p>

Ênfase: `<em> ... </em>`

O elemento <em> é usado para enfatizar texto, geralmente renderizado em itálico.

<p>Este é um texto <em>enfatizado</em>.</p>

Elementos para Definir Seções da Página

Cabeçalho: `<header> ... </header>`

O elemento <header> é usado para definir a seção de cabeçalho de uma página ou seção.

<header>
  <h1>Bem-vindo ao Meu Site</h1>
</header>

<h1>Bem-vindo ao Meu Site</h1>

</header>

Navegação: `<nav> ... </nav>`

O elemento <nav> é usado para definir uma seção de navegação.

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">Sobre</a></li>
    <li><a href="#contact">Contato</a></li>
  </ul>
</nav>

<nav>

<ul>

<li><a href="#about">Sobre</a></li>

<li><a href="#contact">Contato</a></li>

</ul>

</nav>

Conteúdo Principal: `<main> ... </main>`

O elemento <main> é usado para definir o conteúdo principal de uma página.

<main>
  <h2>Artigo Principal</h2>
  <p>Este é o conteúdo principal da página.</p>
</main>

<main>

<h2>Artigo Principal</h2>

<p>Este é o conteúdo principal da página.</p>

</main>

Rodapé: `<footer> ... </footer>`

O elemento <footer> é usado para definir a seção de rodapé de uma página ou seção.

<footer>
  <p>© 2023 Meu Site. Todos os direitos reservados.</p>
</footer>

</footer>

Agora vamos juntar tudo através do código fonte a seguir:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de CSS com Div e Span</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="main-content" class="container">
	<header>
	<img src="logo.png" alt="Logo Site" style="width:128px;height:128px;">
	</header>
	<nav>
	<ul>
			<li><a href="https://google.com">Home</a></li>
			<li><a href="#about">Sobre</a></li>
			<li><a href="#contact">Contato</a></li>
	</ul>
	</nav>
        <main>
		<h1>Bem-vindo ao Meu Site</h1>
        <p><strong>Este é um parágrafo </strong> dentro de um <span class="highlight">div</span> que está estilizado com CSS.</p>
        <p><em> Outro parágrafo com </em> <span id="special-text" class="highlight">texto especial</span> que tem um estilo diferente.</p>
		</main>
    </div>
	<footer>
	<p>@2024 Todos os Direitos Reservados.</p>
	</footer>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Exemplo de CSS com Div e Span</title>

</head>

<body>

</header>

<nav>

<ul>

<li><a href="#about">Sobre</a></li>

<li><a href="#contact">Contato</a></li>

</ul>

</nav>

<main>

<h1>Bem-vindo ao Meu Site</h1>

<p><strong>Este é um parágrafo </strong> dentro de um <span class="highlight">div</span> que está estilizado com CSS.</p>

<p><em> Outro parágrafo com </em> <span id="special-text" class="highlight">texto especial</span> que tem um estilo diferente.</p>

</main>

</div>

</footer>

</body>

</html>

Você pode salvar esse arquivo como index.html e abrir com seu browser.

Comentários: ``

Os comentários são usados para adicionar notas no código HTML que não são exibidas no navegador.

<!-- Este é um comentário -->
<p>Este é um parágrafo visível.</p>

1 2	<!-- Este é um comentário --> <p>Este é um parágrafo visível.</p>

Entidades de Caracteres

Sinal de Menor: `<`

Representa o caractere <.

<p>Use < para representar o sinal de menor.</p>

1	<p>Use < para representar o sinal de menor.</p>

Sinal de Maior: `>`

Representa o caractere >.

<p>Use > para representar o sinal de maior.</p>

1	<p>Use > para representar o sinal de maior.</p>

E Comercial: `&`

Representa o caractere &.

<p>Use & para representar o e comercial.</p>

1	<p>Use & para representar o e comercial.</p>

Espaço Não Quebrável:

Representa um espaço que não quebra a linha.

<p>Este é um espaço não quebrável.</p>

1	<p>Este é um espaço não quebrável.</p>

Se você precisa colocar vários espaços entre duas palavras, você terá que usar o elemento . Então se por exemplo você quiser um texto assim:

“Existem 10 Espaços aqui”.

Você precisa usar a seguinte sintaxe:

<p>Existem 10 Espaços nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;aqui</p>

1	<p>Existem 10 Espaços nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;aqui</p>

Conclusão

Neste artigo, exploramos diversos elementos HTML que podem ser usados dentro do elemento <body>. Cada um desses elementos desempenha um papel crucial na construção de uma página web bem estruturada e funcional. Esperamos que este guia tenha sido útil para você entender melhor como usar esses elementos em seus projetos.

Se você tiver alguma dúvida ou precisar de mais exemplos, sinta-se à vontade para deixar um comentário abaixo!

Guia Completo sobre Elementos HTML Dentro do Elemento Body

Elementos para Adicionar Conteúdo às Páginas

Parágrafos: <p> ... </p>

Imagens: <img>

Links: <a> ... </a>

Cabeçalhos: <h1> ... </h1> to <h6> ... </h6>

Listas Ordenadas: <ol> ... </ol> e <li> ... </li>

Listas Não Ordenadas: <ul> ... </ul> e <li> ... </li>

Tabelas: <table> ... </table>, <tr> ... </tr>, <th> ... </th>, <td> ... </td>

Elementos Usados em Conjunto com CSS

Divisões: <div> ... </div>

Exemplo Completo: Usando <div> e <span> com CSS

Explicação

HTML

CSS

Resultado ao Carregar a Página

Span: <span> ... </span>

Elementos para Adicionar JavaScript ao Website

Script: <script> ... </script>

Exemplo com Código JavaScript Interno.

Exemplo com Código JavaScript Externo

Arquivo JavaScript Externo (script.js)

Explicação

HTML com JavaScript Interno

HTML com JavaScript Externo

Resultado ao Carregar a Página

Elementos para Formatar Texto

Negrito: <strong> ... </strong>

Ênfase: <em> ... </em>

Elementos para Definir Seções da Página

Cabeçalho: <header> ... </header>

Navegação: <nav> ... </nav>

Conteúdo Principal: <main> ... </main>

Rodapé: <footer> ... </footer>

Comentários:

Entidades de Caracteres

Sinal de Menor: <

Sinal de Maior: >

E Comercial: &

Espaço Não Quebrável:

Conclusão

Related Posts

Parágrafos: `<p> ... </p>`

Imagens: `<img>`

Links: `<a> ... </a>`

Cabeçalhos: `<h1> ... </h1>` to `<h6> ... </h6>`

Listas Ordenadas: `<ol> ... </ol>` e `<li> ... </li>`

Listas Não Ordenadas: `<ul> ... </ul>` e `<li> ... </li>`

Tabelas: `<table> ... </table>`, `<tr> ... </tr>`, `<th> ... </th>`, `<td> ... </td>`

Divisões: `<div> ... </div>`

Exemplo Completo: Usando `<div>` e `<span>` com CSS

Span: `<span> ... </span>`

Script: `<script> ... </script>`

Negrito: `<strong> ... </strong>`

Ênfase: `<em> ... </em>`

Cabeçalho: `<header> ... </header>`

Navegação: `<nav> ... </nav>`

Conteúdo Principal: `<main> ... </main>`

Rodapé: `<footer> ... </footer>`

Comentários: ``

Sinal de Menor: `<`

Sinal de Maior: `>`

E Comercial: `&`