Objetivos de aprendizagem
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.