O que é HTML?

HTML é a sigla para HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto. É uma linguagem de marcação utilizada para criar e estruturar páginas web. O HTML é composto por uma série de elementos, como tags, atributos e conteúdo, que são utilizados para definir a estrutura e o conteúdo de uma página web.

O que são tags em HTML?

Em HTML, as tags são elementos utilizados para marcar e estruturar o conteúdo de uma página web. Elas são compostas por um nome entre os símbolos "<" e ">" .

Existem tags de abertura e tags de fechamento. A tag de abertura é representada pelo nome da tag entre os símbolos "<" e ">" , enquanto a tag de fechamento é representada pelo nome da tag entre os símbolos "<" e ">" .

As tags podem conter atributos, que são informações adicionais que especificam o comportamento ou a aparência do elemento. Os atributos são definidos dentro da tag de abertura e possuem um nome e um valor.

O que são atributos em HTML?

Em HTML, os atributos são informações adicionais que são adicionadas às tags para especificar o comportamento ou a aparência do elemento.

Os atributos são definidos dentro da tag de abertura e possuem um nome e um valor. O nome do atributo é seguido pelo símbolo "=" e, em seguida, pelo valor do atributo, que pode ser colocado entre aspas simples ou duplas.

Alguns exemplos de atributos comuns em HTML são o "id", que identifica exclusivamente um elemento, o "class", que define uma classe para o elemento, e o "src", que especifica a origem de um recurso, como uma imagem ou um vídeo.

Principais tags em HTML

A seguir, apresentamos alguns exemplos das principais tags em HTML e suas funcionalidades:

DOCTYPE

Define o tipo de documento e a versão do HTML utilizada.

                
                    <!DOCTYPE html>

html

Tag raiz de um documento HTML.

Todos as demais tags HTML ficam dentro de HTML

                
                    <html>
                    </html>

Principais atributos

lang: Define o idioma do documento.

Exemplo: <html lang="pt-br">

head

Contém informações sobre o documento, como o título, metadados e links para arquivos externos.

                
                    <head>
                    </head>

title

Define o título do documento, que é exibido na barra de título do navegador.

Fica dentro

                
                    <title>Título do Documento</title>

body

Contém o conteúdo do documento, como texto, imagens, links e outros elementos.

                
                    <body>
                    </body>

Estrutura básica html5

                
                    <!DOCTYPE html>
                    <html lang="pt-br">
                    <head>
                        <meta charset="UTF-8">
                        <meta name="description" content="Descrição do documento">
                        <title>Título do Documento</title>
                    </head>
                    <body>
                        <h1>Título do Documento</h1>
                        <p>Conteúdo do documento</p>
                    </body>
                    </html>

Parágrafos

Exemplo de parágrafo 1

Exemplo de parágrafo 2

Exemplo de parágrafo 3

                            
                    <p>Exemplo de parágrafo 1</p>
                    <p>Exemplo de parágrafo 2</p>
                    <p>Exemplo de parágrafo 3</p>

Quebra de linha - br

Exemplo de texto 1
Exemplo de texto 2

Exemplo de texto 3
Exemplo de texto 4

            
                <p>Exemplo de texto 1<br>Exemplo de texto 2</p>
                <p>Exemplo de texto 3<br>Exemplo de texto 4</p>

Formatação de texto por tags

Exemplo de texto em negrito

Exemplo de texto em itálico

Exemplo de texto sublinhado

~~Exemplo de texto riscado~~

Exemplo de texto marcado

Exemplo: Exemplo de texto pequeno

Teste: _{Exemplo de texto subscrito}

Teste: ^{Exemplo de texto sobrescrito}

        
            
            <p><strong>Exemplo de texto em negrito</strong></p>
            <p><em>Exemplo de texto em itálico</em></p>
            <p><u>Exemplo de texto sublinhado</u></p>
            <p><s>Exemplo de texto riscado</s></p>
            <p><mark>Exemplo de texto marcado</mark></p>
            <p>Exemplo: <small>Exemplo de texto pequeno</small></p>
            <p>Teste: <sub>Exemplo de texto subscrito</sub></p>
            <p>Teste: <sup>Exemplo de texto sobrescrito</sup></p>

Inline vs Block

Inline: Elementos inline são exibidos em linha, um ao lado do outro, e não quebram a linha. Block: Exemplos de elementos block são parágrafos, títulos e divisões.

Títulos

Exemplo de título 1

Exemplo de título 2

Exemplo de título 3

Exemplo de título 4

Exemplo de título 5

Exemplo de título 6

        
            <h1>Exemplo de título 1</h1>
            <h2>Exemplo de título 2</h2>
            <h3>Exemplo de título 3</h3>
            <h4>Exemplo de título 4</h4>
            <h5>Exemplo de título 5</h5>
            <h6>Exemplo de título 6</h6>

