<p>Meu primeiro <strong>site.</strong></p>

O resultado é o seguinte

Meu primeiro site

Com maior destaque na palavra site.

É precisa garantir que seus elementos estejam devidamente aninhados: no exemplo acima nós abrimos o elemento <p> primeiro, e dentro dele o elemento <strong>, e devemos fechar o elemento <strong> primeiro, e só depois o <p>. Caso os elementos estejam sobrepostos resultará em erro.

Elementos bloco e inline

Existe duas categorias de elementos em Html. Os elementos bloco e inline.

• Elementos em bloco formam um bloco visível na página, ou seja, ocupam todo o espaço onde estão colocados, do lado esquerdo para lado direito. Eles ocuparão uma nova linha logo após qualquer outro elemento que venha antes dele, e qualquer conteúdo que vem depois de um elemento em bloco, também, aparecerá em uma nova linha. Elementos em bloco geralmente são elementos estruturais na página que representam, por exemplo: parágrafos, listas, menus de navegação, rodapés etc. Um elemento em bloco não pode ser aninhado dentro de um elemento inline, mas podemos aninhar-lo dentro de outro elemento em bloco. Por exemplo, <div><h1></h1>.
• Os Elementos inline (em linha) são aqueles que estão contidos dentro de elementos em bloco, ou seja, eles ocupam apenas pequenas partes do conteúdo do documento e não parágrafos inteiros ou agrupamentos de conteúdo. Um elemento inline não fará com que uma nova linha apareça no documento: os elementos inline, geralmente, aparecem dentro de um parágrafo de texto, por exemplo: um elemento <a> (hyperlink) ou elementos de ênfase como <em> ou <strong>.

Vamos ver alguns exemplos representando elementos blocos e inline.

Como podemos reparar os elementos inline aparecem todos em uma linha só, apesar de na marcação estarem um em baixo do outro.
Os elementos bloco ocupam uma linha inteira, posicionando-se um em baixo do outro.

Elementos vazios

Não obstante o que dissemos anteriormente, nem todos os elementos seguem o padrão normal de: tag de abertura, conteúdo, tag de fechamento. Alguns elementos possuem apenas uma única tag, que é, geralmente, usada para inserir/incorporar algo no documento no lugar em que ele é incluído. Por exemplo, o elemento <img> insere uma imagem em uma página na posição em que ele é incluído:

Exemplo de alguns elementos vazios:

Estes elementos são chamados vazios, como vimos no exemplo anterior, porque eles possuem apenas a tag de abertura, porém não possuem conteúdo nem tag de fechamento.

Atributos de elemento Html

Um atributo em HTML é uma informação extra que você adiciona a uma tag para configurar ou modificar o comportamento de um elemento. Ele normalmente aparece dentro da tag de abertura.

Existem vários tipos de atributos e eles são colocados dentro de tag de abertura do elemento, como já mencionei acima. Por exemplo: o atributo class, id, title, name etc.

A tag <img>, por exemplo, possui como atributo obrigatório o "src" seguido de sinal de igual, aspa de abertura, o valor do atributo e aspa de fechamento.

Estrutura funcional de atributo de um elemento:

Um atributo deve conter:

1. Um espaço entre ele e o nome do elemento (ou o atributo anterior, caso o elemento já contenha um ou mais atributos.)
2. O nome do atributo, seguido por um sinal de igual, por exemplo, class.
3. Um valor de atributo, com aspas de abertura e fechamento em volta dele.

Os atributos são essenciais porque permitem especificar um elemento, por exemplo, elemento paragrafo.

Funções de um atributo

• Fornecer informações adicionais ao navegador ou ao código (ex.: alt descreve uma imagem).
• Controlar aparência ou comportamento (ex.: width define largura).
• Identificar elementos para estilização ou scripts (ex.: id, class).

Anatomia de um documento HTML

Já vimos os conceitos básicos dos elementos HTML de forma individual, porém, eles não são muito úteis sozinhos. Vamos aprender como estes elementos individuais são combinados entre si para criar uma página HTML inteira:

Estrutura de uma página Html.

O código que acabamos de ver, estrutura uma página web.
O código é dividido em várias partes fundamentais. Vamos, então explicar cada uma destas partes.

