7 etiquetas HTML que precisa de conhecer como escritor ou bloguista online

Key Takeaways

O HTML desempenha um papel crucial na disseminação de conteúdo escrito na Internet, uma vez que as páginas Web dependem das suas capacidades para apresentar informações de forma apelativa e organizá-las para uma indexação óptima pelos motores de busca.

Para exercer um controlo total sobre a apresentação e o aspeto estético do trabalho escrito, é essencial que os autores estejam familiarizados com os elementos HTML fundamentais, como as etiquetas de título, as etiquetas de texto em negrito e itálico e as etiquetas de parágrafo.

As listas, os marcadores e as etiquetas de imagem podem ser utilizados para melhorar a organização e o aspeto estético dos artigos, enquanto as hiperligações fornecem contexto adicional e melhoram a classificação nos motores de busca.

É um equívoco comum entre alguns autores, incluindo aqueles especializados em cobertura de tecnologia, que a proficiência em conhecimento de HTML é desnecessária. No entanto, para conteúdos que se destinam a publicação na Internet, o conhecimento de HTML torna-se cada vez mais relevante e essencial do que inicialmente se pensa.

Os sítios utilizam HTML como meio de apresentação de conteúdos. Embora vários editores de marcação, criadores de sítios e plataformas de gestão de conteúdos permitam a edição visual de artigos, é importante notar que o código HTML continua subjacente a este processo.

Para ter um controlo total sobre o aspeto do conteúdo e fazer ajustes precisos à sua apresentação, é essencial conhecer os elementos HTML fundamentais. Estes elementos exercem uma influência considerável sobre o aspeto de uma página Web ou de um sítio Web em termos de disposição, estilo e organização. Conhecer a sua utilização permite aos utilizadores moldar eficazmente o seu conteúdo digital de acordo com preferências e requisitos específicos.

Etiquetas de cabeçalho

As etiquetas de cabeçalho permitem resumir um determinado segmento ou subsegmento de um artigo. Normalmente, os navegadores da Web apresentam as etiquetas de cabeçalho num tipo de letra maior e mais forte, tornando-as assim mais visíveis do que o texto circundante.

Para além de transmitirem informações visuais através dos cabeçalhos, conferem um sentido de organização e classificação ao conteúdo, facilitando assim a compreensão por parte dos algoritmos de rastreio da Web relativamente à disposição da página Web.

São utilizadas seis etiquetas de título numeradas, em que os números mais significativos correspondem a títulos de classificação inferior. Recomenda-se a utilização da etiqueta para o título principal de uma página web, enquanto as etiquetas devem ser utilizadas para as secções e as etiquetas para as subsecções.

Considerando a natureza do seu conteúdo e o público-alvo, é prudente empregar uma estrutura organizacional adequada. Embora as etiquetas e possam ser adequadas para materiais complexos ou orientados para a legislação, a sua legibilidade pode colocar desafios a um público geral.

Os títulos desempenham um papel essencial na divisão de artigos longos em segmentos mais fáceis de gerir, tornando-os mais fáceis de consumir para leitores que possam considerar intimidantes as paredes de texto. Ao contrário dos leitores passivos, que podem passar ao lado de conteúdos pouco atraentes, os títulos proporcionam uma sensação de estrutura que incentiva o envolvimento ativo com o material. Com os seus breves interlúdios entre tópicos, permitem aos escritores e aos leitores recuperar o fôlego e reagrupar-se antes de voltar a mergulhar na discussão em causa.

Certifique-se de que conclui cada elemento de título com uma etiqueta de fecho adequada, como .

Negrito, itálico e outras formatações de texto

As etiquetas de título desempenham um papel essencial na arquitetura geral de uma página Web, enquanto as etiquetas de formatação mais específicas são concebidas para tratar de pormenores minuciosos do texto. Por exemplo, quando se procura acentuar um determinado segmento de uma frase, estas etiquetas oferecem um meio de alterar o aspeto do texto sem afetar o seu significado hierárquico.

⭐ para texto a negrito .

⭐ para texto em itálico.

⭐ para texto riscado.

As ferramentas de Markdown e de gestão de conteúdos replicam frequentemente a formatação quando transferem texto de aplicações alternativas. Para aperfeiçoar esta informação, erradique estes códigos da fonte original ou retire a formatação ao inserir dados para evitar estes problemas durante o processo inicial.

Parágrafos e espaçamento

Para além de utilizar títulos para organizar o conteúdo em segmentos distintos, é possível utilizar os elementos e para delinear parágrafos ou criar interrupções de linha, respetivamente.

Várias ferramentas de edição visual incorporam estes marcadores automaticamente ao escrever, por exemplo, ao premir a tecla Enter. No entanto, é possível que os utilizadores que compõem o seu conteúdo num editor baseado em texto incluam estes atributos diretamente no seu código HTML.

Quando se compõe texto que requer uma separação visual entre linhas sem necessidade de iniciar um novo parágrafo, a utilização da etiqueta HTML de fecho automático é uma escolha apropriada. Isto é particularmente relevante na elaboração de poesia ou de outras obras literárias em que as ideias fluem sem problemas de uma linha para outra e não justificam a criação de parágrafos distintos. Nesses casos, a utilização da etiqueta permite uma transição suave, mantendo a divisão espacial desejada.

A etiqueta `

` é um elemento HTML que não possui uma contraparte de fecho correspondente e deve, portanto, ser utilizada independentemente. Este atributo pode ser atribuído ao facto de não conter nem influenciar qualquer conteúdo ou descrição.

A utilização destes marcadores permite o cumprimento de directrizes estabelecidas relativas à qualidade estética do conteúdo escrito e digital, aumentando assim a credibilidade das páginas Web, tanto para os visitantes humanos como para os algoritmos dos motores de busca.

Números e marcadores

As listas são um meio eficaz de organizar a informação quando se apresentam vários itens em sucessão. Ao delinear um conjunto de componentes individuais, como os ingredientes de uma receita ou instruções sequenciais, a utilização de listas assegura uma organização coerente.

O elemento é utilizado para criar uma lista ordenada ou numerada, enquanto a etiqueta representa uma lista não ordenada que contém itens com marcadores. A etiqueta é utilizada para definir elementos individuais em qualquer tipo de lista.

Eis um exemplo do aspeto de uma lista ordenada constituída por cinco elementos em formato HTML:cssPrimeiro itemSegundo itemTerceiro itemQuarto itemQuinto item

 <ol>
     <li>alpha</li>
     <li>bravo</li>
     <li>charlie</li>
     <li>delta</li>
     <li>echo</li>
</ol>

A marcação acima mencionada, quando processada por um navegador Web, aparece num formato semelhante à seguinte estrutura:

Se preferir utilizar uma lista enumerada, substitua-a por para obter um inventário com marcadores.

O código HTML fornecido demonstra como organizar o conteúdo usando listas aninhadas. A lista mais externa é definida pela etiqueta com um identificador “my-list”. Dentro da lista exterior, existem duas listas interiores criadas com as etiquetas e, aninhadas nelas, existem outros itens de lista representados pelos elementos , seguidos da respectiva descrição de texto envolvida em etiquetas . Esta estrutura permite a apresentação organizada de dados de vários níveis num formato facilmente digerível.

A tarefa requer que forneça uma versão mais refinada e eloquente do texto dado, utilizando uma linguagem e um tom adequados, que transmita o mesmo significado, mantendo um estilo formal.

 <ol>
  <li>alpha</li>
  <li>
    bravo
    <ol>
      <li>Hip</li>
      <li>Hip</li>
      <li>Hooray</li>
    </ol>
  </li>
  <li>charlie</li>
  <li>
    delta
    <ul>
      <li>Difference</li>
      <li>River mouth</li>
    </ul>
  </li>
  <li>echo</li>
</ol> 

Pode utilizar estruturas de listas aninhadas, englobando uma variedade de formatos de listas, para ilustrar hierarquias mais complexas e melhorar a compreensão do leitor relativamente ao tema em questão.

Construir uma tabela

Quando se lida com grandes quantidades de dados inter-relacionados, a utilização de tabelas pode ser um meio eficaz de organização.

Para criar uma tabela HTML, comece com o elemento . Ele deve conter todas as informações que você pretende exibir na tabela. Utilize o elemento para definir cada linha da tabela e empregue o elemento para indicar células individuais dentro de cada linha. Se desejar indicar um cabeçalho de tabela, pode substituir o elemento pelo elemento , que indica “cabeçalho de tabela”. Lembre-se de fornecer elementos de fechamento correspondentes para sua tabela, linhas e células.

 <table>
     <tr>
          <th>Group 1</th>
          <th>Group 2</th>
     </tr>
     <tr>
          <td>Mark</td>
          <td>Belle</td>
     </tr>
     <tr>
          <td>Ralph</td>
          <td>Shane</td>
     </tr>
     <tr>
          <td>John</td>
          <td>Josie</td>
     </tr>
</table>

Em sua forma renderizada em um ambiente de navegação na Web, a tabela deve aparecer da seguinte forma:

Ao utilizar HTML para construir uma tabela, é importante notar que o processo ocorre linha a linha e não coluna a coluna. No entanto, é possível utilizar técnicas de CSS contemporâneas para dar à tabela vários elementos estilísticos, tais como delineações de margens, iterações de linhas coloridas e outros embelezamentos.

Adicionar imagens

A incorporação de elementos visuais numa página Web apresenta desafios únicos em comparação com a formatação de conteúdo textual. Normalmente, as imagens não são transmitidas por via linguística, sendo necessário armazená-las em ficheiros individuais. Consequentemente, deve ser estabelecido um método para identificar a localização destes ficheiros em conjunto com uma etiqueta HTML correspondente.

A utilização do elemento permite a incorporação de imagens visuais num documento; contudo, é necessário utilizar uma funcionalidade HTML conhecida como “atributos” para designar a localização do ficheiro de imagem que o acompanha. Estes atributos são anexados ao identificador da etiqueta e precedem a chave angular final. Cada atributo possui um nome e um valor correspondente, que estão ligados por meio de um sinal de igual. É aconselhável colocar os valores dos atributos entre aspas duplas.

Eis um exemplo:

 <img alt="tree leaves and branches"
    src="https://images.unsplash.com/photo-1532365673558-f9bb768644e7"> 

O atributo “src”, que significa a fonte, especifica o URL da imagem a incorporar. Este pode ser um URL relacional ou absoluto, consoante se trate de uma imagem externa ou resida no mesmo servidor.

O atributo “alt” significa o “texto alternativo”, que serve para fornecer uma descrição do conteúdo representado numa imagem. Recomenda-se geralmente a incorporação deste atributo, uma vez que tem valor tanto para os utilizadores de leitores de ecrã como para os algoritmos dos motores de busca. Independentemente do facto de o visualizador ser humano ou automatizado, aqueles que não conseguem perceber a imagem original por qualquer motivo podem obter informações sobre o seu conteúdo através do fornecimento de texto alternativo.

Os browsers incorporam a imagem especificada pelo URL de origem fornecido no atributo ‘src’, integrando-a sem problemas na página web da seguinte forma:

Nos casos em que o URL de origem fornecido não constitui uma imagem legítima ou não se materializa completamente, os navegadores Web modernos apresentam geralmente uma representação visualmente nula acompanhada de uma descrição alternativa incluída no atributo alt correspondente.

Adicionar hiperligações através de HTML

De facto, uma caraterística marcante do HTML é a hiperligação, que permite aos utilizadores navegar entre diferentes páginas Web do seu próprio sítio Web ou mesmo de fontes externas. Estas hiperligações não só facilitam o acesso, como também conferem relevância e autoridade adicionais ao conteúdo apresentado, aumentando assim a sua visibilidade e classificação nos resultados dos motores de busca.

Para incorporar uma hiperligação, utilize o elemento HTML acompanhado do atributo “href”, que inclui o URL destinado ao destino da hiperligação. Dentro das etiquetas e dos seus correspondentes , o texto encapsulado ou o conteúdo adicional tornar-se-á clicável, permitindo assim que os leitores naveguem para uma página web diferente clicando nele.

Aqui está uma demonstração de como criar uma hiperligação utilizando HTML:phpLink TextEste código irá gerar uma hiperligação clicável numa página Web que direcciona os utilizadores para https://www.example.com . O texto “Texto da ligação” será apresentado como a hiperligação visível para os utilizadores interagirem.

 <a href="https://www.makeuseof.com/author/jowi-morales">
 Jowi Morales All Things N Page
</a>

Conhecer HTML facilitará a sua vida

Embora muitos editores Markdown e Sistemas de Gestão de Conteúdos ofereçam uma interface de edição visual, possuir conhecimentos fundamentais de HTML continua a ser valioso.

A aquisição de uma compreensão abrangente do funcionamento interno do HTML permite diagnosticar e retificar quaisquer discrepâncias no aspeto do conteúdo da Web que possam não ser adequadamente resolvidas por ferramentas de edição visual. Embora essas ferramentas sejam úteis para muitos aspectos do HTML, muitas vezes não conseguem abordar todos os cenários possíveis, tornando a manipulação direta da marcação do documento uma competência essencial para garantir o apelo estético e a precisão do conteúdo online.