28fev
guia sobre o que é html e como usar comandos html

O Que é HTML? Guia de Comandos HTML para Iniciantes

Por: Andrei L. fevereiro 28, 2019

HTML é a sigla para Hypertext Markup Language que, em português, significa algo como Linguagem de Marcação de Hipertexto.

Ela permite criar páginas estáticas com elementos básicos como parágrafos, cabeçalhos, links, trechos de citação e conteúdos multimídia.

Ao contrário do que se costuma pensar, o HTML não é uma linguagem de programação. Isso significa que não é possível desenvolver páginas com recursos dinâmicos. Em vez disso, ela permite organizar e formatar apenas documentos em texto.

Um exemplo de estrutura básica HTML de códigos (atributos e tags) para criar parágrafos entre duas frases é usar a marcação <p> e fechá-la com </p>.

O código fica assim:

<p>É assim que você faz um parágrafo em HTML.</p>
<p>Você pode ter quantos quiser!</p>

Uma coisa é certa: a linguagem HTML é bastante direta e acessível de aprender a usar. Sendo assim, programadores e desenvolvedores iniciantes conseguem criar sites sem passar por grandes dificuldades.

Como Funciona a Linguagem HTML?

Páginas na internet construídas com a linguagem HTML nada mais são do que documentos publicados em formatos .html ou .htm.

Como todos os navegadores são compatíveis com esses tipos de extensão, o usuário não encontra problemas para visualizar os conteúdos delas.

Mas, independente do formato, cada página HTML é construída sobre com uma série de códigos HTML. São as chamados Tags HTML, que informam aos navegadores qual tipo de informação ou conteúdo está posicionada em cada trecho de texto.

E, cada tag inserida cria uma de hierarquia em relação a outra, dividindo as seções da informação mais importante para a menos. Resumidamente, as Tags HTML usadas para compor páginas estáticas da internet seguem o seguinte padrão:

  • <tag>
    É a abertura do código (a sintaxe da linguagem) para você inserir qualquer conteúdo estático.
  • </tag>
    É o fechamento do código que ativa o funcionamento do conteúdo já adicionado.

Vamos ver um exemplo abaixo da aplicação desta regra de sintaxe de linguagem HTML:

<div>
  <h1>É o cabeçalho principal</h1> 
  <h2>É o subtítulo do assunto que se relacionam com o cabeçalho</h2>
  <p>É o primeiro parágrafo</p> 
  <img src="/" alt="Aqui vai a descrição da imagem"> 
  <p>Segundo parágrafo com um <a href="https://example.com">hyperlink</a></p>
</div>

Acima, podemos ver que as seguinte tags foram usadas:

  • <div></div>
    Demarca as seções dentro de um conteúdo ou bloco de texto.
  • <h1></h1>
    É o cabeçalho principal. Geralmente, é o título de um texto ou a principal frase de uma página).
  • <h2></h2>
    É o segundo cabeçalho dentro da hierarquia de cabeçalhos. Costuma ser o subtítulo que intercalam conteúdos em um texto ou página. Também pode conter h3, h4, h5 e h6.
  • <p></p>
    Define quando um parágrafo deve aparecer.
  • <img>
    A tag de imagem é dividida em dois atributos: src (caminho da imagem) e alt (descrição da imagem).

Conheça as Tags HTML Mais Usadas

Existem dois tipos mais usados de Tags HTML. São eles:

  • Elementos de Bloco
    Preenchem todo o espaço disponível para inserir texto e automaticamente fazem uma quebra de linha. São os parágrafos e os cabeçalhos.
  • Elementos de Linha
    Preenchem apenas o espaço necessário para inserir texto e não fazem uma quebra de linha. São usadas para formatar os elementos dentro de um elemento de bloco. Como exemplo, são os links.

HTML Tags de Elementos de Bloco

Cada documento em HTML sempre tem três tags HTML de elementos de bloco obrigatórias:

  • <html>
    Possui o maior nível hierárquico de uma página HTML e está presente em todas elas.
  • <head>
    Carrega os metadados, como o título interno de páginas e charset (codificação do documento).
  • <body>
    Agrupa todos os elementos mostrados em uma página estática.
<html>
<head>
  <!-- Aqui vão os metadados -->
</head>
<body>
  <!-- Aqui está o conteúdo da página -->
</body>
</html>

Além destas, também existem outras tags HTML que quase sempre aparecem numa página estática.

  • <blockquote>
    Elementos para adicionar citações em recuos ou outro tipo de destaque na página.
  • <li>
    Permite inserir listas em um bloco de texto na página.
  • <ol>
    Adiciona uma lista ordenada e organizada com numeração crescente no texto.
  • <ul>
    Adiciona uma lista desordenada, sem uma numeração sequencial. Geralmente, aparece em forma de pontos, como o estilo que estamos usando neste momento.
<ul>
  <li>Item 1 da lista desordenada</li>
  <li>Item 2 da lista desordenada</li>
</ul>

HTML Tags de Elementos de Linha

As Tags HTML de elementos de linha são usadas para editar e formatar o texto das páginas.

Por exemplo, quando você quiser deixar alguma palavra em negrito, você deve posicionar essa mesma palavras entre as tags <strong></strong>.

Agora, digamos que você queira usar termos estrangeiros no seu texto. Geralmente, eles são formatadas em itálico. Você pode fazer isso colocando essas palavras entre as tags <i></i>.

