HTML Básico: iniciando no desenvolvimento web com HTML

Se você pretende criar um site, aprender o HTML básico é uma das melhores coisas que você pode fazer! Independentemente de pretender trabalhar com WordPress, web designer ou desenvolvimento web, conhecer o básico do HTML é essencial. Esse conhecimento permite compreender como funciona uma página web e seus elementos. Dessa forma, você pode criar seus próprios documentos e páginas HTML. Além disso, no futuro poderá também fazer uso desses recursos para fazer alterações e manutenções em páginas já existentes.

Ao final deste artigo, você terá um conhecimento do HTML básico. Portanto, conhecerá o suficiente para realizar as sugestões acima. Dessa forma, também será possível avançar seus estudos a um nível intermediário e avançado para começar a criar páginas profissionais.

Veja também este artigo sobre cursos de programação gratuitos.

O que é o HTML

O HTML (HyperText Markup Language) não é uma linguagem de programação, mas sim de marcação. Portanto, isso significa que não podemos usar o HTML para criar funcionalidades dinâmicas. Entretanto, o HTML possibilita a organização e formatação de documentos, de forma similar ao que fazemos em editores de texto, como o Microsoft Word.

O HTML é uma linguagem de marcação de HiperTexto utilizada para estruturar um documento ou página para a web. Ou seja, ao visualizar uma página na internet, você verá a renderização de um código criado em HTML em conjunto com outras linguagens.

A linguagem HTML permite criar um código que é interpretado e renderizado pelos navegadores, exibindo o resultado ao usuário. É assim que funcionam todas as páginas que você acessa na internet: por trás delas há um código HTML que o navegador transforma na página visual que você vê. Junto com o CSS e o JavaScript, o HTML forma os três pilares do desenvolvimento web Front End.

O HTML é utilizado para marcar os elementos da página, ou seja, para estruturar a página. O CSS permite que possamos aplicar estilos aos elementos através de estilo em cascata. Ou seja, com o CSS, temos controle e modificamos a apresentação visual da página.  Já o JavaScript é uma linguagem de programação que permite adicionar interação dentro da sua página.

Portanto, se você deseja criar qualquer página da internet, saber pelo menos o HTML básico é muito importante.

Atualmente o HTML se encontra na versão HTML5, e é padronizada pela W3C (World Wide Web Consortium), uma organização internacional responsável por estabelecer padrões para a internet, como as linguagens XML, CSS e o SOAP.

Recomendamos também a leitura do nosso artigo sobre o que é HTML, onde poderá compreender melhor sobre sua história, sua evolução e muito mais.

Como funciona o HTML

Um documento HTML nada mais é que um documento contendo a extensão .html ou .htm. A partir deste documento, o navegador faz a leitura do arquivo e renderiza o seu conteúdo para que o usuário final possa visualizá-lo. Portanto, os arquivos .html ou .htm podem ser visualizados em qualquer navegador (como Google Chrome, Opera, Safari, Mozilla Firefox, etc).

Geralmente um site é composto por diversas páginas HTML, como por exemplo: um website que contenha três páginas (uma homepage, uma página de contato e uma página de produtos) receberá ao menos três documentos .html distintos, sendo um para cada página do website.

Dentro desse documento, são escrito diversas linhas de códigos de marcação, ou seja, elementos do HTML. Esses elementos se dividem entre as tags HTML e o seu conteúdo.

Para poder criar ou editar um documento HTML, o único recurso que você precisa é de um editor de texto, como o próprio bloco de notas. Porém, para o desenvolvimento recomenda-se utilizar editores especializados, como o Sublime Text, o Notepad++, o Visual Studio Code, entre outros. Portanto, verifique qual o editor de texto que mais se adapta ao seu gosto e utilize-o para criar seus códigos! Para fins de estudos e testes, recomendamos também o Code Pen, uma ferramenta completa para teste de códigos HTML, CSS e JavaScript diretamente do navegador.