1. <!DOCTYPE html> é a menor cadeia de caracteres que conta como um doctype válido; ou seja, determina o tipo de documento pretendido, no caso documento Html.
2. <html>...</html>: O elemento <html> envolve ou aninha o conteúdo da página inteira, lembra-se quando falamos de aninhamento de elementos, pois é, todos elementos Html são aninháveis, começando pela tag Html, conhecido como o "elemento raiz" da página HTML.
3. <head></head>: O elemento <head> atua como um container para todo o conteúdo da página HTML que não é visível para os visitantes do site. Isso inclui palavras-chave e a descrição da página que você quer que apareça nos resultados de busca, o CSS para estilizar o conteúdo da página (apesar de ser recomendado faze-lo num aquivo separado), declaração de conjunto de caracteres, e etc.
4. <meta charset="utf-8">: Este elemento define o tipo da codificação dos caracteres que o seu documento deve usar, neste caso, para o tipo UTF-8, que inclui a maioria dos caracteres das linguas humanas escritas. Essencialmente, ele consegue lidar com qualquer tipo de conteúdo textual que você puder colocar no documento. Não há motivos para não indicar essa informação e esse elemento ajuda a evitar vários problemas na sua página.
5. <title></title>: O elemento <title>. Isto define o título de sua página, que aparecerá na guia do navegador na qual a página está carregada e é usado para descrevê-la quando for salva nos favoritos.
6. <body></body>: O elemento <body> contém todo o conteúdo que você quer mostrar aos usuários quando eles visitarem sua página, como texto, imagens, vídeos, jogos, faixas de áudio reproduzíveis, ou qualquer outra coisa.

Relação entre elementos Html

importa referir que as relações existentes entre os elementos Html são relações de parentesco.
Como já tivemos a oportunidade de ver, anteriormente, que o elemento <html> é chamado de "raiz da página" porque ele abraça todos os demais elementos que fazem parte da estrutura básica da página. Por isso é, também, chamado de pai. E todos os elementos nele contido são filhos deste.

Por exemplo, o elemento <head> e o <body> são filhos (childreen em inglês) de <html> e <head> e <body> são irmãos (sibling em inglês), por sua vez, o elemento <head> tem como filhos o <meta>, <title>, <link> e o <script>. E estes são irmãos entre si.

O elemento <body></body> possuí três filhos, o <h1>, <h2> e o elemento <p>. E as tags <h1>, <h2> e o elemento <p> são irmãos entre si.
No entanto, o elemento <h1> tem como filho o texto: "Titulo principal", e assim por diante.

É importante ter um conhecimento razoável sobre o grau parentesco entre os elementos html, pois ajuda-nos na hora de estilização dos mesmos.

Comentários em Html

Muitas vezes, torna-se necessário, fazer anotações no nosso código que não queremos que apareça na nossa página. É para isso que servem os comentários. Por exemplo, o conteúdo que está presente na figura da página básica de html, não aparecerá caso esta seja exibida, porque o navegador ignora todo conteúdo que se encontre dentro dos seguintes carácteres especiais <-- ... -->. Por exemplo:

Carácteres especiais em Html

Em HTML, carácteres como <, >,",' e o & são considerados carácteres especiais. Porque eles fazem parte da própria sintaxe HTML; portanto, como você inclui um desses carácteres no seu texto? Por exemplo, se você realmente deseja escrever um e comercial (&) ou sinal de menor que (<), e não quer que ele seja interpretado como código. Seria importante fazer o uso dos caracteres especiais.

Na tabela abaixo temos as entidades de referências e os códigos que representa cada um dos caracteres acima referenciado.

Nota: as referências de caracteres especiais não deve conter espaços entre eles.

Conclusão

O HTML é o primeiro passo na jornada de qualquer desenvolvedor front-end. Ele é a base sobre a qual todo o restante da web é construído, e dominar seus fundamentos é abrir as portas para um universo de possibilidades.
Neste artigo, vimos conceitos iniciais para que você dê os primeiros passos com segurança. Agora, o próximo passo é colocar a mão na massa: pratique, experimente e não tenha medo de errar.
Cada linha de código escrita é um degrau a mais rumo ao domínio da tecnologia. Se este conteúdo despertou a sua curiosidade, continue explorando — o mundo da programação está cheio de oportunidades para quem está disposto a aprender.

Lembre-se: quem aprende HTML não está apenas criando páginas, está construindo caminhos para o futuro.