Aprender un nuevo idioma requiere tiempo y disciplina.
Ya sea que estés estudiando italiano antes de tu escapada europea o terminando alguna tarea de español, hay mucho que implica leer, escribir y hablar un idioma que no usas regularmente.
Lo mismo se puede decir de aprender HTML para codificar un sitio web. Aunque no necesitas necesariamente aprender a "hablar" HTML para usarlo, necesitarás identificar los componentes de HTML, qué significan y cómo aparecerán en una página web. Aprender HTML también es una parte vital de la construcción de sitios web.
¿Qué es HTML?
HTML significa lenguaje de marcado de hipertexto. Es el lenguaje de marcado estándar para páginas web que define la estructura del contenido. Estos elementos son los bloques de construcción de cualquier sitio web.
¿Qué es HTML?
HTML permite a los usuarios crear y estructurar secciones, encabezados, enlaces, párrafos y más en un sitio web utilizando varias etiquetas y elementos. Casi todo lo que quieras crear en una página web se puede hacer usando un código HTML específico.
Aunque puedas pensar que HTML es complicado, o decir "¡Olvidé un símbolo y todo se desordenó!", HTML es muy parecido a aprender un nuevo idioma. Pero una vez que le tomas el ritmo, parecerá algo natural, y estarás creando páginas web usando HTML en poco tiempo. ¿Listo para aprender más? Solo sigue leyendo.
¿Quieres aprender más sobre Desarrolladores web? Explora los productos de Desarrolladores web.
¿Cómo funciona HTML?
Estoy 100 por ciento seguro de que has visto un sitio web que utiliza código HTML. ¿Cómo lo sé? Este artículo está compuesto de etiquetas y elementos HTML en el backend.
Este navegador no muestra las etiquetas HTML reales, sino que las utiliza para renderizar contenido específico en la página para que los visitantes de la página web puedan verlo. Por lo general, el sitio web promedio incluye varias páginas diferentes con código HTML, como la página de inicio, la página sobre nosotros y la página de contacto, cada una con sus propios documentos HTML únicos.
Elementos HTML
La anatomía de un elemento HTML consiste en una etiqueta de apertura, una etiqueta de cierre y el contenido intermedio. Piensa en estos elementos como bloques de construcción para páginas HTML.
Estas etiquetas son nombres de elementos que están rodeados por corchetes angulares, en este caso <p>, que significa párrafo.
La primera etiqueta es tu etiqueta de apertura, la segunda es la etiqueta de cierre. Deben escribirse de la misma manera, excepto que la etiqueta de cierre tendrá una barra diagonal antes del nombre de la etiqueta. El contenido entre estas dos etiquetas se mostrará en formato de párrafo en el sitio web.
Consejo: ¿Quieres aprender a extraer datos con tu nuevo conocimiento de HTML? ¡Consulta nuestra guía sobre Web Scraping ahora! También puedes consultar esta guía completa sobre la construcción de sitios web.
Etiquetas HTML comunes
Hay muchas etiquetas HTML comunes que se utilizan a menudo en la creación de una página web. A continuación se presentan algunas de las etiquetas que se utilizan con frecuencia para construir una página web de principio a fin.
Tipo de documento
La declaración del tipo de documento ayuda a los navegadores a mostrar tu página web correctamente. Solo aparecerá una vez, en la parte superior de la página.
Todos los documentos HTML comienzan con el código que declara el documento. Esta etiqueta se ve así:
<!DOCTYPE html>
Esto puede parecer confuso, pero básicamente, solo pon eso en la parte superior de tu documento y sigue construyendo.
Etiqueta HTML
Como habrás adivinado, esta etiqueta se escribe como: <html>.
Este elemento envuelve todo el contenido de toda la página, y puedes escucharlo referido como el elemento raíz. Esta etiqueta estará debajo de la etiqueta del documento y necesitará cerrarse, usando </html>, al final de la página web.
Etiqueta de título
¿Cuál es el título de la página que estás creando? Sea cual sea, estará envuelto en el elemento <title> y estará hacia la parte superior de tus etiquetas.
<title>Título de la página</title>
Etiqueta de cuerpo
El elemento <body> contiene todo el contenido que deseas mostrar a los visitantes de tu página web. Esto incluye texto, imágenes, videos, pistas de audio reproducibles y más. También necesitará cerrarse, usando </body>, al final de la página web.
Etiqueta de encabezado
Esto se escribe como <h1> y define un encabezado más grande en la página. Puedes tener más de una etiqueta de encabezado y cada elemento tendrá un número correspondiente.
<h1>Este es un encabezado.</h1>
<h2>Este también es un encabezado.</h2>
Etiqueta de párrafo
La etiqueta de párrafo define qué texto se mostrará como un párrafo usando el elemento <p>.
<p>Este es un párrafo sobre perros.</p>
<p>Este es otro párrafo sobre perros.</p>
Listas
Usar la etiqueta <ul> definirá qué texto se escribirá como una lista numerada <ol> o una lista con viñetas <li>.
Un ejemplo de una lista con viñetas sería:
<ul>
<li>Harina</li>
<li>Azúcar</li>
<li>Mantequilla</li>
</ul>
Usar este código haría que el texto aparezca en la página web como:
- Harina
- Azúcar
- Mantequilla
Etiqueta de idioma
El idioma del documento se define mediante la etiqueta "lang". Si tu página se mostrará en inglés, la etiqueta sería:
<html lang=”en”>
En este caso, el en representa inglés. Otras etiquetas de idioma populares son es para español, fr para francés, it para italiano, he para hebreo y zh para chino.
¿Necesitas que tu página web esté en un idioma diferente? Consulta esta lista de códigos de idioma HTML.
Imágenes
El inicio de tu elemento de imagen comenzará con la etiqueta <img>, pero hay otros componentes que deben incluirse.
También habrá archivo de origen (src), texto alternativo (alt) y etiquetas de ancho y alto. Si estoy usando una foto de los Chicago Cubs que tiene 600 píxeles de ancho y 450 píxeles de alto, la etiqueta de imagen se vería así:
<img src=”Chicago_Cubs.jpg” alt=”Chicago-Cubs” style=”width:600px;height:450px”>
Enlaces
Hay una manera específica de agregar un enlace en tu texto usando HTML. Para hacerlo, usa el elemento <a>, que es la abreviatura de ancla.
En este caso, digamos que mi texto de anclaje es G2 Learning Hub.
<a>G2 Learning Hub</a>
A continuación, dale al elemento <a> un atributo href con comillas vacías:
<a href= “ “G2 Learning Hub</a>
Consejo: Href significa referencia de hipertexto.
Luego, llena el valor de este atributo (entre las comillas) con la URL a la que enlazarás.
<a href= “https://learn.g2crowd.com/G2”>Learning Hub</a>
Diccionario HTML
- <!DOCTYPE html> Tipo de documento
- <html> Etiqueta HTML
- <title> Etiqueta de título
- <body> Etiqueta de cuerpo
- <H1> Etiqueta de encabezado
- <p> Etiqueta de párrafo
- <ul> Etiqueta de lista
- <html lang="en"> Etiqueta de idioma inglés
- <img> Etiqueta de imagen
- <a> Etiqueta de enlace de ancla
Documento HTML básico
Si estuviera creando un documento HTML básico que contuviera todos los elementos y etiquetas mencionados anteriormente, se vería así:
<!DOCTYPE html>
<html>
<html lang=”en”>
<title>Título de la página</title>
<body>
<h1>Este es tu primer encabezado</h1>
<p>Este es un texto de párrafo que se refiere a tu primer encabezado.</p>
<h2>Este es tu segundo encabezado</h2>
<p>Este es un texto de párrafo que se refiere a tu segundo encabezado.</p>
<ul>
<li>Lista</li>
<li>Lista</li>
<li>Lista</li>
</ul>
<img src=”Image.jpg” alt=”Image-Alt-Text” style=”width:600px;height:450px”>
Haz clic en el enlace <a href= “https://learn.g2crowd.com/G2”>aquí</a> para ser llevado al G2 Learning Hub.
</body>
</html>
Relacionado: ¡Aprende más sobre JavaScript y cómo puedes practicar tus habilidades!
Pros de HTML
Hay muchos beneficios de usar HTML para crear una página web. Algunos incluyen:
- Lenguaje de código ampliamente utilizado con una gran comunidad que lo usa
- Funciona en todos los navegadores web
- Usa un marcado limpio y consistente
- Completamente gratuito y de código abierto
Contras de HTML
Como todas las cosas que tienen un pro, HTML también tiene algunos contras que necesitarás considerar.
- Principalmente utilizado para páginas web estáticas
- Todas las páginas web necesitan ser creadas por separado, incluso si usan los mismos elementos y etiquetas
- Si estás usando un navegador más antiguo, puede que no renderice etiquetas desarrolladas recientemente
Arremángate y empieza a codificar
Ya seas un experto o un principiante en la construcción de un sitio web, lo más probable es que uses HTML para crear varias páginas web. Aunque al principio puedas sentirte dudoso sobre escribir código HTML, con el tiempo se sentirá como algo natural, y estarás leyendo y escribiendo líneas de código en tus sueños.
Ahora que entiendes HTML, puede que te interese aprender CSS y PHP. ¡O consulta estos consejos para codificar sitios web!
Mara Calvello
Mara Calvello is a Content and Communications Manager at G2. She received her Bachelor of Arts degree from Elmhurst College (now Elmhurst University). Mara writes content highlighting G2 newsroom events and customer marketing case studies, while also focusing on social media and communications for G2. She previously wrote content to support our G2 Tea newsletter, as well as categories on artificial intelligence, natural language understanding (NLU), AI code generation, synthetic data, and more. In her spare time, she's out exploring with her rescue dog Zeke or enjoying a good book.