Listas

Exemplo de lista não ordenada

Exemplo 1
Exemplo 2
Exemplo 3

                
                    <ul>
                        <li>Exemplo 1</li>
                        <li>Exemplo 2</li>
                        <li>Exemplo 3</li>
                    </ul>

Principais atributos

type: Define o tipo de marcador da lista.

Exemplo: <ul type="circle">
- circle
- disc
- square

Exemplo 1
Exemplo 2
Exemplo 3

                
                    <ul type="square" >
                        <li>Exemplo 1</li>
                        <li>Exemplo 2</li>
                        <li>Exemplo 3</li>
                    </ul>

Lista ordenada

Flamengo
Palmeiras
Santos
São Paulo
Grêmio
Internacional
Atlético Mineiro
Corinthians
Fluminense
Bahia

            
            <ol>
                <li>Flamengo</li>
                <li>Palmeiras</li>
                <li>Santos</li>
                <li>São Paulo</li>
                <li>Grêmio</li>
                <li>Internacional</li>
                <li>Atlético Mineiro</li>
                <li>Corinthians</li>
                <li>Fluminense</li>
                <li>Bahia</li>
            </ol>

Principais atributos

type: Define o tipo de numeração da lista.

Exemplo: <ol type="A">

start: Define o número inicial da lista.

Exemplo: <ol start="3">

Flamengo
Palmeiras
Santos
São Paulo
Grêmio
Internacional
Atlético Mineiro
Corinthians
Fluminense
Bahia

            
            <ol type="A" start="3">
                <li>Flamengo</li>
                <li>Palmeiras</li>
                <li>Santos</li>
                <li>São Paulo</li>
                <li>Grêmio</li>
                <li>Internacional</li>
                <li>Atlético Mineiro</li>
                <li>Corinthians</li>
                <li>Fluminense</li>
                <li>Bahia</li>
            </ol>

Seção de comentários

        
            <!-- Comentário em HTML -->
            <!--
                Comentário em HTML de várias linhas
                Linha 1
                Linha 2
                Linha 3
            -->

Links

Link na mesma aba: Google

Criar link que abra em outra aba: Google

Link para uma seção da página: Ir para a seção de link

Link para um e-mail: Enviar email

Link para um telefone: Ligar

Link para uma página do próprio projeto: Acessar

        
            <p>Link na mesma aba: <a href="https://www.google.com">Google</a></p>
            <p>Criar link que abra em outra aba: <a href="https://www.google.com" target="_blank">Google</a></p>
            <p>Link para uma seção da página: <a href="#inicio">Ir para a seção de link</a></p>
            <p>Link para um e-mail: <a href="mailto:giovanni.guarnieri@fatec.sp.gov.br">Enviar email</a></p>
            <p>Link para um telefone: <a href="tel:+5511999999999">Ligar</a></p>
            <p>Link para uma página do próprio projeto: <a href="teste.html">Acessar</a></p>

Imagens

Imagem com link externo: Logo do Google

Imagem de pasta do projeto - Caminho Relativo: Logo do Google

        
            <p>Imagem com link externo: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo do Google"></p>
            <p>Imagem de pasta do projeto - Caminho Relativo: <img src="imgs/google.png" alt="Logo do Google"></p>

Tabelas

Teste Teste Teste Teste
Animal	Classificação	Habitat
Jaguar	Mamífero	Amazônia
Jaguar	Ave	Mata Atlântica
Jabuti	Réptil	Cerrado
Onça-pintada	Mamífero	Pantanal

        
            <table>
                <thead>
                    <tr>
                        <th>Animal</th>
                        <th>Classificação</th>
                        <th>Habitat</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Jaguar</td>
                        <td>Mamífero</td>
                        <td>Amazônia</td>
                    </tr>
                    <tr>
                        <td>Tucano</td>
                        <td>Ave</td>
                        <td>Mata Atlântica</td>
                    </tr>
                    <tr>
                        <td>Jabuti</td>
                        <td>Réptil</td>
                        <td>Cerrado</td>
                    </tr>
                    <tr>
                        <td>Onça-pintada</td>
                        <td>Mamífero</td>
                        <td>Pantanal</td>
                    </tr>
                </tbody>
            </table>

Tags de agrupamento

Div

Div é uma tag de agrupamento que permite agrupar elementos em um bloco. Ela é utilizada para criar seções ou áreas de conteúdo em uma página web.

Exemplo de texto dentro de uma div