Cada página consiste em uma série de tags (também chamados de elementos) que podem ser consideradas os blocos de construção das páginas. Portanto, esses blocos são a maneira com a qual o HTML faz a marcação dos conteúdos, criando a hierarquia e a estrutura do mesmo, dividido entre seções, parágrafos, cabeçalhos, e outros.

As tags do HTML

As tags são parte dos elementos do HTML. São usadas para informar ao navegador a estrutura do site. Ou seja: quando se escreve um código em HTML, as tags serão interpretadas pelo navegador, produzindo assim a estrutura e o conteúdo visual da página.

A principal característica das tags é estarem sempre dentro dos sinais de chevron (sinal de “maior que” e “menor que”), ou seja: < >.

As tags HTML são divididas em dois tipos: as que precisam de fechamento e as que não precisam de fechamento. As tags que precisam de fechamento possuem a sintaxe <tag> …</tag>, já as que não precisam de fechamento possuem como estrutura <tag/>.

Além disso, uma mesma tag pode receber um ou mais atributos, que possuirá um valor que modifica sua estrutura ou funcionalidade. Os atributos nada mais são que propriedades capazes de modificar e personalizar a funcionalidade de uma tag. Portanto, podemos utilizar diversos atributos, como largura, altura, dentre outros. Com a versão do HTML5, boa parte dos atributos referente a estilização deixaram de ser utilizados, passando a ser estilizado através do CSS.

Você pode estudar mais a respeito das principais tags do HTML neste nosso artigo sobre as tags HTML.

Estrutura básica de um documento HTML

A estrutura básica de um documento HTML, ou seja, de uma página da web, é realizada da seguinte forma:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

</body>
</html>

A partir desse código, podemos desenvolver toda a nossa página, estruturando como precisarmos. Mas primeiro, é bom compreender o que está sendo feito até o momento.

Explicando as tags essenciais

Tags importantes para o HTML básico

Atualmente, no HTML5, já é possível encontrar mais que 140 tags HTML. Porém, boa parte dessas não são muito utilizadas, e no dia a dia do desenvolvimento, geralmente encontraremos as mesmas tags sendo utilizadas. Vejamos abaixo uma tabela contendo as tags mais utilizadas e mais importantes para dominar o HTML básico.

Antes de prosseguir, recomendamos que leia todos os tópicos anteriores desse artigo. Também recomendamos que já tenha lido também os nossos artigos sobre tags HTML, o que é HTML e também sobre o HTML5.

Classes e IDs no HTML

As classes e os IDs são amplamente utilizados dentro dos elementos HTML. Eles definem um classe ou um ID único a uma ou mais tags HTML. Sua maior utilidade é para manipulação dos elementos, tanto através do CSS quanto de scripts. Portanto, entender como funcionam é uma das prioridades para se entender o básico do HTML.

Classes

Para atribuir uma ou mais classes ao elemento, basta incluir o atributo class=”…”.

Por exemplo, se temos diversos elementos de parágrafo, e queremos que os dois primeiros recebam a classe “blue” e os dois últimos a classe “red”, podemos fazer conforme o código abaixo:

<p class="blue">Paragrafo da classe blue</p>
<p class="blue">Paragrafo da classe blue</p>
<p class="red">Paragrafo da classe red</p>
<p class="red">Paragrafo da classe red</p>

Digamos também que queiramos que o primeiro elemento das classes acima receba também uma classe chamada “primeiro”. Para isto, basta acrescentar a classe “primeiro”, separada apenas com um espaçamento entre ela e as demais classes:

<p class="blue primeiro">Paragrafo da classe blue</p> 
<p class="blue">Paragrafo da classe blue</p> 
<p class="red primeiro">Paragrafo da classe red</p> 
<p class="red">Paragrafo da classe red</p>

Portanto, podemos incluir uma ou mais classes a qualquer elemento, e além disso, vários elementos podem receber uma mesma classe.

