Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

O que é: HTML

HTML significa “HyperText Markup Language” e é o código usado para definir todas as páginas da World Wide Web. Ele informa aos navegadores da Web como exibir o conteúdo das páginas da Web.

Embora seja útil ter um conhecimento de HTML, isso não é necessário para criar um site WordPress.

No entanto, saber como editar HTML pode ser útil para personalização avançada e solução de problemas.

Glossary Entry for HTML

O que é HyperText Markup Language (HTML)?

Toda página da Web é criada usando código HTML e, geralmente, também código CSS e JavaScript. Isso torna o HTML muito importante para todos os sites.

Dissemos anteriormente que HTML significa “HyperText Markup Language” (Linguagem de marcação de hipertexto). Vamos detalhar isso:

  • Hipertexto significa que você pode adicionar links às suas páginas da Web. Esses links podem levá-lo a páginas relacionadas em seu próprio site ou em outros sites. Eles também permitem que você pule de uma parte da página atual para outra.
  • Amarcação refere-se a códigos ou tags especiais que você pode usar para descrever ou definir diferentes partes do seu documento. Eles fornecem instruções sobre como o texto deve ser exibido ou sobre o tipo de conteúdo.

Em resumo, o HTML é uma linguagem usada para criar a estrutura básica de uma página da Web.

Exemplos de código HTML

A marcação HTML usa um sistema de tags que são colocadas entre colchetes angulares. Essas tags definem vários elementos, como parágrafos, cabeçalhos, links, imagens e outros.

Aqui estão alguns exemplos.

Cada parágrafo em uma página da Web é cercado por tags de parágrafo como esta:

<p>This is a paragraph of text in HTML.</p>

Você também pode usar tags HTML para criar até 6 níveis de títulos em seu site, como este:

<h1>This Is a Main Heading</h1>
<h2>This Is a Subheading</h2>

Você pode criar links em HTML usando tags de âncora como esta:

<a href="https://www.example.com">click on this anchor text</a>

Você também pode adicionar imagens a uma página da Web usando HTML, especificando o URL da imagem e uma descrição como esta:

<img src="image.jpg" alt="A description of the image">

A marcação HTML pode parecer difícil para um iniciante. Talvez você esteja se perguntando se precisa entender HTML antes de criar um site.

Você precisa entender de HTML para criar um site WordPress?

Nos primórdios da Internet, era comum criar sites estáticos usando código HTML. Mas esse não é mais o caso.

Atualmente, a maioria dos sites é criada usando um construtor de sites sem a necessidade de entender o código HTML. O WordPress é o construtor de sites mais popular e alimenta 43% de todos os sites.

Em vez de forçá-lo a usar tags HTML complexas para criar parágrafos, cabeçalhos e muito mais, o WordPress oferece um editor de blocos fácil de usar.

Isso permite que você crie uma página da Web arrastando blocos para a área de conteúdo. Por exemplo, há blocos para parágrafos, cabeçalhos, listas, imagens e muito mais.

Block Editor

Outra maneira de criar páginas da Web no WordPress é usar um plug-in de construtor de páginas do tipo arrastar e soltar. Essas ferramentas permitem que você crie designs personalizados de sites do WordPress sem escrever nenhum código.

O SeedProd é o melhor plug-in de criação de páginas do mercado e permite que você crie facilmente páginas personalizadas, como páginas de destino, páginas de lançamento em breve e até mesmo temas personalizados completos do WordPress.

Adding a headline to a custom landing page

Quer você use o editor de blocos do WordPress ou um plug-in de criação de páginas, o código HTML necessário para o seu site é criado automaticamente nos bastidores.

Você pode saber mais sobre construtores de sites em comparação com a codificação de um site do zero em nosso guia sobre como codificar um site (guia completo para iniciantes).

Adição ou edição de código HTML no WordPress

Embora não seja necessário entender HTML para criar um site, algum conhecimento de HTML pode ser útil para solucionar problemas em seu site ou realizar personalizações avançadas.

Ao usar o editor de blocos do WordPress, você pode visualizar e editar o código HTML de um determinado bloco selecionando “Editar como HTML” no menu de três pontos.

Choose the edit as HTML option from the Options dropdown menu in the block toolbar

Também é fácil adicionar novo HTML a um post ou página.

Basta arrastar um bloco HTML personalizado para a área de conteúdo e adicionar seu código HTML.

Paste the discord widget shortcode into the HTML block

Você pode saber mais em nosso guia sobre como editar HTML no editor de código do WordPress.

Outra maneira de usar o código HTML em seu site é adicionar caracteres especiais, como o símbolo de copyright ou de marca registrada.

Basta editar o HTML do bloco e, em seguida, digitar &copy; para adicionar um símbolo de copyright © ou &trade; para adicionar o símbolo de marca registrada ™.

Consulte nosso guia sobre como adicionar caracteres especiais nas postagens do WordPress para saber mais.

Você também pode ter curiosidade sobre o código HTML que está sendo usado em outros sites. Os navegadores modernos da Web, como o Google Chrome e o Mozilla Firefox, têm ferramentas integradas que permitem inspecionar o código HTML e CSS por trás de uma página da Web.

Inspect HTML and CSS

Isso pode ser útil ao buscar inspiração para seu próprio site. Você também pode fazer experiências seguras com a edição do código, pois isso afetará apenas a aparência do site em seu próprio navegador da Web.

Para obter detalhes, consulte nosso guia sobre os conceitos básicos do elemento Inspect.

Qual é a diferença entre HTML e CSS?

Mencionamos que os navegadores modernos permitem que você inspecione o código HTML e CSS por trás de qualquer página da Web. Talvez você esteja se perguntando qual é a diferença entre os dois tipos de código.

O HTML define a estrutura e o conteúdo de uma página da Web, mas não a aparência desses elementos. Esse é o trabalho do CSS, que significa “Cascading Style Sheets” (Folhas de estilo em cascata).

CSS é uma linguagem que ajuda a estilizar seu site. Por exemplo, ele permitirá que o navegador da Web do usuário saiba a cor de fundo da página, a cor e o tamanho para exibir os cabeçalhos e o texto dos parágrafos, como alinhar o texto e muito mais.

O tema do WordPress que você escolher definirá o CSS usado em seu site. No entanto, você pode alterar a aparência do seu site personalizando o código CSS.

Você pode saber mais em nosso guia sobre como adicionar facilmente CSS personalizado ao seu site WordPress.

Esperamos que este artigo tenha ajudado você a aprender mais sobre HTML no WordPress. Talvez você também queira ver nossa lista de Leitura adicional abaixo para obter artigos relacionados sobre dicas, truques e ideias úteis do WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Leitura adicional

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!