HTML significa “HyperText Markup Language” (lenguaje de marcado de hipertexto) y es el código utilizado para definir todas las páginas de la World Wide Web. Indica a los navegadores cómo mostrar el contenido de las páginas web.
Aunque es útil tener conocimientos de HTML, no es obligatorio / requerido / necesario para crear un sitio web en WordPress.
Sin embargo, saber cómo editar HTML puede ser útil para la personalización avanzada y para diagnosticar incidencias.
¿Qué es el lenguaje de marcado de hipertexto (HTML)?
Todas las páginas web se crean con código HTML y, normalmente, también con código CSS y JavaScript. Esto hace que HTML sea muy importante para todos los sitios web.
Antes hemos dicho que HTML significa “HyperText Markup Language” (lenguaje de marcado de hipertexto). Vamos a desglosarlo:
- Hipertexto significa que puede añadir enlaces a sus páginas web. Estos enlaces pueden llevarle a páginas relacionadas de su propio sitio web o de otros sitios web. También permiten saltar de una parte de la página actual a otra.
- Lasmarcas son códigos o etiquetas especiales que pueden utilizarse para describir o definir distintas partes del documento. Dan instrucciones sobre cómo debe mostrarse el texto o de qué tipo de contenido se trata.
En pocas palabras, HTML es un idioma utilizado para crear la estructura básica de una página web.
Ejemplos de código HTML
El marcado HTML utiliza un sistema de etiquetas encerradas entre corchetes angulares. Estas etiquetas definen varios elementos, como párrafos, encabezados, enlaces, imágenes, etc.
He aquí algunos ejemplos.
Cada párrafo de una página web está rodeado de etiquetas de párrafo como ésta:
<p>This is a paragraph of text in HTML.</p>
También puede utilizar etiquetas HTML para crear hasta 6 niveles de encabezados en su sitio web, como éste:
<h1>This Is a Main Heading</h1>
<h2>This Is a Subheading</h2>
Puede enlazar en HTML utilizando etiquetas de anclaje como éstas:
<a href="https://www.example.com">click on this anchor text</a>
También puedes añadir imágenes a una página web utilizando HTML especificando la URL de la imagen y una descripción como ésta:
<img src="image.jpg" alt="A description of the image">
El marcado HTML puede parecer difícil para un principiante. Quizá se pregunte si es necesario entender HTML antes de crear un sitio web.
¿Necesitas entender HTML para crear un sitio web en WordPress?
En los primeros tiempos de Internet, era habitual crear sitios web estáticos utilizando código HTML. Pero eso ya no es así.
Hoy en día, la mayoría de los sitios web se crean con un maquetador sin necesidad de entender el código HTML. WordPress es el maquetador de sitios web más popular y alimenta el 43% de todos los sitios web.
En lugar de obligarle a utilizar complejas etiquetas HTML para crear párrafos, encabezados, etc., WordPress le ofrece un editor de bloques fácil de usar.
Permite construir una página web arrastrando bloques al área de contenido. Por ejemplo, hay bloques para párrafos, encabezados, encabezados, listas, imágenes y mucho más.
Otra forma de crear páginas web en WordPress es utilizando un plugin editor de arrastrar y soltar. Estas herramientas permiten crear diseños personalizados de sitios web en WordPress sin necesidad de escribir ningún código.
SeedProd es el mejor plugin maquetador de páginas del mercado, y te permite crear fácilmente páginas de destino personalizadas, páginas coming soon, e incluso temas completos de WordPress personalizados.
Tanto si utiliza el editor de bloques de WordPress como un plugin maquetador de páginas, el código HTML necesario para su sitio web se crea automáticamente entre bastidores.
Puede obtener más información acerca de los maquetadores de sitios web frente a la codificación de un sitio web desde cero en nuestra guía sobre cómo codificar un sitio web (guía completa para principiantes).
Añadir o editar código HTML en WordPress
Aunque no es necesario entender HTML para crear un sitio web, algunos conocimientos de HTML pueden ser útiles para diagnosticar problemas en su sitio web o realizar personalizaciones avanzadas.
Al utilizar el editor de bloques de WordPress, puede ver y editar el código HTML de un bloque concreto seleccionando “Editar como HTML” en el menú de tres puntos.
También es fácil añadir nuevo HTML a una entrada o página.
Basta con arrastrar un bloque HTML personalizado al área de contenido y añadir el código HTML.
Puede obtener más información en nuestra guía sobre cómo editar HTML en el editor de código de WordPress.
Otra forma de utilizar el código HTML en su sitio web es añadir caracteres especiales, como el símbolo de copyright o de marca registrada.
Sólo tiene que editar el HTML del bloque y, a continuación, escriba © para añadir un símbolo de copyright © o ™ para añadir el símbolo de marca comercial ™.
Consulte nuestra guía sobre cómo añadir caracteres especiales en entradas de WordPress para obtener más información.
También puedes sentir curiosidad acerca del código HTML que se utiliza en otros sitios web. Los navegadores modernos, como Google Chrome y Mozilla Firefox, incorporan herramientas que permiten inspeccionar el código HTML y CSS de una página web.
Esto puede ser útil cuando busque inspiración para su propio sitio web. También puede experimentar con seguridad editando el código, ya que solo afectará a la apariencia del sitio en su propio navegador / explorador.
Para más detalles, consulte nuestra guía sobre los fundamentos del elemento Inspeccionar.
¿Cuál es la diferencia entre HTML y CSS?
Hemos mencionado que los navegadores / exploradores web modernos permiten inspeccionar el código HTML y CSS que hay detrás de cualquier página web. Puede que te estés preguntando acerca de la diferencia entre ambos tipos de código.
HTML define la estructura y el contenido de una página web, pero no el aspecto de esos elementos. Ese es el trabajo de CSS, que significa ‘Cascading Style Sheets’ (hojas de estilo en cascada).
CSS es un idioma que le ayuda a dar estilo a su sitio web. Por ejemplo, permitirá al navegador / explorador del usuario saber el color de fondo de la página, el color y tamaño para mostrar los encabezados y el texto de los párrafos, cómo alinear el texto y mucho más.
El tema de WordPress que elija definirá el CSS utilizado para su sitio web. Sin embargo, puede cambiar la apariencia de su sitio web personalizando el código CSS.
Puede obtener más información en nuestra guía sobre cómo añadir fácilmente CSS personalizado a su sitio de WordPress.
Esperamos que este artículo te haya ayudado a aprender más acerca de HTML en WordPress. También puedes consultar nuestra lista de lecturas adicionales a continuación para ver artículos relacionados con consejos, trucos e ideas útiles para WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Lecturas adicionales
- Cómo añadir fácilmente código personalizado en WordPress (sin romper su sitio)
- Cómo añadir caracteres especiales en entradas de WordPress
- WordPress frente a HTML estático: ¿qué es mejor para el sitio web de su empresa?
- Cómo añadir fácilmente CSS personalizado a su sitio WordPress
- Conceptos básicos de Inspect Element: Personalización de WordPress para usuarios bricolaje
- Cómo editar HTML en el editor de código de WordPress (Guía para principiantes)
- Cómo codificar un sitio web (Guía completa para principiantes)
- CSS
- Cómo elegir el mejor constructor de sitios web en 2024 (comparado)