No CSS, JavaScript e outros, para poder reconhecer e selecionar uma classe, utilizamos um “.” e o nome da classe. Ou seja, nos casos acima, utilizaríamos “.blue“, “.red” e “.primeiro“.

IDs

Já os IDs são parecidos com as classes, porém eles são únicos. Só podem ser utilizados em um único elemento, portanto não podem ser repetidos. Para declarar o ID, basta chamar o atributo id=”…”. Portanto, digamos que o código tenha três <div> e desejamos que a primeira receba o ID do “primeira_div“, para isso basta usar o código abaixo:

<div id="primeira_div"></div>
<div></div>
<div></div>

Portanto, ao declarar a id “primeira_div” à primeira <div>,  nenhum outro elemento do HTML, mesmo que referente a outra tag, deverá receber este ID. Ele é único e exclusivo deste elemento.

Diferentemente das classes, um ID é reconhecido e selecionado no CSS, JavaScript e outros através do “#“. Ou seja, no exemplo acima, o id seria reconhecida no CSS por “#primeira_div“.

Um elemento pode receber mais que um ID, porém recomenda-se utilizar apenas um único ID em um mesmo elemento.

Mesclando classes e IDs

Apesar de terem utilidades parecidas, porém diferentes, as classes e os IDs são atributos que podem ser utilizados em conjunto. Um elemento que receba um ID também pode receber uma ou mais classes. Além disso, uma classe pode receber o mesmo nome que um ID, e vice-versa, sem que isso afete sua funcionalidade. Porém, para melhor organização, é recomendado evitar essa prática e manter os nomes sempre diferentes entre IDs e classes.

Vejamos então o exemplo abaixo:

<div id="primeira_div"></div>
<div class="divisao"></div>
<div id="terceira_div" class="divisao"></div>
<div id="quarta_div" class="quarta_div"></div>

Criando uma página com elementos do HTML básico

Neste momento, se você leu e acompanhou os tópicos anteriores, já pode dizer que compreende o básico do HTML. Porém, assim como qualquer linguagem de computação, seja de marcação ou programação, uma das coisas mais importantes a se fazer é praticar. Portanto, vamos agora colocar em prática nossos estudos.

Vamos criar uma página utilizando o básico do HTML passo a passo. Observe que não vamos utilizar o CSS e nem o JavaScript. Porém, com essa estrutura, a  página já estará pronta para depois receber uma estilização e interações, através do CSS e do JavaScript.

1º passo – criando uma página

Inicialmente, vamos criar um documento com a extensão .html. Vamos utilizar como exemplo o arquivo index.html. Posteriormente, vamos iniciar criando uma estrutura básica do HTML e incluindo um título. Observe que vamos incluir um atributo lang com o valor pt-br a tag <html>. Dessa forma, o navegador e os mecanismos de busca entenderão que o nosso documento HTML se trata de um documento no idioma português do Brasil (pt-br). Portanto, vejamos o código da página abaixo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Aprendendo o HTML Básico</title>
    <meta charset="utf-8">
</head>
<body>

</body>
</html>

2º passo – criando o cabeçalho

Agora que já criamos a estrutura básica, vamos criar a primeira divisão da página HTML. Inicialmente vamos criar um header básico no HTML, contendo apenas um título com uma descrição e um menu, em forma de lista não ordenada. Porém, por enquanto, vamos manter no menu a lista contendo apenas itens sem descrição. Ao finalizar nosso projeto, voltamos a mexer nessa parte.

Dessa forma, nosso código agora será:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Aprendendo o HTML Básico</title>
    <meta charset="utf-8">
</head>
<body>
    <header>
        <h1>Minha primeira página HTML</h1>
        <p>Aprendendo HTML Básico com exercicio prático</p>
        <br/>
        <nav>
            <p>Menu:</p>
            <ul>
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
            </ul>
        </nav>
    </header>
</body>
</html>

