O que é HTML e qual sua funcionalidade?

O HTML é parte fundamental das normas da web, em conjunto com outras tecnologias como o CSS e o JavaScript. Já que essa linguagem é a base para a construção de páginas, é importante conhecê-la para criarmos o nosso próprio site na internet.

O que é HTML e qual sua funcionalidade?

    As páginas web (sejam sites, blogs ou landing pages) são ferramentas de divulgação de informação com as mais variadas finalidades: desde difundir conhecimento até gerar oportunidades de negócio. Seja qual for o intuito, todas elas têm em comum a linguagem com a qual são construídas: o HTML.

    Como veremos, não se trata de uma linguagem de programação e é bastante simples de entender. Continue a leitura e veja como construir uma página web é mais fácil do que parece!

    Confira os assuntos que vamos tratar neste post:

     

    O que é e para que serve o HTML?

    HTML é a sigla em inglês para Hypertext Markup Language, que traduzimos para o português como linguagem de marcação de hipertexto.

    Apesar dos nomes complicados, o HTML nada mais é que uma linguagem usada para criar páginas web por meio de marcadores (tags) e atributos, que definem como o conteúdo deve ser apresentado em um navegador web.

    Mas você deve estar se perguntando: o que é um hipertexto? Esse conceito faz referência a um texto com blocos interconectados contendo palavras, imagens, sons, tabelas e outros elementos. Além disso, eles podem ter caminhos que apontam para outros hipertextos, caminhos esses conhecidos como hiperligações, hyperlinks ou apenas links.

    A criação do HTML é atribuída a Tim Berners-Lee, o inventor da World Wide Web.

    A ideia era criar um ambiente em que cientistas pudessem divulgar suas pesquisas para que seus colegas pudessem consultá-las com facilidade. Berners-Lee acabou criando o HTML como linguagem padrão para elaborar esses documentos.

    Desde a sua implementação, no início dos anos 1990, o HTML passou por diversas melhorias e hoje é o alicerce de blogs, e-commercesredes sociais e todo o tipo de página acessível de um navegador web.

    Confira também estes conteúdos:
    Entenda o que é CSS e quais as suas funções na internet
    Captcha: saiba o que é e como colocá-lo no site do seu negócio
    Wireframe: quais os tipos e as principais ferramentas de criação
     

    Quais são os principais elementos do HTML?

    Agora que você já sabe o que é o HTML, vamos ver os principais marcadores que definem a função dos elementos que fazem parte da página.

    Mas antes precisamos lembrar que essas tags são identificadas com um sinal de menor que (<), seguido pelo nome da tag e um sinal de maior que (>). A maior parte das tags precisa ser fechada, o que representamos com uma barra (/) entre o sinal “<“ e o nome da tag.

    Tudo ficará mais claro com os exemplos a seguir.

    Parágrafo (<p>)

    A tag <p> deve ser aberta e fechada para definir um parágrafo.

    <p>Este é um parágrafo em HTML.</p>

    Cabeçalho (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)

    As heading tags, ou tags de cabeçalho, ajudam a criar uma hierarquia entre as partes do texto, separando-o em seções. O <h1> é o cabeçalho de maior relevância, seguido pelo <h2>, <h3> e assim sucessivamente até o <h6>, de menor importância.

    <h1>Título principal</h1>
    <p>Parágrafo de introdução.</p>
    <h2>1. Primeiro intertítulo</h2>
    <p>Parágrafo da primeira seção.</p>
    <p>Mais um parágrafo da primeira seção.</p>
    <h2>2. Segundo intertítulo</h2>
    <p>Parágrafo da segunda seção.</p>
    <p>Mais um parágrafo da segunda seção.</p>
    <h2>3. Terceiro intertítulo</h2>
    <p>Parágrafo da terceira seção.</p>
    <h3>3.1. Intertítulo dentro da terceira seção</h3>
    <p>Parágrafo da seção 3.1.</p>
    <h3>3.2. Mais um intertítulo dentro da terceira seção</h3>
    <p>Parágrafo da seção 3.2.</p>

    Imagem (<img>)

    A tag de imagem não precisa ser fechada, já que o seu conteúdo é definido na própria tag com o atributo “src”.

    <img src="https://rockcontent.com/br/wp-content/uploads/sites/2/2019/09/twitter-cards.png">

    Âncora (<a>)

    A tag de âncora define um link para outra página. O atributo “href” determina o destino desse link.

    <a href="https://rockcontent.com/br/blog/arquitetura-da-informacao/">Arquitetura da Informação</a>

    Lista ordenada (<ol>)

    Uma ordered list, ou lista ordenada, é exibida com elementos numerados. Cada elemento deve ser marcado com a tag <li> (list item).

    <ol>
    	<li>SEO</li>
    	<li>Links patrocinados</li>
    	<li>Redes sociais</li>
    </ol>

    Lista não ordenada (<ul>)

    A tag unordered list, ou lista não ordenada, mostra os elementos como bulletpoints.

    <ul>
    	<li>Automação de marketing</li>
    	<li>Geração de leads</li>
    	<li>E-mail marketing</li>
    </ul>

    Tabela (<table>)

    A tag de tabela exibe informações no formato de linhas e colunas. Dentro da tag <table>, usamos as tags <tr> para representar as linhas, <th> para representar os cabeçalhos e <td> para representar cada célula.

    <table>
    	<tr>
        	<th>Nome</th>
        	<th>Sobrenome</th>
      	</tr>
    	<tr>
      		<td>Jonah</td>
        	<td>Berger</td>
      	</tr>
      	<tr>
      		<td>Ann</td>
        	<td>Handley</td>
      	</tr>
      	<tr>
        	<td>Neil</td>
        	<td>Patel</td>
      	</tr>
    </table>

    Comentário (<!– –>)

    Usamos esta tag para escrever algum comentário que ajude no entendimento do código. Tudo que estiver escrito entre os marcadores <!– e –> não será mostrado ao usuário.

    <p>O HTML é fundamental para quem deseja criar um site na web.</p> <!-- Este é um parágrafo em HTML -->
     

    Como é a estrutura básica de um documento do tipo?

    Vimos diversos elementos, mas agora vamos saber como colocá-los dentro de um código HTML. Como qualquer padrão da web, é necessário seguir algumas regras para a construção desses códigos.

    Começamos com a declaração <!DOCTYPE html>, para informar ao navegador web que o documento em questão é um HMTL.

    Em seguida, abrimos a tag <html>, que precisaremos fechar no fim. Dentro dela, adicionamos <head>, que deverá conter os metadados (dados sobre dados) da página, como o título que vai aparecer na aba do navegador (<title>), chamadas para arquivos externos e outras meta tags cruciais para um trabalho de SEO.

    É importante incluir a tag <meta charset=”utf-8″> para que o navegador exiba corretamente certos caracteres que utilizamos em português, como acentos e cedilha.

    Por fim, abrimos a tag <body>, em que adicionamos a parte do documento HTML que contém os elementos visíveis para o usuário.

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Minha primeira página</title>
    	</head>
    	<body>
    		<h1>Minha primeira página</h1>
    		<p>Meu primeiro parágrafo!</p>
    	</body>
    </html>
     

    Como criar o seu primeiro código em HTML?

    Para criar um código HTML, você só precisa de um editor de texto simples (o Bloco de Notas, por exemplo) e de um navegador web (Chrome, Opera, Firefox, Safari, etc.) para visualizar como vai ficar a sua página. Desenvolvedores profissionais usam editores de código mais especializados, mas podemos seguir inicialmente com um editor simples.

    O primeiro passo é criar um novo arquivo e salvá-lo com a extensão .html. Para este tutorial, podemos dar o nome de index.html.

    Depois, cole o código que mostramos na seção anterior com a estrutura básica de um HTML e salve o arquivo.

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Minha primeira página</title>
    	</head>
    	<body>
    		<h1>Minha primeira página</h1>
    		<p>Meu primeiro parágrafo!</p>
    	</body>
    </html>

    Agora é só abrir o arquivo no seu browser preferido e pronto, você acabou de criar o seu primeiro código HTML!

     

    Qual é a relação entre HTML, CSS e JavaScript?

    Entendemos que o HTML é a estrutura de uma página web, mas como formatar o estilo de seus elementos? Para configurarmos fontes, cores, alinhamento, enfim, a forma como os componentes HTML serão apresentados, utilizamos o CSS, sigla para Cascading Style Sheets, ou folhas de estilo em cascata.

    Apesar de ser possível descrever os estilos dentro do próprio código HTML, é recomendável que o HTML faça uma chamada a um ou mais arquivos CSS individuais. Assim, o código fica mais organizado, já que isola a estrutura do estilo.

    O CSS se baseia em seletores e declarações com propriedades e valores. Ou seja, escolhemos os elementos HTML aos quais queremos aplicar os estilos e declaramos quais serão as propriedades desses componentes.

    Veja neste exemplo o seletor de parágrafo (p), com uma declaração que define a cor, a família da fonte e o tamanho da fonte.

    p {
    	color: white;
    	font-family: verdana;
    	font-size: 15px;
    }

    Existe ainda uma terceira camada para o desenvolvimento de páginas web, dedicada a criar comportamentos dinâmicos: o JavaScript. Essa, que de fato é uma linguagem de programação — não confundir com Java —, permite dar mais interatividade à página e melhorar a experiência do usuário.

    Com ele, conseguimos escolher o que acontece quando o visitante clica em determinada parte da página, aperta determinada tecla, rola a página e muito mais. As aplicações são inúmeras e dependem basicamente da criatividade de quem está desenvolvendo.

    Inclusive, o JavaScript é excelente para quem deseja aprender a programar, já que a sintaxe da linguagem é bastante fácil. Além disso, é possível fazer testes imediatos, visualizando o resultado do seu código diretamente no navegador web.

    Percebeu como o HTML é mais simples do que aparenta? Então continue os seus estudos, porque apesar da simplicidade, esse é um assunto riquíssimo, com muitas outras tags e atributos que não caberiam em um só post.

    Gostou do artigo? Então confira esta aplicação que pode ser útil para o seu dia a dia. Aprenda como criar a sua própria assinatura de e-mail em HTML!

    Compartilhe

    Inscreva-se em nosso blog

    Acesse, em primeira mão, nossos principais posts diretamente em seu email

    Quer receber mais conteúdos brilhantes como esse de graça?

    Inscreva-se para receber nossos conteúdos por email e participe da comunidade da Rock Content!

    Nosso site é otimizado para cada país em que operamos.

    Ir para site em Português ->