Título bom pra SEO

> ## Content Index > Fetch the complete content index at: https://productoversee.com/llms.txt > Use this file to discover other available public pages before exploring further. # O que é HTML - URL: https://productoversee.com/blog/o-que-html-basico/ - Published: 2011-01-21T03:00:00.000Z - Updated: 2023-01-03T01:42:35.000Z - Description: O básico sobre HTML. - Author: Diego Eis - Tags: Desenvolvimento, #blog HTML é uma das linguagens que utilizamos para desenvolver websites. O acrônimo HTML vem do inglês e significa Hypertext Markup Language ou em português Linguagem de Marcação de Hipertexto. O HTML é a liguagem base da internet. Foi criada para ser de fácil entendimento por seres humanos e também por máquinas, como por exemplo o Google ou outros sistemas que percorrem a internet capturando informação. ### **Quem criou o HTML?** Tim Berners-Lee. Esse é o nome do homem que criou o HTML. Ele criou o HTML para a comunicação e disseminação de pesquisas entre ele e seu grupo de colegas. O HTML ficou bastante conhecido quando começou a ser utilizada para formar a rede pública daquela época, o que se tornaria mais tarde a internet que conhecemos hoje. ### **O que são as tags do HTML?** O HTML é uma linguagem baseada em marcação. Nós marcamos os elementos para mostrar quais informações a página exibe. Por exemplo, um título importante. Aquele título do artigo, da manchete do site, nós marcamos com uma tag/elemento chamado H1\. Veja um exemplo: Perceba que o texto está entre duas marcações. Essas marcações são chamadas de TAGS. As tags são abertas e depois fechadas. No exemplo acima abrimos a tag com e fechamos com . O que está dentro é o conteúdo mostrado para o usuário. O parágrafos são marcados com a tag P. Assim: Utilizando as tags, nós dizemos para o navegador o que é cada informação. O que é um título, o que é um parágrafo, o que é um botão, um formulário etc. Dizemos também o que é cada coisa para os sistemas de busca, como o Google. O Google, nesse caso, para exibir os resultados de busca, ele precisa saber o que é um parágrafo e o que é um título. Ele sabe disso através das tags. ### **A estrutura básica** Todo HTML começa do mesmo jeito. Não há segredos aqui. Você pode simplesmente copiar em algum lugar para usar esse código toda vez iniciar um novo HTML. A primeira linha se chamada DOCTYPE. O Doctype avisa aos browsers, robôs de busca, leitores de tela e outras coisas que tipo de documento e aquele que eles estao prestes a carregar. Existem outros códigos que podemos carregar, por exemplo XML. Por isso o Doctype avisa o browser para que ele saiba como se comportar ao ler o código. ```html Título bom pra SEO Onde o site vai... ``` Depois começamos com a Tag HTML. Isso quer dizer que todo o que estiver entre as tags é escrito em HTML. Veja bem, não importa se o HTML é escrito usando React, VUE ou qualquer outro framework front-end... O resultado do back-end e do framework front-end vai ser HTML. Na tag Head nós indicamos o título do documento e indicamos a tabela de caractéres que o browser deve usar para renderizar seu texto. Também não se preocupe com isso agora. A tag TITLE é muito importante. É com ela que você indica o título do documento. O Google e outros sistemas de busca utilizam essa tag para indicar em suas buscas o título da págin. Isso é muito importante para que você apareça bem nas buscas. Logo depois da tag de fechamento começamos a tag . Dentro deste elemento é que vamos escrever todo o código HTML do resto do site. ### **Criando seu primeiro HTML** Para criar seu HTML é muito simples. Primeiro, abra e crie um arquivo vazio, sem texto, com o nome **index.html**. Pode usar o Notepad (se estiver no windows) ou o TextEdit (se estiver no Mac). Perceba que a extensão do seu arquivo é **.html** e não **.txt** Feito isso, copie o código utilizado no exemplo acima e cole neste documento. Salve e abra no seu navegador. Voilá! Você fez seu primeiro arquivo HTML ### **Um pouco avançado: Desenvolvimento em Camadas** Um dos principais problemas no desenvolvimento para internet é a mistura dos diversos códigos. Nós não usamos apenas o HTML para fazer sites. Além do HTML, utilizamos ainda o CSS, que é uma linguagem para configurarmos o visual das páginas e o Javascript, que vai cuidar do comportamento da página, por exemplo, o que acontece quando o usuário clica em um botão. Ao separar o desenvolvimento em camadas no front-end, é possível utilizar linguagens específicas para cada camada, de modo a aproveitar as vantagens de cada uma delas. Algumas das linguagens mais comuns utilizadas são: 1. **Camada de informação**: nessa camada, é comum utilizar linguagens de programação como JavaScript para acessar e manipular os dados da aplicação. 2. **Camada de formatação**: nessa camada, é comum utilizar a linguagem de estilo CSS (Cascading Style Sheets) para controlar a apresentação dos dados para o usuário. A CSS permite que os desenvolvedores criem regras para estilizar elementos HTML de maneira consistente e organizada, de modo a garantir um layout consistente e agradável ao usuário. 3. **Camada de comportamento**: nessa camada, é comum utilizar a linguagem JavaScript para controlar a interação do usuário com a aplicação. A JavaScript permite que os desenvolvedores criem funcionalidades dinâmicas, como validações de formulário, carregamento assíncrono de conte Há também as linguagens chamadas Linguagens Server-Side, que são linguagens como PHP, Python, Ruby, ASP e etc. Essas linguagens fazem tudo funcionar. Elas fazem os cálculos nos servidores e dão a resposta para o navegador do usuário. Para que os códigos não se misturem, nós os separamos em diversas camadas. Para ficar mais fácil de entender, imagine que o HTML é sempre o esqueleto do site. É com ele que vamos fazer toda a estrutura de código, onde iremos dizer o que é um título, o que é um parágrafo, uma imagem e etc. O CSS será a parte externa do corpo. É o que deixará o esqueleto bonito. É com o CSS que iremos dar cor para o título, configurar o tamanho do texto, largura das colunas e etc. Dessa forma nós não misturamos o código HTML e o código CSS. Utilizamos a mesma ideia para separar os outros códigos citados acima. Este é o básico. É conceito puro, porque você precisa começar de algum lugar. 😉 Mais referências: - [Quer aprender HTML? Faça aulas particulares conosco.](https://tableless.com.br/servicos/aula-particular.php?ref=productoversee.com) - [Videos tutoriais sobre desenvolvimento web](https://campus.tableless.com.br/?utm%5Fsource=Tableless&utm%5Fmedium=linkOqueHTML&utm%5Fcampaign=linkCampusOnline) - [Um artigo muito completo no Wikipedia](https://pt.wikipedia.org/wiki/HTML?ref=productoversee.com) - [Sobre o desenvolvimento web em camadas.](https://wp.me/p1vY5N-kS?ref=productoversee.com) - [Áudio: Sobre marcação HTML](https://tableless.com.br/drops-2-a-palavra-marcacao-do-html/?ref=productoversee.com)