Portanto, nossa página já começa a ganhar vida. Se abrir o arquivo no navegador, já podemos visualizar a página como na imagem abaixo:

3º passo – criando a primeira seção com artigos

Agora que já criamos o cabeçalho, vamos continuar a formatação da página inserindo elementos de texto. Inicialmente vamos incluir uma divisão <main> pois conterá o conteúdo principal da página. Posteriormente vamos criar uma seção e dentro dela, vamos incluir dois artigos, sendo que um deles conterá também a imagem abaixo, que deverá ser salva na mesma pasta do documento HTML.:

Portanto, vamos acrescentar ao nosso código:

<main>
    <section id="secao_principal">
        <h2>Sobre o artigo HTML Básico</h2>
        <article>
            <h3>O que aprendi com o artigo HTML Básico</h3>
            <p>Inicialmente, aprendi sobre o Que é HTML</p>
            <p>Posteriormente aprendi como funciona o HTML e sua estrutura básica</p>
            <p>Posteriormente aprendi sobre as Tags do HTML</p>
            <p>Posteriormente aprendi sobre classes e IDs</p>
            <p>...</p>
            <img src="img_exemplo.jpg">
        </article>
        <article>
            <h3>O que estou aprendendo agora:</h3>
            <p>Agora estou fazendo exercicios práticos para criar uma página HTML!</p>
        </article>
    </section>
</main>

Agora nossa página já começa a ganhar uma complexidade maior. Vejamos na imagem abaixo como deve ficar a página com os exemplos do código:

4º passo – criando nossa segunda seção com iframes e uma tabela

Agora que já criamos o conteúdo principal, vamos criar uma segunda seção utilizando os recursos de iframes e também contendo uma tabela contendo as tags de título. Portanto, vejamos abaixo a continuação do nosso código:

<section id="secao_2">
    <div class="divisao">
        <h2>Onde aprender mais sobre HTML Básico</h2>
        <p>Para aprender mais sobre HTML Básico e outros conteúdos podemos acessar o blog da Homehost</p>
        <iframe width="400px" height="400px" src="https://www.homehost.com.br/blog/"></iframe>
        <p><a href="https://www.homehost.com.br/blog/">Site do blog da Home Host</a></p>
    </div>
    <br>
    <div>
        <h2>Minha primeira tabela</h2>
        <p>Minha tabela contendo as tags de título</p>
        <table>
            <tr>
                <th>tag</th>
                <th>descrição</th>
                <th>exemplo</th>
            </tr>
            <tr>
                <td>h1</td>
                <td>Título 1</td>
                <td><h1>exemplo</h1></td>
            </tr>
            <tr>
                <td>h2</td>
                <td>Título 2</td>
                <td><h2>exemplo</h2></td>
            </tr>
            <tr>
                <td>h3</td>
                <td>Título 3</td>
                <td><h3>exemplo</h3></td>
            </tr>
            <tr>
                <td>h4</td>
                <td>Título 4</td>
                <td><h4>exemplo</h4></td>
            </tr>
            <tr>
                <td>h5</td>
                <td>Título 5</td>
                <td><h5>exemplo</h5></td>
            </tr>
            <tr>
                <td>h6</td>
                <td>Título 6</td>
                <td><h6>exemplo</h6></td>
            </tr>
        </table>
    </div>
</section>

Dessa forma, esta seção da página ficará como no exemplo da imagem abaixo:

5º passo – criando a terceira seção com um formulário de “contato”

Anteriormente criamos sessões contendo textos, imagem e até mesmo iframe. Nesta seção, vamos atribuir um ID contato. Portanto, vamos incluir nela um formulário de contato.

Neste artigo, por se tratar de HTML básico, não vamos explicar muito a respeito de como enviar um formulário. Porém, posteriormente você pode aprofundar estas questões no nosso artigo sobre formulários HTML. Desta forma você estará apto a incluir formulários com envio para e-mail.

Vamos continuar com a página de HTML básico, criando agora a seguinte seção contendo formulário:

