Objetivos de aprendizagem
Conhecer a linguagem de marcação HTML Entender a sintaxe básica da linguagem Conhecer as tags básicas da HTML
Sou um desenvolvedor Web.
<p>
, tal como: <p>Sou um desenvolvedor Web</p>
<p>
para parágrafo. Mais a frente vamos conhecer as principais tags HTML e como utilizá-las.<!DOCTYPE html>
- declaração que define que este documento é do tipo HTML5, deve ser a primeira tag do documento (obrigatório);<html>
- é o elemento raiz de uma página HTML, composto pela tag <html>
, que indica o início do documento e pela tag </html>
que delimita o final do documento. Observe que a tag de fechamento tem uma /
. Isso é padrão para todos os elementos que possuem tag de fechamento;<head>
- elemento que contém configurações e meta informações sobre o documento, o conteúdo colocado dentro deste elemento não fica visível no página Web, quando acessada pelo navegador. Este elemento também formado pelas tags de abertura e fechamento;<body>
- elemento que indica o corpo do documento, contém todo conteúdo visível da página Web. Também formado pelas tags de abertura e fechamento.<!-- Conteúdo aqui -->
- esse trecho de código na linha 9 é um exemplo de comentário. Comentários é como fazemos anotações em nosso HTML, eles são ignorados pelo navegador. Começamos um comentário HTML com <! -
e terminamos um comentário com ->
.p
que representa um parágrafo num documento HTML. No entanto, essa estrutura é aplicada a qualquer elemento que possui tag de abertura e fechamento. Como vamos ver mais a frente, alguns elementos HTML possuem apenas a tag de abertura.p
), envolvido pelos caracteres <
(menor que) e >
(maior que). Isso demonstra onde o elemento começa, ou onde seu efeito se inicia — nesse caso, onde é o começo do parágrafo.Atenção: esquecer de incluir uma tag de fechamento, ou simplismente esquecer de colocar a/
(barra) é um dos erros mais comuns de iniciantes causando resultados indesejados e estranhos.
html
) e abri o arquivo em qualquer navegador Web.charset
e título da página. Vamos adicionar essas configurações e também transformar o texto "Olá mundo, HTML!" em um texto maior e negrito, tipo cabeçalho, com mais destaque. <meta>
(linha 5) - elemento utilizado para adicionar metadados ao documento. Metadados são dados(informações, configurações, etc.) sobre o documento. No exemplo acima é adicionado o atributo charset,
que é utilizado para indicar o formato de codificação de caracteres utilizados no documento. Nesse caso, está sendo utilizado UTF-8
, que pode representar qualquer caractere universal padrão do Unicode e assim evitamos problemas de acentuação;<title>
(linha 6) - elemento que especifica um título para o documento;<h1>
(10) - elemento que define um texto com destaque, fonte grande e negrito;<p>
(linha 11) - elemento que define um parágrafo.class
ao elemento h1, esse atributo é utilizado para categorizar elementos, pode ser adicionado a qualquer elemento. No entanto, a simples utilização de um atributo class
não impacta em nada a exibição do conteúdo do elemento pelo navegador. Há diversos atributos que podem ser adicionados à qualquer elemento, sendo conhecidos como atributos globais (veja quais são aqui) e outros que são específicos para determinados elementos (conheça todos os atributos HTML).<tag nome-do-atributo="valor-do-atributo">
. Incia-se com um espaço entre ele e o nome do elemento (ou o atributo anterior, caso o elemento já contenha um ou mais atributos.), após o nome do atributo vem o sinal de =
separando-o do seu valor, por fim, o valor do atributo deve ser colocado entre aspas duplas.charset
adicionado ao elemento meta
. Algo comum em elementos dentro do <head>
. <img>
, que é utilizado para adicionar uma imagem ao documento HTML. Veja o exemplo abaixo:<img>
passando o endereço da imagem para o atributo src.
Agora quando você salvar o código do exemplo acima e abrir no navegador será exibida abaixo do texto a imagem "carregada" do link/endereço passado como valor para o atributo src
do elemento <img>
.<h1>Novo título</h1>
, qualquer texto colocado dentro do elemento h1
tem o valor semântico de um título, o navegador entende isso e exibe-o com destaque (negrito e grande), além disso, qualquer desenvolvedor que conhece HTML ao ver o código sabe que representa um título. <header>
- Utilizado para descrever o cabeçalho de um documento ou seção;<main>
- Define o conteúdo principal de um documento, o conteúdo mais importante;<nav>
- Deve ser utilizado para agrupar os links de navegação interna do site (menu);<section>
- Representa uma seção dentro de um documento HTML.<aside>
- Utilizado para definir um conteúdo secundário ao conteúdo principal, geralmente um conteúdo lateral;<footer>
- Define o rodapé (parte final de uma página) de um documento HTML.<div>.
Podemos descrever o elemento <div>
como um caixa genérica para qualquer conteúdo, que de certa forma não representa nada por não possuir valor semântico. Geralmente é utilizado para agrupar elementos para serem referenciados pelo CSS. Ele deve ser utilizado somente quando não tiver outro elemento de semântica específico para o que se deseja.