Um elemento geralmente consiste em uma marca de abertura (<nome_do_elemento>), uma marca de fechamento (</nome_do_elemento>), que contém o nome do elemento entre colchetes angulares e o conteúdo entre:


<nome_do_elemento> ... conteúdo ... </nome_do_elemento>


Existem alguns elementos HTML que não possuem uma marca de fechamento ou qualquer conteúdo. Estes são chamados de elementos nulos (vazios). Elementos nulos (vazios) incluem <img>, <meta>, <link> e <input>.

Os nomes dos elementos podem ser considerados palavras-chave descritivas para o conteúdo que eles contêm, como video, audio,

table, footer.

Uma página HTML pode consistir em centenas de elementos potencialmente lidos por um navegador da Web, interpretados e renderizado em conteúdo legível ou audível por humanos na tela.


É importante observarmos a diferença entre elementos e tags:

Elementos: video, audio, table, footer

Tags: <video>, <audio>, <table>, <footer>, </html>, </body>

Os principais elementos.

Uma página HTML é composta basicamente por títulos, textos, pagrafos, imagens e links, responsáveis pela chamada de outras páginas para a tela.

Todos esses elementos são posicionados na página por meio de comandos específicos da linguagem. 

 

TÍTULO - É o texto que aparece na barra de título do browser. 

TEXTO - É a informação mais comum dentro da página. Pode ser formatado através de vários comandos. 

CABEÇALHO -  São linhas de texto com tamanhos especiais. Existem seis tamanhos prefixados de cabeçalho(h1, h2, h3, h4, h5 e h6).

IMAGEM -  São figuras, desenhos e fotos usados para ilustrar a página. 

LINK - É um trecho que aparece destacado do restante do texto, normalmente sublinhado e com outra cor. Ao clicar no link, o browser acessa outra região da página atual ou uma página localizada em qualquer lugar da Internet. Uma figura também pode ser usada como um link, ou seja, clicando na figura saltamos para outro local.

 

Exemplos (Título)



<!DOCTYPE html>

<html>
  <head>
    <title>Meu primeiro Site</title>
  </head>

  <body></body>
</html>

Nota: o exemplo só mostra o texto no título mais nada.

Exemplo (Texto)



<!DOCTYPE html>

<html>
  <head>
    <title>Meu primeiro Site</title>
  </head>

  <body>
    <p>Este é um parágrafo curto</p>

    <p>
      Este é um parágrafo muito longo, pq vou falar muito sobre aprender HTML e
      sua facilidade
    </p>

    <p>
      Este é um parágrafo curto <br />
      porque vou usar quebra de linha com br
    </p>

    <br /><br /><br />

    <p>Este parágrafo está muito separado.</p>
  </body>
</html>



Exemplo (Cabeçalho ou títulos)



<!DOCTYPE html>

<html>
  <head>
    <title>Meu primeiro Site</title>
  </head>

  <body>
    <h1>OLá mundo</h1>

    <h2>Também sou um Programador Angolano</h2>

    <h3>E estou aprendendo desenvolvimento web</h3>

    <h4>Aconselho aprenderes também</h4>

    <h5>Vou fazer para minha escola</h5>

    <h6>É muito bom</h6>
  </body>
</html>


Exemplo (Imagens)



<!DOCTYPE html>

<html>
  <head>
    <title>Meu primeiro Site</title>
  </head>

  <body>
    <h1>Este é o título principal</h1>

    <p>Este é o parágrafo</p>

    <img src="imagem.jpg" />

    <p>Em cima tem uma imagem</p>
  </body>
</html>



Exemplo (Link)



<!DOCTYPE html>

<html>
  <head>
    <title>Meu primeiro Site</title>
  </head>

  <body>
    <h1>Bem vindo ao Usando Python</h1>

    <p>
      Caso tenha dúvida, entre no nosso

      <a href="https://www.usandopy.com" target="_blank">Fórum</a>
    </p>

    <p>
      Ou quer ter novidades, entre no nosso

      <a href="https://www.usandopy.com" target="_blank">Blog</a>
    </p>

    <p>Este é o parágrafo</p>

    <img src="imagem.jpg" />

    <p>Em cima tem uma imagem</p>

    <br />

    <a href="www.google.com" target="_blank"><img src="google.jpg" /></a>

    <p>Clica na imagem acima para acessar o google</p>
  </body>
</html>


HTML Doctypes

Doctypes - abreviação de 'document type' - ajuda os navegadores a entender a versão do HTML em que o documento está escrito

para melhor interpretabilidade. As declarações de tipo de documento não são tags HTML e pertencem à parte superior de um documento. Este tópico explica a estrutura e a declaração de vários doctypes em HTML.

Adicionando o Doctype

A declaração <! DOCTYPE> deve sempre ser incluída na parte superior do documento HTML, antes da tag <html>.

Consulte HTML5 Doctype para obter detalhes sobre o HTML 5 Doctype.

<!DOCTYPE html>