<section id="contato">
    <h2>Entre em contato</h2>
    <p>Preencha o formulário abaixo para poder entrar em contato!</p>
    <form method="POST">
        <div>
            <span>Nome:</span>
            <input type="text" name="nome">
        </div>
        <div>
            <span>Email:</span>
            <input type="email" name="email">
        </div>
        <div>
            <span>Mensagem:</span>
            <textarea></textarea>
        </div>
        <div>
            <input type="submit" value="enviar">
        </div>
    </form>
</section>

Com esse código, agora vamos verificar que ao abrir a página ela conterá um formulário ao final. O resultado será como na imagem de exemplo abaixo:

6º passo – criando o rodapé da página

Agora que já criamos toda a estrutura da página, vamos finalizar incluindo nela um rodapé. Este rodapé conterá apenas uma mensagem. Portanto, vejamos o código do nosso rodapé abaixo:

<footer>
    <p>Todos os direitos reservados</p>
</footer>

Com isso, logo abaixo do nossa seção contato, temos então o rodapé conforme a imagem abaixo:

7º passo – ajustes finais

Ao chegar até aqui, significa que já concluímos toda nossa página. Porém lembra-se que criamos em nosso cabeçalho um menu que modificaríamos depois?

Pois bem, você deve ter percebido que incluímos um ID a todas nossas sessões. Dessa forma, vamos agora modificar o menu, incluindo um link que ao ser clicado redirecione diretamente às sessões. Portanto, nosso cabeçalho da página HTML agora será como no código do exemplo abaixo:

<header>
        <h1>Minha primeira página HTML</h1>
        <p>Aprendendo HTML Básico com exercicio prático</p>
        <br/>
        <nav>
            <p>Menu:</p>
            <ul>
                <li><a href="#secao_principal">Sobre o artigo HTML Básicol</a></li>
                <li><a href="#secao_2">Onde aprender mais sobre HTML Básico</a></li>
                <li><a href="#contato">Entre em Contato</a></li>
            </ul>
        </nav>
    </header>

Portanto, o cabeçalho conterá agora um menu conforme o da imagem abaixo:

Observe que agora, ao clicar em qualquer um dos itens da lista, a página será direcionada diretamente para a posição dos IDs referenciados no link.

Finalizamos então a nossa página contendo elementos de HTML básico.

Dessa forma, você pode utilizar o código final para estudar e modificar. O mesmo se encontra no exemplo abaixo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Aprendendo o HTML Básico</title>
    <meta charset="utf-8">