Considere agora que queira posicionar um hiperlink estratégico no seu texto. As tags (com atributo href) que você pode usar para fazer isso são <a href></a>. Veja o exemplo abaixo.

<a href="https://exemplo.com.br/">Texto âncora</a>

As imagens também são tags HTML de elementos de linha. Para adicioná-las a uma página, use a tag (com atributos src e alt) para usar é <img>. Veja o exemplo abaixo.

<img src="/imagens/exemplo.jpg" alt="descrição breve da imagem">

HTML e HTML5: Quais as Diferenças Entre as Versões?

A linguagem HTML passou por uma série de evoluções até à forma como a conhecemos hoje. A responsável por disponibilizar melhorias e atualizações periódicas é a W3C (World Wide Web Consortium).

Para ter uma ideia, o HTML4 (mais conhecido apenas como HTML), foi lançado em 1999. A versão mais recente é a HTML5, lançada em 2014. Ou seja, há 5 anos e, ainda assim, trouxe uma série de novidades à linguagem.

Uma das mais marcantes é a possibilidade de incorporar áudios e vídeos de forma nativa em qualquer página da internet. E isso sem precisar usar aplicações externas, como o Flash Player. Para fazer isso, basta usar as tags <audio></audio> e <video></video>.

O HTML5 também trouxe melhorias na semântica na forma em como é escrita. Por exemplo, as próprias tags agora informam aos navegadores qual o significado do tipo do conteúdo adicionado em uma página.

Algumas das tags semânticas mais populares no HTML5 são:

  • <article></article>
    Permite inserir e posicionar um texto completo em uma página estática da internet.
  • <section></section>
    Permite organizar os textos já inseridos em categorias e dividi-los por assuntos, temas ou palavras-chaves.
  • <aside></aside>
    Permite colocar conteúdos extras ao redor do conteúdo principal da página de referência.
  • <header></header>
    Também chamado de Cabeçalho, permite definir quais serão os títulos e subtítulos de destaque em um texto ou uma página.
  • <footer></footer>
    Permite adicionar informações nos rodapés de conteúdos, textos ou páginas.

Vantagens e Desvantagens do HTML

Como a maioria dos serviços, produtos ou funcionalidades, o HTML também tem vantagens e desvantagens. Confira abaixo algumas delas, tendo em mente que saber essas características é uma maneira conhecer com que tipo de tecnologia você vai trabalhar.

Vantagens

  • É uma linguagem com uma quantidade gigantesca de recursos e tem uma comunidade bastante engajada.
  • É executada nativamente em qualquer navegador de internet.
  • É de código aberto e grátis (não precisa pagar para desenvolver qualquer operação).
  • Possui uma curva de aprendizado relativamente baixa, ideal para programadores e desenvolvedores iniciantes.
  • Pode ser integrada com outras linguagens, como o PHP.

Desvantagens

  • É usado apenas com páginas estáticas de internet e, se o usuário quiser funcionalidades dinâmicas, vai precisar saber sobre outras linguagens, como PHP ou JavaScript.
  • Não permite que o usuário use lógica em sintaxes; por isso, todas as páginas precisam ser criadas separadamente, mesmo que tenham elementos idênticos.
  • É possível que os navegadores não rodem todas as funcionalidades com desempenho constante, o que pode gerar atrasos e frustrações nos usuários.

Como HTML se relaciona com CSS e JavaScript?

O HTML é uma linguagem bastante acessível e poderosa. Só que ela permite apenas conteúdos estáticos de texto. E isso não é exatamente recomendado para chamar a atenção na internet.

É por isso que, junto com HTML, desenvolvedores costumam usar outras linguagens, como CSS e JavaScript, para entregar páginas dinâmicas, interativas e ricas à experiência do usuário.

Resumidamente, o CSS e o JavaScript funcionam assim:

  • CSS
    Responde pelo estilo das páginas, o que inclui o fundo, as cores, o design geral, o tipo de fonte usada e o espaçamento entre elementos e as animações.
  • JavaScript
    É o que comanda as partes dinâmicas de movimento em uma página, como transições, slides, pop-ups e galeria de imagens interativas.

Para sacar melhor como todas essas linguagens trabalham juntas, pense no HTML como a estrutura óssea de uma pessoa. Já o CSS é o estilo das roupas. E o JavaScript permite toda a movimentação do corpo (membros, tronco e cabeça).

Resumo – O Que é HTML?

HTML é a principal linguagem de marcação de texto na internet. Ela é usada para criar aplicações e uma estrutura de conteúdos estáticos em qualquer site, podendo ser executada em todos os navegadores e com um desempenho constante.

O HTML também pode ser integrado com linguagens como CSS, PHP e JavaScript, entregando funcionalidades de estilo e em movimento que melhoram a experiência do usuário. É aqui que você pode criar sites dinâmicos incríveis.

E, se você quer se tornar um desenvolvedor, começar pelo HTML é recomendado em virtude da sua acessibilidade no aprendizado. Depois, basta continuar na jornada e partir para outras linguagens.

Trackback URL: https://www.weblink.com.br/blog/o-que-e-html/trackback/

2 Comentários:

  • Obrigada Andrei. Você fez um resumo muito bom para quem está começando. Gostei bastante. Gratidão.

Deixar resposta:

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *