Não Publique um Post no Seu Blog sem Essas 9 Tags HTML

essential html tags

Ao administrar um blog, é absolutamente necessário compreender pelo menos o básico sobre HTML.

Caso não saiba, HTML é sigla para Hypertext Markup Language, que significa Linguagem de Marcação de Hipertexto. É uma linguagem de programação que dita como o seu navegador web deve ler uma página da internet.

Tags HTML são os recipientes destes diferentes tipos de elementos. Elas consistem de parênteses angulares com nome ou abreviação para cada código dentro inserido.

Elas costumam abrir com <> e fechar com </>.

Atualmente, o HTML encontra-se em sua quinta versão, o HTML5, sendo esta a versão mais utilizada na Internet.

O uso do HTML5 é mais comum na indústria dos negócios, o que não é surpresa.

pasted image 0 472

No entanto, também pode ser muito útil para pessoas que trabalham em blogs.

Caso você seja um novato na área, todos aqueles códigos embaralhados, símbolos e palavras com erros ortográficos podem confundir muito a sua cabeça.

No entanto, a boa notícia é que não é preciso ser um gênio ou saber de programação avançada para adicionar tags básicas no seu blog.

Na verdade, você pode utilizar tags HTML de forma eficaz sem compreender boa parte do código inserido.

Mas será necessário entender alguns termos e saber como usar algumas tags HTML básicas para aumentar a qualidade das suas postagens de blog e suas habilidades como blogueiro.

Neste artigo, irei debater sobre nove tags HTML que você deve utilizar na sua próxima postagem de blog.

Mas antes, veja porque é tão importante incluir tags HTML nas suas postagens de blog.

A necessidade de tags HTML no seu blog

A maioria dos grandes blogueiros sabe como escrever com HTML.

Por quê?

Isso os permite fazer o que quiserem (ou quase tudo) com seus conteúdos. Estas tags também podem lhe proporcionar este mesmo tipo de liberdade.

Digamos, por exemplo, que você queira centralizar, alinhar à direita ou alinhar à esquerda uma imagem na sua postagem, HTML é a resposta para isso.

Caso queira criar listas rapidamente, adicionar quebras de linha ou criar caixas de texto, HTML é exatamente o que você precisa.

Se você trocar o editor de texto do WordPress para visualização HTML ao invés de Visual, ele carregará muito mais rapidamente.

pasted image 0 463

Para isso, simplesmente clique no botão “Texto” ou “HTML” para trocar. Veja como fica a diferença:

pasted image 0 455

É muito mais rápido escrever em HTML porque suas mãos nunca deixam o teclado. Além disso, você tem completo controle da estrutura e design do seu conteúdo.

Além do mais, é possível escrever HTML em qualquer editor de texto, não é necessário fazer isso exclusivamente no WordPress.

Contudo, o WordPress restringe algumas tags HTML, então esteja ciente disso conforme você se especializa na programação.

O WordPress restringe algumas tags HTML

De todos os Sistemas de Gerenciando de Conteúdo (ou CMSs) na Internet, o WordPress é o mais popular.

Segundo um estudo da BuiltWith, 53% de todos os sites desenvolvidos em CMS utilizam WordPress.

pasted image 0 473

Quando você erra na hora de inserir os códigos na área de conteúdo da postagem no WordPress, ele irá converter o código para um texto simples com caracteres confusos, como esse:

&lt;bold&gt;word in bold&lt;/bold&gt;.

Ao observar estes caracteres, saiba que o WordPress encontrou um problema nos códigos inseridos.

Também é importante saber que o WordPress não permite todo tipo de tag HTML nas postagens de blog. Códigos como embed, frame, iframe, form, input, object e textarea não são permitidos.

Mas você pode adicionar botões ao editor de texto do WordPress através de um plugin como o AddQuicktag.

pasted image 0 475

Com esta ferramenta, é possível customizar suas próprias tags dessa forma:

pasted image 0 470

Quando estiver um pouco mais familiarizado com as tags HTML, este plugin irá fazer uma grande diferença.

Agora, vamos debater sobre as tags HTML essenciais para escrever postagens em blogs, começando com as listas.

1. Criando listas

Para criar listas, você pode utilizar as seguintes tags: <ul>, <ol> e <li>.

Veja como uma lista “desordenada” ou lista com marcadores se parece em formato HTML:

<ul><li>Feijões verdes</li>