Outro exemplo de texto dentro de uma div

                
                    <div>
                        <p>Exemplo de texto dentro de uma div</p>
                    </div>
                    <div>
                        <p>Outro exemplo de texto dentro de uma div</p>
                    </div>

Span

Span é uma tag de agrupamento que permite agrupar elementos em linha. Ela é utilizada para aplicar estilos ou manipular partes específicas.

Diferente da tag div, a tag span não cria um bloco, mas sim uma área de conteúdo em linha.

Exemplo de texto com span

Outro exemplo de texto com span

                
                    <p>Exemplo de texto com <span>span</span></p>
                    <p>Outro exemplo de texto com <span>span</span></p>

Tags HTML5

Header

Header é uma tag de agrupamento que representa o cabeçalho de uma seção ou de um documento. Ela é utilizada para agrupar elementos de cabeçalho, como títulos, logotipos e menus de navegação.

Footer

Footer é uma tag de agrupamento que representa o rodapé de uma seção ou de um documento. Ela é utilizada para agrupar elementos de rodapé, como informações de contato, links úteis e créditos.

Nav

Nav é uma tag de agrupamento que representa uma seção de navegação em um documento. Ela é utilizada para agrupar links de navegação, menus e barras de navegação.

Main

Main é uma tag de agrupamento que representa o conteúdo principal de um documento. Ela é utilizada para agrupar o conteúdo principal de uma página web, como artigos, posts e seções de destaque.

Section

Section é uma tag de agrupamento que representa uma seção de conteúdo em um documento. Ela é utilizada para agrupar elementos relacionados, como artigos, posts e seções de conteúdo.

Article

Article é uma tag de agrupamento que representa um conteúdo independente e autônomo em um documento. Ela é utilizada para agrupar elementos que podem ser distribuídos e reutilizados de forma independente.

Aside

Aside é uma tag de agrupamento que representa um conteúdo relacionado ou complementar em um documento. Ela é utilizada para agrupar elementos que são secundários ou adicionais ao conteúdo principal.

Formulário

        
            <form action="#" method="GET">
                <fieldset>
                    <legend>Formulário de Exemplo</legend>
                    <div class="campo">
                        <label for="nome">Nome:</label>
                        <input type="text" id="nome" name="nome" required>
                    </div>

                    <div class="campo">
                        <label for="email">Email:</label>
                        <input type="email" id="email" name="email" autocomplete="off" required>
                    </div>

                    <div class="campo">
                        <label for="senha">Senha:</label>
                        <input type="password" id="senha" name="senha" required>
                    </div>

                    <div class="campo">
                        <label for="confirmar-senha">Confirmar Senha:</label>
                        <input type="password" id="confirmar-senha" name="confirmar-senha" required>
                    </div>

                    <button type="submit">Enviar</button>
                    <button type="reset">Limpar</button>
                </fieldset>
            </form>

A importânica de usar as tags corretamente

As tags em HTML são essenciais para estruturar e organizar o conteúdo de uma página web. Ao utilizar as tags corretamente, é possível criar páginas mais acessíveis, indexáveis e otimizadas para os motores de busca.

Além disso, as tags corretas facilitam a manutenção e o desenvolvimento do código, tornando-o mais legível e organizado. Por isso, é importante conhecer e utilizar as tags de forma adequada para garantir a qualidade e a eficiência do seu código HTML.

Isso está relacionado a Semântica, que é a ciência que estuda o significado das palavras e das frases em uma língua. No contexto do desenvolvimento web, a semântica refere-se à utilização correta das tags HTML

Diferença entre Semântica e Sintaxe

Na programação, a semântica e a sintaxe são dois conceitos fundamentais que se referem à forma e ao significado do código.

A sintaxe se refere à estrutura e à gramática do código, ou seja, à forma como ele é escrito e organizado. Por exemplo, a sintaxe do HTML define as regras para a escrita de tags, atributos e elementos.

Já a semântica se refere ao significado e à interpretação do código, ou seja, ao que ele representa e comunica. Por exemplo, a semântica do HTML define o significado e a função de cada tag e elemento.

❕🗒️ Atividade de Fixação

Crie um site pessoal de apresentação somente utilizando as tags desse material

No final do site, criar um formulário de contato com os campos: Nome, Email, Assunto e Mensagem, onde o usuário possa preencher e enviar as informações para o seu email profissional (botão enviar e limpar)

O site deverá conter:

Seção de apresentação
Seção de formação
Seção de experiência
Seção de contato

O site deverá envolver os seguintes recursos HTML:

Parágrafos
Imagens
Links
Formulário
Listas
Tags de agrupamento
Tags de texto
Tags de seção

Referências Bibliográficas

Illustrations by unDraw
MDN Web Docs - HTML
W3Schools - HTML
AOS - Animate on Scroll Library