PROFESSOR(A): NATÁLIA OLIVEIRA

Linguagens e Algoritmos

Aula 1 – HTML5

Objetivo da Aula

Conhecer os principais elementos que compõem a linguagem HTML.

Apresentação

Você sabia que a maioria das páginas web visitada por você foi desenvolvida em HTML?
HTML é uma linguagem de marcação de hipertexto desenvolvida por Tim Berners-Lee,
também conhecido como “pai da internet”, na década de 90. Ao longo dos anos, a linguagem
foi sendo aprimorada e atualmente estamos na sua quinta versão, também chamada de
HTML5. Para criarmos e editarmos códigos em HTML é necessário usar um IDE (ambiente
de desenvolvimento integrado) como: VSCode, Sublime, Notepad++ etc. Na verdade, você
pode utilizar até mesmo o bloco de notas para criar e editar códigos em HTML, porém ele
não possui certos recursos que podem agilizar suas tarefas do dia a dia. Ao longo desta
aula você aprenderá como criar um documento HTML.

Conteúdo

Atualmente, a web segue padrões estabelecidos pela W3C (World Wide Web Consortium),
mas nem sempre foi assim. No final da década de 90 passamos por um período denominado
como “guerra dos navegadores”, em que o Internet Explorer e o Netscape “brigavam pela
supremacia da Web”, resultando em sites que só funcionavam em um determinado navegador
(CLARK et al., 2014). Um verdadeiro pesadelo! Já imaginou se ainda fosse assim?

O que chamamos de padrões, é oficialmente chamado de “Recomendações” pela W3C. São as

maneiras recomendadas de funcionamento para as tecnologias da web. Não há nenhum tipo de
lei que obrigue navegadores e vendedores de ferramentas a adotá-las; em vez disso, a adoção é
um acordo para o bem da Web e o benefício mútuo de todos (CLARK et al., 2014).

Livro Eletrônico
faculdade.grancursosonline.com.br 1 de 10
 Professor(a): Natália Oliveira

Links
Visual Studio: https://code.visualstudio.com/download. Acesso em:
05/01/2023.
Sublimetext: https://www.sublimetext.com/3
Notepad: https://notepad-plus-plus.org/downloads/
W3C: https://www.w3c.br/Padroes/

Resumindo, o W3C “é uma organização internacional de padrões que desenvolve os

pilares de tecnologias Web tais como HTML, CSS, SVG, XML e WCAG” (W3C BRASIL, 2017).
Agora que já entendemos a importância dos padrões, vamos entender o que é o HTML e
quais são os seus elementos básicos. Como dito anteriormente, o HTML (Hypertext Markup
Language) é uma linguagem de marcação de hipertexto utilizada para construção de
páginas web. Segundo Ferreira e Eis (2015), um hipertexto nada mais é do que um conjunto
de elementos (palavras, imagens, vídeos, áudio, documentos etc.) ligados por conexões.
Juntos, estes elementos formam uma grande rede de informação.

Para distribuir informação de uma maneira global, é necessário haver uma linguagem que seja
entendida universalmente por diversos meios de acesso. O HTML se propõe a ser esta linguagem
(FERREIRA e EIS, 2015).

O HTML5, a mais nova versão do HTML, trouxe consigo um diferencial semântico

significativo e facilidade na manipulação de elementos via JavaScript ou CSS. O intuito
desta nova versão não é reinventar a roda, pois ela é compatível com todos os recursos da
especificação HTML4, entretanto, precisou-se modificar e melhorar alguns elementos e
atributos para que os mesmos pudessem ser reutilizados de forma mais eficaz.
Resumindo, o HTML5 criou novas tags e modificou a função de outras. Seus elementos
semânticos permitem que o HTML não só estruture documentos para a web, mas também
descreva o significado do conteúdo presente no nosso código, tornando-o mais claro e
limpo tanto para os desenvolvedores quanto para os navegadores e motores de busca que
processam informações. Por exemplo, as versões anteriores do HTML “não continham um
padrão universal para a criação de seções comuns e específicas como rodapé, cabeçalho,
sidebar, menus e etc.”. Agora, contamos com as tag semânticas (<footer>, <header>, <aside>,
<nav>, respectivamente) para nos ajudar a estruturar o nosso código semanticamente
(FERREIRA e EIS, 2015). Em breve, detalharemos cada uma destas tags.