<li>Batatas</li>

<li>Tomates</li>

<li>Frango</li></ul>

Isso acaba sendo exibido da seguinte maneira:

  • Feijões verdes
  • Batatas
  • Tomates
  • Frango

Uma lista ordenada é um pouco diferente. Ela é exibida da seguinte forma:

  1. Feijões verdes
  2. Batatas
  3. Tomates
  4. Frango

Para utilizar números ao invés de marcadores, troque as tags <ul> e </ul> por <ol> e </ol>. O resultado é uma lista enumerada que se parece mais ou menos assim:

pasted image 0 460

Tome cuidado, pois é muito fácil se distrair e errar alguma coisa ao inserir códigos. Se certifique de sempre fechar uma tag antes de abrir outra.

Além disso, também é possível criar linhas aninhadas dentro de um item da lista principal.

pasted image 0 451

Isso é muito útil para quando há a necessidade de listar mais de uma categoria de itens ou tópicos de uma vez só.

Imagens são uma parte vital de qualquer blog, mas será que você sabe como utilizar tags de imagens para personalizá-las?

2. Tags de imagem

Imagens deixam o seu blog mais atraente.

Tags de imagens não costumam ser escritas à mão, mas são úteis para personalizar o tamanho das imagens adicionadas em seus blogs.

Caso estejam utilizando WordPress, a maioria das pessoas usa o botão de “Adicionar Mídia”, ao invés de escrever o código da imagem.

pasted image 0 454

A tag <img> é o que define imagens em páginas HTML. Elas se parecem mais ou menos assim:

<img src=”https://neilpatel-qvjnwj7eutn3.netdna-ssl.com/wp-content/uploads/2015/11/neilad3.png” width=”350″ height=”350″ alt=””>

Esta é a tag HTML da seguinte imagem, que está inserida em uma das postagens do meu blog.

pasted image 0 458

Veja como se parece a tag da imagem se você inspecionar o código da página.

pasted image 0 452

O WordPress requer títulos para as imagens, mas não descrições alternativas. Eu recomendo adicionar texto alternativo nas imagens sempre que possível.

Textos alternativos elevam a descrição de uma imagem para o próximo nível, fazendo com que a sua imagem (e consequentemente a postagem do seu blog) apareçam mais facilmente nas páginas de resultados de busca.

Ao carregar e incorporar imagens nas suas postagens de blog, se certifique de adicionar texto alternativo, independente do CMS utilizado.

Se esquecer de adicionar textos alternativos na biblioteca de mídia, pode sempre adicionar posteriormente no editor de textos.

pasted image 0 456

Além disso, se uma imagem for muito pequena ou muito grande, é possível redimensioná-la no editor de textos.

Caso uma imagem tenha width=”400” e height=”700”, então simplesmente delete a altura e modifique a largura. A altura irá se ajustar de acordo com a largura inserida.

Em seguida, irei demonstrar como você pode adicionar links com tags HTML.

3. Links

Links aumentam seu ranking nas pesquisas, então é algo absolutamente necessário nas postagens dos seus blogs.

Em termos HTML, links frequentemente são chamados de âncoras.

Veja como se parece o código para um link:

<a href=”https://www.quicksprout.com/2017/01/06/8-techniques-that-helped-me-improve-my-writing-during-ten-years-of-blogging/” target=”_blank” rel=”noopener noreferrer”>Mais de 10 anos escrevendo diariamente</a>

O título no fim da tag é o que descreve ou nomeia o link, dessa forma:

pasted image 0 467

A tag “a href” é o que cria o hyperlink.

Você pode adicionar um link em uma única palavra, frase ou imagem.

Isso produz um link como esse: Como Escrever Melhor em Menos de 30 Dias. Este link então o direciona para uma outra página da internet.

pasted image 0 462

Nesse caso específico, o link irá direcioná-lo para um guia que eu escrevi para o ajudar a se tornar um melhor escritor de blogs em apenas um mês.

O texto âncora é a parte do link que é visível. Pode ser uma palavra, frase ou uma imagem.

Um link de texto irá ser mais ou menos assim: <a href=”http://linkdosite.com/” title=”Descrição do Link”>

Já um link de imagem será assim: <img src=”http://linkdosite.com/imagem.gif” alt=”Bola” /></a>