</head>
<body>
    <header>
        <h1>Minha primeira página HTML</h1>
        <p>Aprendendo HTML Básico com exercicio prático</p>
        <br/>
        <nav>
            <p>Menu:</p>
            <ul>
                <li><a href="#secao_principal">Sobre o artigo HTML Básicol</a></li>
                <li><a href="#secao_2">Onde aprender mais sobre HTML Básico</a></li>
                <li><a href="#contato">Entre em Contato</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="secao_principal">
            <h2>Sobre o artigo HTML Básico</h2>
            <article>
                <h3>O que aprendi com o artigo HTML Básico</h3>
                <p>Inicialmente, aprendi sobre o Que é HTML</p>
                <p>Posteriormente aprendi como funciona o HTML e sua estrutura básica</p>
                <p>Posteriormente aprendi sobre as Tags do HTML</p>
                <p>Posteriormente aprendi sobre classes e IDs</p>
                <p>...</p>
                <img src="img_exemplo.jpg">
            </article>
            <article>
                <h3>O que estou aprendendo agora:</h3>
                <p>Agora estou fazendo exercicios práticos para criar uma página HTML!</p>
            </article>
        </section>
    </main>
    <br/>
    <br/>
    <section id="secao_2">
        <div class="divisao">
            <h2>Onde aprender mais sobre HTML Básico</h2>
            <p>Para aprender mais sobre HTML Básico e outros conteúdos podemos acessar o blog da Homehost</p>
            <iframe width="400px" height="400px" src="https://www.homehost.com.br/blog/"></iframe>
            <p><a href="https://www.homehost.com.br/blog/">Site do blog da Home Host</a></p>
        </div>
        <br>
        <div>
            <h2>Minha primeira tabela</h2>
            <p>Minha tabela contendo as tags de título</p>
            <table>
                <tr>
                    <th>tag</th>
                    <th>descrição</th>
                    <th>exemplo</th>
                </tr>
                <tr>
                    <td>h1</td>
                    <td>Título 1</td>
                    <td><h1>exemplo</h1></td>
                </tr>
                <tr>
                    <td>h2</td>
                    <td>Título 2</td>
                    <td><h2>exemplo</h2></td>
                </tr>
                <tr>
                    <td>h3</td>
                    <td>Título 3</td>
                    <td><h3>exemplo</h3></td>
                </tr>
                <tr>
                    <td>h4</td>
                    <td>Título 4</td>
                    <td><h4>exemplo</h4></td>
                </tr>
                <tr>
                    <td>h5</td>
                    <td>Título 5</td>
                    <td><h5>exemplo</h5></td>
                </tr>
                <tr>
                    <td>h6</td>
                    <td>Título 6</td>
                    <td><h6>exemplo</h6></td>
                </tr>
            </table>
        </div>
    </section>
    <section id="contato">
        <h2>Entre em contato</h2>
        <p>Preencha o formulário abaixo para poder entrar em contato!</p>
        <form method="get">
            <div>
                <span>Nome:</span>
                <input type="text" name="nome">
            </div>
            <div>
                <span>Email:</span>
                <input type="email" name="email">
            </div>
            <div>
                <span>Mensagem:</span>
                <textarea></textarea>
            </div>
            <div>
                <input type="submit" value="enviar">
            </div>
        </form>
    </section>

    <footer>
        <p>Todos os direitos reservados</p>
    </footer>

</body>
</html>

Dicas para avançar seus estudos em HTML básico e desenvolvimento web

Neste artigo, você já pode aprender bastante a respeito do HTML. Iniciamos com explicações teórica e, posteriormente, aliamos a exemplos práticos. Portanto, passamos por todo o conteúdo básico do HTML. Dessa forma, concluímos então este artigo deixando algumas recomendações de estudo, assim como dicas e sugestões.

Utilizando todo este artigo, você já estará apto a compreender bem um código HTML. Portanto, você também poderá dar inicio à criação de páginas HTML simples. A partir desse momento, recomendamos que se aperfeiçoe compreendendo mais sobre cada tag HTML. Também é recomendado que você pratique todos os códigos que estudou até agora.

Por isso, deixamos algumas sugestões de publicações do nosso blog que podem auxiliar:

• O que é HTML? Entenda de forma descomplicada
• HTML5: suas novidades e atualizações
• Comentários HTML: aprenda a comentar seu código
• As tags do HTML
• Doctype HTML
• Links HTML: saiba o que são e como utilizar no seu site
• Formulário HTML
• HTML checkbox
• Tabela HTML
• Tabela de cores HTML: aplicando cores nas tags HTML
• Espaço HTML
• Caracteres especiais do HTML
• Iframe HTML

Além dos artigos acima você ainda pode encontrar diversos outros artigos que podem auxiliar a avançar nos estudos sobre HTML. Portanto, também recomendamos os seguintes sites para avançar nos estudos sobre desenvolvimento web:

• W3C Schools
• Khan Academy
• Free Code Camp

Mas não deixe de ficar atento ao nosso blog. Sempre publicamos novos artigos com conteúdo atualizado e inovador! Também recomendamos que você adquira um nome de domínio e um plano de hospedagem, para poder praticar e colocar suas páginas online! A HomeHost oferece diversos planos de qualidade, segurança e velocidade!

Perguntas frequentes