O conteúdo deste livro eletrônico é licenciado para SIONE - 03634095563, vedada, por quaisquer meios e a qualquer título, a sua reprodução, cópia, divulgação ou distribuiçã
sujeitando-se aos infratores à responsabilização civil e criminal.

faculdade.grancursosonline.com.br 2 de 10
 Professor(a): Natália Oliveira

O que é uma TAG? Tag significa etiqueta, no HTML usamos estas etiquetas para marcar
os nossos elementos, ou seja, podemos determinar onde começa e onde termina um
determinado elemento, daí o nome linguagem de marcação. Vale ressaltar que, nem todas
as tags precisam ser fechadas, como a tag <br>, utilizada para pular de linha. Observemos
na Figura 1 a anatomia de um elemento HMTL.

Figura 1 | Anatomia de um elemento HTML

Fonte: Adaptada de MDN Web docs

(https://developer.mozilla.org/pt-BR/docs/Learn/Getting_started_with_the_web/HTML_basics).

As tags são representadas por parênteses angulares (< >), na Figura 1 temos o exemplo da
tag <h1>, utilizada para definir um título. Na verdade, <h1> é a primeira e mais importante
das seis tags (h1, h2, h3, h4, h5, h6) utilizadas para criar e diferenciar os títulos em um
documento HTML. Agora que já sabemos o que é uma tag, vamos aprender quais são as
tags que compõem a estrutura básica do HTML5. Vejamos (Figura 2):

Figura 2 | Estrutura básica HTML

Fonte: Elaborado pela autora.

O conteúdo deste livro eletrônico é licenciado para SIONE - 03634095563, vedada, por quaisquer meios e a qualquer título, a sua reprodução, cópia, divulgação ou distribuiçã
sujeitando-se aos infratores à responsabilização civil e criminal.

faculdade.grancursosonline.com.br 3 de 10
 Professor(a): Natália Oliveira

Vamos entender linha a linha do código acima:

• Linha 1 – <!DOCTYPE html>: o DOCYTYPE não é uma tag, mas, sim, uma instrução que
informa ao navegador qual é a versão da linguagem utilizada, que neste caso é o HTML5;
• Linhas 2 e 10: indicam a abertura e fechamento da tag <html>, considerada uma tag
raiz, pois envolve todo o conteúdo da página e delimita o nosso documento HTML. Além
disso, na tag <html> utilizamos o atributo “lang”, utilizado para definir a linguagem
principal do documento, que no nosso caso é: “pt-br”;
• Linhas 3 e 6: indicam a abertura e fechamento da tag <head>, área do código respon-
sável por representar a coleção de metadados do documento, também conhecida
como cabeçalho. Nela podemos definir o título que ficará visível na barra de título do
navegador, o conjunto de caracteres do documento, o link para uma folha de estilo etc.
Vale ressaltar que, o conteúdo inserido aqui não é exibido na página para o usuário;
• Linha 4: neste caso, a tag <meta> está sendo utilizada para definir o conjunto de ca-
racteres da sua página através do atributo charset= “UTF-8”. Com isso, o navegador
consegue entender qual é o formato de codificação de caracteres utilizado naquele
documento e renderizar corretamente o texto que será exibido na página;
• Linha 5: a tag <title> é responsável por definir o título que será exibido na guia do na-
vegador escolhido, além disso, o texto descrito na tag será utilizado para descrever a
página, caso ela seja adicionada nos seus “favoritos”;
• Linhas 7 e 8: indicam a abertura e fechamento da tag <body> que representa o corpo
da sua página. Nela inserimos todo o conteúdo (texto, vídeo, imagem...) que será exi-
bido na página para o usuário.

Bom, essas são as tags principais para criarmos qualquer página HTML, mas você deve
estar se perguntando: “Como insiro uma imagem, um link ou até mesmo uma lista no meu
documento de HTML?” É simples! Vejamos:

• Imagem: para inserir uma imagem devemos utilizar a tag <img>,

onde o atributo src
(source) é responsável por apontar o caminho da imagem que você deseja incorporar
na sua página e o atributo alt (alternative) é responsável por especificar um texto al-
ternativo para os usuários que recorrem a leitores de tela para acessar páginas web.
Além disso, quando a imagem não pode ser carregada por algum motivo, é o texto
descrito no atributo alt que aparece na tela para o usuário ( );

O conteúdo deste livro eletrônico é licenciado para SIONE - 03634095563, vedada, por quaisquer meios e a qualquer título, a sua reprodução, cópia, divulgação ou distribuiçã
sujeitando-se aos infratores à responsabilização civil e criminal.

faculdade.grancursosonline.com.br 4 de 10
 Professor(a): Natália Oliveira

• Link: para inserir um link devemos utilizar a tag <a>. Por que a tag se chama “a” e não
“link”? “A” é a forma abreviada de âncora. A tag <link> é utilizada para especificar, por
exemplo, a relação de um documento HTML com um documento de CSS externo. Veja
um exemplo de como criar um link para a página do Gran Cursos Online:

Na página que será exibida no navegador, o texto que está entre as tags <a></a>
aparecerá como link .

• Lista: para inserir uma lista podemos utilizar as tags <ul> ou <ol>. A tag <ul> cria uma
lista não ordenada (marcadores) e a tag <ol> cria uma lista ordenada. Em ambos os
casos utilizaremos a tag <li> para criar os itens da lista. Vejamos:

Figura 3 | Lista não ordenada

Fonte: Elaborado pela autora.

A Figura 3 ilustra uma lista não ordenada com 3 tipos de marcadores diferentes, são
eles: circle ○, square ▪ e disc • (default). Para escolher um dos marcadores, basta adicionar
na tag <ul> o atributo type.

O conteúdo deste livro eletrônico é licenciado para SIONE - 03634095563, vedada, por quaisquer meios e a qualquer título, a sua reprodução, cópia, divulgação ou distribuiçã
sujeitando-se aos infratores à responsabilização civil e criminal.

faculdade.grancursosonline.com.br 5 de 10
 Professor(a): Natália Oliveira

Figura 4 | Lista ordenada

Fonte: Elaborado pela autora.

A Figura 4 ilustra uma lista ordenada, para escolher o tipo de ordenação que a sua
lista terá basta adicionar na tag <ol> o atributo type e escolher um dos tipos disponíveis,
são eles: “A”, “a”, “1”, “I” ou “i”. Além disso, também é possível escolher por onde a sua lista
começará, através do atributo start. Vejamos (Figura 5):

Figura 5 | Lista ordenada com atributo start

Fonte: Elaborado pela autora.

O conteúdo deste livro eletrônico é licenciado para SIONE - 03634095563, vedada, por quaisquer meios e a qualquer título, a sua reprodução, cópia, divulgação ou distribuiçã
sujeitando-se aos infratores à responsabilização civil e criminal.

faculdade.grancursosonline.com.br 6 de 10
 Professor(a): Natália Oliveira

O atributo start só pode receber valores numéricos, sendo assim, mesmo que a lista
escolhida por você seja uma lista alfabética, o valor atribuído para o atributo start deve
ser um número, como mostra a Figura 5.
Agora vamos conhecer algumas tags para formatação de texto: <strong>, <em>, <sup>,
<sub>, <ins>, <del> e <mark>. Veja a função de cada uma na Figura 6.

Figura 6 | Tags básicas para formatação de texto

Fonte: Elaborado pela autora.

Vamos encerrar este capítulo de HTML falando sobre as tags semânticas que definem as
três principais partes de uma página, cabeçalho, corpo principal e rodapé. Tais tags já foram
citadas anteriormente, são elas: <header>, <nav>, <article>, <aside>,<section>, <footer>.
• <header>: representa o cabeçalho de um documento HTML ou até mesmo de uma
seção <section>. Nele podemos agrupar índices de conteúdo (h1, h2, h3, h4, h5, h6),
inserir logotipo, inserir campo de busca e também incluir a lista de navegação que será
definido pela tag <nav>. Exemplo de uso:

• <nav>: como mencionado acima, a tag <nav> é responsável por representar o menu de
navegação da página, muita das vezes criado pelas tags <ul>, <li> e <a>. Vale ressaltar

O conteúdo deste livro eletrônico é licenciado para SIONE - 03634095563, vedada, por quaisquer meios e a qualquer título, a sua reprodução, cópia, divulgação ou distribuiçã
sujeitando-se aos infratores à responsabilização civil e criminal.

faculdade.grancursosonline.com.br 7 de 10
 Professor(a): Natália Oliveira

que, o <nav> pode ser usado em qualquer lugar do documento que contenha uma lista
de links, seja no <header>, no <aside> ou no <footer>. Exemplo de uso:

• <article>: responsável por representar um “conteúdo que não precisa de outro para
fazer sentido em um documento HTML” (DEVMEDIA, 2017). Muito utilizado para re-
presentar artigos de blog, posts, blocos de comentários etc.;
• <aside>: responsável por representar um conteúdo adicional da sua página, como, por
exemplo, uma área de publicidade, destacando informações que não fazem parte,
propriamente dito, do conteúdo principal. Exemplo de uso:

• <section>: responsável por representar uma seção e/ou tópicos de um documento

HTML. Por exemplo, pode utilizar a <section> para dividir uma página nas seguintes
seções: introdução, destaque, novidades e informações de contato;
• <footer>: responsável por representar o rodapé de um documento HTML. Nele inseri-
mos informações como: links para redes sociais, informações de autoria, contatos etc.
Mesmo sendo a tag responsável por representar o rodapé, o <footer> pode ser inserido
em qualquer lugar do documento, não necessariamente no fim dele.

Observe a Figura 7 e veja como esses elementos semânticos podem ser organizados
em uma página HTML.

O conteúdo deste livro eletrônico é licenciado para SIONE - 03634095563, vedada, por quaisquer meios e a qualquer título, a sua reprodução, cópia, divulgação ou distribuiçã
sujeitando-se aos infratores à responsabilização civil e criminal.

faculdade.grancursosonline.com.br 8 de 10
 Professor(a): Natália Oliveira

Figura 7 | Exemplo de organização dos elementos semânticos

Fonte: Webdev Book (https://webdev.jesielviana.com/frontend/css).

Vale ressaltar que, isso não é uma regra e sim um exemplo, cada um irá organizar os
seus elementos semânticos segundo o seu contexto e sua necessidade.

Considerações Finais

Nesta aula aprendemos os principais conceitos associados a uma linguagem de marcação

padrão (HTML) para criação e manutenção de páginas Web. Além disso, aprendemos também
as tags semânticas e a sua importância no sentido de melhorar a visibilidade da sua página
pelos motores de busca. Em seguida aprenderemos como estilizar (CSS) páginas HTML e
como tornar o seu conteúdo mais dinâmico (JavaScript).

Materiais Complementares
Tags semânticas do HTML5:
https://youtu.be/pKOp7pQQzNM
W3C HTML:
https://www.w3schools.com/html/default.asp
Semântica no HTML5? Que elementos são?
https://youtu.be/Afy_Hzyo0mQ

O conteúdo deste livro eletrônico é licenciado para SIONE - 03634095563, vedada, por quaisquer meios e a qualquer título, a sua reprodução, cópia, divulgação ou distribuiçã
sujeitando-se aos infratores à responsabilização civil e criminal.

faculdade.grancursosonline.com.br 9 de 10
 Professor(a): Natália Oliveira

Referências

CLARK, Richard; STUDHOLME, Oil; MURPHY, Christopher; MANIAN, Divya. Introdução ao

HTML5 e CSS3: a evolução da Web. Rio de Janeiro, RJ: Alta Books, 2014.

FERREIRA, Elcio; EIS, Diego. HTML5: Curso W3C Escritório Brasil, 2015. Disponível em: <ht-
tps://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf> Acesso em: 26 de out. de
2022.

HTML Semântico: Conheça os elementos semânticos da HTML5. DevMedia, 2017. Dispo-

nível em: <https://www.devmedia.com.br/html-semantico-conheca-os-elementos-se-
manticos-da-html5/38065>. Acesso em: 31 de out. de 2022.

NOVO roteiro para o futuro das publicações está em andamento: W3C e IDPF estão agora
oficialmente unificados. W3C Brasil, 2017. Disponível em: <https://www.w3c.br/Noticias/
NovoRoteiroParaFuturoDasPublicacoes>. Acesso em: 26 de out. de 2022.

O conteúdo deste livro eletrônico é licenciado para SIONE - 03634095563, vedada, por quaisquer meios e a qualquer título, a sua reprodução, cópia, divulgação ou distribuiçã
sujeitando-se aos infratores à responsabilização civil e criminal.

faculdade.grancursosonline.com.br 10 de 10