Você também pode adicionar algumas funcionalidades adicionais ao seu link. Digamos que você, por exemplo, queira que o seu link abra uma nova janela ou aba, então, ele será escrito da seguinte forma:

<a href=”http://www.linkdosite.com” target=”_blank” title=”Esse link abre em outra aba/janela”>”Descrição do Link”</a>

Se o seu link não funcionar, tenha certeza de que a URL inserida comece com “http://” e que você não tenha esquecido de adicionar aspas. Além disso, utilize as aspas retas, não as arredondadas.

pasted image 0 464

Linhas horizontais também são outro tipo de tag útil para quebras de texto.

4. Linhas horizontais

Uma linha horizontal cria uma linha reta na sua página para separar diferentes partes de conteúdo. Veja como ela se parece:

pasted image 0 457

Você pode utilizar a tag <hr /> para simbolizar mudanças no tópico debatido, para separar diferentes seções de conteúdo ou para demonstrar a maior importância de uma seção específica.

A linha costuma correr da parte esquerda para a direita da página e geralmente tem a cor cinza. É possível mudar a largura da linha ao adicionar um subcomando como esse:

<hr width=”40%”>

É uma tag comum de linha horizontal com uma porcentagem de largura adicionada, é possível configurar a largura para qualquer porcentagem desejada. “Hr” é sigla para “Horizontal Reference” ou referência horizontal.

Tenha em mente que estas linhas podem ser utilizadas em excesso facilmente. Somente as utilize se for realmente necessário. Quanto menos, melhor.

Citações em bloco são outras formas de formatar seu texto para melhorar a legibilidade.

5. Citações em bloco

Provavelmente alguma vez você já fez referência ou citou alguém em uma postagem de blog. Eu pelo menos já fiz isso.

É de conhecimento geral a importância de citar suas fontes ao realizar uma citação.

Citar alguém através de citações em bloco em HTML como essa pode causar um grande impacto:

pasted image 0 459

E para isso, é necessário apenas adicionar uma rápida tag <blockquote>.

Ela deve ficar mais ou menos assim:

<blockquote>”Sua citação aqui.” – A fonte</blockquote>

Veja como o código irá parecer:

pasted image 0 465

É possível adicionar um link para a citação em bloco ao combinar dois códigos.

Além de serem bem atraentes, as citações em bloco também aumentam sua credibilidade ao citar fontes.

Tags de título também são outro tipo de tag HTML que você precisa conhecer.

6. Títulos

Criar títulos impactantes pode dar muito trabalho.

No entanto, eles dividem as diferentes partes do seu texto para o leitor.

Eu os utilizo em todas as minhas postagens de blog. Eles me ajudam a estruturar artigos e mostra aos meus leitores onde procurar por certos tópicos.

Veja um exemplo de título de uma das postagens do meu blog, “Como Escrever Bem Um Texto e Aparecer entre os Top 10 do Google”.

pasted image 0 476

Existem seis tipos diferentes de tags de título que podem ser utilizados na maioria dos sites: <h1>, <h2>, <h3>, <h4>, <h5> e <h6>.

Conforme o número aumenta, os títulos diminuem. Por exemplo, um título h2 é maior do que um título h4.

No entanto, dependendo do tema de WordPress que você utilizar, os títulos podem se diferenciar.

Normalmente, você utilizaria um título no tamanho do h1 para o título da sua postagem de blog. Subtítulos costumam ser do tamanho h2, enquanto subtítulos dos subtítulos h2 costumam ser do tamanho h3 ou menores.

pasted image 0 453

Esteja atento quando utilizar a tag de títulos e sempre procure manter seu estilo consistente.

Por exemplo, se decidir que seus títulos irão usar tags h2, não escreva postagens aleatórias no blog com títulos h3.

Além disso, nunca coloque links em títulos. Eles podem se perder facilmente. Se certifique de inserir links somente em frases ao invés de títulos ou subtítulos.

Agora, vamos debater um pouco sobre tags importantes de formatação.

7. Formatação de fontes

Deixar seus textos em negrito, itálicos ou sublinhados é uma maneira fácil de enfatizar frases ou palavras.

pasted image 0 466

As tags originais para textos em negrito ou itálico eram <b> e <i>, mas o movimento da Web Semântica posteriormente tornou mais comum utilizar as tags <strong> e <em>.

Para tornar o seu texto negrito, escreva o código <strong>”Seu texto aqui”</strong>.

