Fundamentos de HTML: Todo lo que necesitas saber para empezar

Descubre qué es, cómo funciona y cómo utilizar elementos y etiquetas para estructurar tus páginas web. ¿Te gustaría saber cómo se construyen las páginas web desde cero? Este artículo te proporcionará una base sólida en HTML, la tecnología que da vida a la web.

Autor: José Alvarado

Publicado: hace 11 meses

Fundamentos de HTML: Todo lo que necesitas saber para empezar

HTML, o HyperText Markup Language, es la piedra angular de la web. Es el lenguaje que estructura el contenido que ves en la mayoría de los sitios web. Aunque puede parecer simple al principio, HTML es fundamental para la creación de páginas web y aplicaciones. En este artículo, desglosaremos los fundamentos de HTML, explicaremos cómo funcionan sus elementos y te proporcionaremos una base sólida para comenzar a construir tu propio contenido web.

¿Qué es HTML?

HTML es un lenguaje de marcado utilizado para crear y estructurar el contenido en la web. A diferencia de los lenguajes de programación, HTML no ejecuta lógica; en cambio, define la estructura del contenido, indicando cómo debe ser presentado en el navegador.

Estructura Básica de un Documento HTML

Un documento HTML típico sigue una estructura básica que incluye:

Declaración del Doctype: Indica al navegador el tipo de documento, y ayuda a los navegadores a mostrar correctamente las páginas web. Esta declaración solo debe aparecer una vez, en la parte superior de la pagina. Su declaración actual para HTML 5 es:
```
<!DOCTYPE html>
```
Elemento <html>: Es el contenedor raíz del documento, es decir, es el contenedor principal de todo el contenido HTML, tiene una etiqueta de inicio y una etiqueta de cierre. Ejemplo:
```
<html>
   
</html>
```
Elemento <head>: Contiene metadatos sobre el documento HTML, también contiene el título que por ejemplo observaras en la pestaña de tu navegador si te encuentras desde una computadora en este momento, y los enlaces a hojas de estilo.
```
<head>
    <title>Mi Página Web</title>
</head>
```

Elemento <body>: Contiene el contenido visible de la página web, como textos, imágenes y enlaces.

<body>
    <h1>Bienvenido a CodeMundo</h1>
    <p>Este es un párrafo de texto.</p>
</body>

Elementos y Etiquetas

En HTML, el contenido se organiza mediante elementos, que están definidos por etiquetas. Vamos a desglozarlo un poco más para entender mejor:

Elementos: En HTML, los elementos son las unidades básicas de construcción. Cada elemento representa un concepto específico, como un párrafo, un encabezado, una imagen, una lista, etc.
Etiquetas: Las etiquetas son las palabras clave que delimitan un elemento. Tienen una etiqueta de apertura (que comienza con <) y una etiqueta de cierre (que comienza con </ ). Por ejemplo, el elemento párrafo se define con las etiquetas <p> y </p>.

Ejemplo de uso de etiquetas:

<p>Este es un párrafo de texto.</p>

Atributos de las etiquetas:

Las etiquetas HTML pueden tener atributos que proporcionan información adicional sobre el elemento. Los atributos se colocan dentro de la etiqueta de apertura y tienen el formato nombre="valor"

Ejemplo:

<a href="https://www.codemundodev.com">Visita nuestro sitio</a>

Principales Elementos HTML

Encabezados (<h1>, <h2>, <h3>,... <h6> ): Definen los títulos y subtítulos de la página.
```
<h1>Título Principal</h1>
```
Párrafos (<p>): Definen bloques de texto.
```
<p>Este es un párrafo.</p>
```

Listas (<ul>, <ol>, <li>): Definen listads no ordenadas (<ol>) y ordenadas (<ul>).

<ul>
    <li>Elemento de lista 1</li>
    <li>Elemento de lista 2</li>
</ul>

Imágenes (<img>): Inserta imágenes en la página.

<img src="imagen.jpg" alt="Descripción de la imagen">

Enlaces (<a>): Esta etiqueta crea hipervínculos que dirigen a otras páginas o recursos.
```
<a href="https://www.codemundodev.com">Visita nuestro sitio</a>
```

A continuación, te recomiendo algunos sitios web que utilicé cuando comencé a interesarme por aprender sobre HTML y que me fueron muy útiles:

Uso de clases CSS

Las clases son selectores que permiten definir estilos que se pueden aplicar a varios elementos HTML, independientemente de su tipo o ubicación en el documento. A diferencia de los selectores de ID, que son únicos, las clases pueden reutilizarse en múltiples elementos, lo que hace que tu CSS sea más flexible y organizado.

Definir una clase CSS

Para empezar, necesitas definir la clase en tu archivo CSS. Aquí te dejo un ejemplo simple:

.text-color {
  color: #007BFF;
  font-weight: bold;
}

En este ejemplo, hemos creado una clase llamada text-color que cambia el color del texto a azul y lo hace negrita. Puedes cambiar cualquier propiedad CSS dentro de la clase para ajustarla a tus necesidades.

Aplicar la clase en HTML

Ahora, puedes aplicar esta clase a cualquier elemento HTML usando el atributo class de la siguiente manera. Recuerda incluir en tu archivo HTML tu hoja de estilos con la etiqueta <link>.

<head>
      <link rel="stylesheet" href="styles.css">
</head>

<p class="text-color">Este texto utiliza estilos de una clase CSS.</p>
<p>Este texto no contiene una clase CSS.</p>

En este ejemplo, solo el primer párrafo (<p>) tendrá el estilo de la clase text-color, mientras que el segundo párrafo mantendrá su estilo predeterminado.

Como puedes observar, utilizar clases CSS es bastante sencillo. Actualmente por medio del atributo class en los elementos HTML es la forma más utilizada en el desarrollo web para estilizar las paginas web.

Conclusión

HTML es el lenguaje que da forma al contenido de la web, permitiendo a los desarrolladores crear páginas estructuradas y accesibles. Con una comprensión básica de los elementos y su estructura, estarás bien encaminado para empezar a construir tus propias páginas web. ¡Comienza a experimentar con HTML y verás cómo tus ideas toman forma en la web!

Nos vemos en un próximo blog. 🧑‍💻