Já textos em itálico ficam mais ou menos assim: “Textos em itálico dão <em>grande ênfase</em> em certas palavras”.

Porém, eu não recomendo usar negrito e itálico ao mesmo tempo.

Você também pode sublinhar seus textos dessa forma, com a tag <u>. Isso pode adicionar ênfase e urgência da mesma forma que textos em negrito ou itálicos.

pasted image 0 474

No entanto, é bem fácil para os leitores confundirem textos sublinhados com hyperlinks, então tenha cuidado ao utilizá-los.

Agora, caso ainda não esteja usando tags de quebra de linha, saiba que isso pode melhorar muito a legibilidade do seu blog. Veja como.

8. Quebras de linha

As quebras de linha criam um espaço entre certas linhas de texto, dessa forma:

pasted image 0 471

É possível adicioná-las com a tag <br/>. Estas tags se fecham sozinhas, sendo bem comum serem utilizadas por escritores para poesia, escrever receitas ou inserir endereços.

Veja como um código de quebra de linha se parece:

“Isto é uma <br>

quebra de linha.”

Quebras de linha também podem melhorar a legibilidade das suas postagens de blog.

pasted image 0 469

Que grupos de texto você preferiu ler? Provavelmente o primeiro, não é?

Isso acontece por causa do espaço branco extra, então utilize-o como vantagem!

Muitas pessoas pensam que espaço branco é algo ruim, mas na verdade ele guia as pessoas para a próxima linha de texto, facilitando a leitura.

Alinhar elementos é outra forma simples de manter suas postagens de blog consistentes.

9. Alinhando elementos

Nada é mais frustrante do que tentar alinhas uma imagem e não conseguir.

Ao alinhar os objetos de maneira sincronizada, seu conteúdo irá parecer muito mais organizado e sofisticado.

Eu gosto de centralizar certas imagens em minhas postagens de blog, desse jeito:

pasted image 0 468

Para especificar um determinado alinhamento, basicamente adicione a tag <p align=”center”> antes da imagem ou linha de texto que deseja alinhar, e então feche com </p> logo depois.

pasted image 0 461

O mesmo princípio se aplica para alinhar textos ou objetos à direita ou esquerda.

Lembre-se desta tag sempre que estiver tendo dificuldades para alinhar uma imagem ou linha de texto. Ela é bem fácil e rápida de inserir no corpo da sua postagem de blog.

Conclusão

Caso esteja administrando qualquer tipo de blog ou esteja planejando em começar um, não pode sempre depender dos sistemas de gerenciamento de conteúdo para personalizar seu conteúdo exatamente da forma que deseja.

Você estará poupando muito tempo ao usar estas tags HTML básicas. O HTML5 é bastante popular, mas não é necessário ser um gênio da programação ou um desenvolver web profissional para utilizá-lo.

E saiba que, no WordPress, o editor de texto irá carregar muito mais rapidamente caso esteja trabalhando com a versão HTML ao invés da Visual.

Além disso, se você sabe como adicionar manualmente as tags HTML, suas mãos nunca precisarão deixar o teclado. Isso faz uma grande diferença quando se está muito ocupado.

Utilize também as tags <ul>, <ol> e <li> tags para criar listas com diferentes itens. É possível criar listas enumeradas ou com marcadores.

Além do mais, use as tags <img> de imagem para inserir fotografias. É possível ajustar a altura e largura delas para combinarem com a sua página.

E não se esqueça das tags de link, também conhecidas como tags href, que servem para inserir links no corpo das suas postagens de blog. Elas permitem que você inclua links para outros conteúdos, sendo algo necessário para aumentar sua visibilidade online.

Também é possível inserir linhas horizontais com a tag <hr />, mas lembre-se: não as utilize em excesso.

Não somente, formate suas fontes em negrito, itálico ou sublinhadas através das tags <strong>, <em> e <u>. Tente usá-las uma de cada vez para manter o corpo do seu texto com uma aparência profissional.

E em suas postagens, também inclua quebras de linha ao incluir a tag <br/>, isso irá aumentar a legibilidade do seu blog.

E, por fim, alinhe seus elementos para serem exibidos à esquerda, centro ou direita das suas páginas com a tag <p align=”left, center ou right”>.

Com estas tags suas postagens poderão ser elevadas ao próximo nível, além de pouparem muito do seu tempo.

Quais tags HTML você mais utiliza em suas postagens do blog?

Compartilhe