HTML

HyperText Markup Language

¿Qué es HTML?

Es un lenguaje de marcado, NO de programación.
Se utiliza para crear y estructurar el contenido de sitios web.
Está basado en etiquetas para marcar diferentes elementos de una página, tales como encabezados, párrafos, listas, imágenes y enlaces.

Etiquetas HTML

Son la base de la estructura de un documento web.
Cada etiqueta tiene un propósito específico y define cómo se debe mostrar el contenido en el navegador.
Se escriben entre corchetes angulares < y >, y generalmente vienen en pares: una etiqueta de apertura y una etiqueta de cierre.
La etiqueta de apertura marca el inicio de un elemento, mientras que la etiqueta de cierre marca el final del elemento. La etiqueta de cierre siempre lleva una barra diagonal / antes del nombre de la etiqueta.

<!-- Esto es una etiqueta de comentario -->

<!-- h1 Etiqueta de título principal -->
<h1>Hola Mundo</h1>

<!-- Etiqueta de imagen, no cierra con par -->
<img src="/centro-logo.svg" alt="CENTRO" width="100">

Estructura de documento

Ejemplo: index.html

    <!DOCTYPE html> 
    <html lang="en"> 
        <head> 
            <meta charset="UTF-8"> 
            <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
            <title>Hola Mundo</title> 
        </head> 
        <body> 
            <!-- Contenido de la página --> 
        </body> 
    </html>

*Markup básico, recomendable escribir todas las etiquetas de base.

Los documentos html se guardan como archivos con la extensión .html o .htm
La etiqueta <!DOCTYPE html> declara el tipo de documento como HTML5.
La etiqueta <html> es la etiqueta raíz que contiene todo el contenido del documento.
La etiqueta <head> contiene metadatos sobre el documento, como el título, la codificación de caracteres y enlaces a hojas de estilo.
La etiqueta <body> contiene todo el contenido visible de la página web.

Etiquetas más comunes

<h1> a <h6> para encabezados de diferentes niveles.
<p> para párrafos de texto.
<ul> y <ol> para listas no ordenadas y ordenadas, respectivamente.
<li> para elementos de lista.
<a> para enlaces.
<img> para imágenes.
<div> y <span> para agrupar elementos.

Atributos HTML

Proporcionan información adicional sobre los elementos HTML. Se escriben dentro de la etiqueta de apertura y consisten en un nombre y un valor, separados por un signo igual =.
Se utilizan para especificar propiedades de los elementos, como el color, el tamaño, la fuente, la alineación, etc.

<img src="/ruta-a-imagen.jpg" alt="Descripción de imagen" width="100">

Etiquetas Semánticas

HTML5 introdujo una serie de etiquetas semánticas que han revolucionado la forma en que estructuramos el contenido web. Algunas de las más importantes son:

Etiqueta	Descripción
`<header>`	Define la cabecera de una página o sección. Generalmente contiene el título principal, el logotipo y elementos de navegación.
`<nav>`	Indica una sección de navegación con enlaces a otras páginas o secciones del sitio web.
`<main>`	Representa el contenido principal y único de una página. Debe haber un solo elemento `<main>` por página.
`<article>`	Define un contenido independiente y autónomo que se puede reutilizar en diferentes contextos, como un artículo de blog, una noticia o una publicación en un foro.
`<section>`	Agrupa contenido temáticamente relacionado dentro de una página. Se utiliza para dividir el contenido en secciones más pequeñas y manejables.
`<aside>`	Contiene información adicional o complementaria relacionada con el contenido principal, como barras laterales, anuncios o enlaces relacionados.
`<footer>`	Define el pie de página de una página o sección. Suele contener información sobre derechos de autor, enlaces a otras páginas y datos de contacto.

Ejemplo Markup Semántico

    <header> 
        <h1>Título de la página</h1>
        <nav>
            <ul> 
                <li><a href="#">Enlace 1</a></li> 
                <li><a href="#">Enlace 2</a></li>
            </ul>
        </nav> 
    </header> 
    <main> 
        <article> 
            <h2>Título del artículo</h2> 
            <p>Contenido del artículo.</p> 
        </article> 
        <aside> 
            <h3>Contenido relacionado</h3> 
            <p>Información adicional.</p>
        </aside> 
    </main>
    <footer>
        <p>Pie de página.</p>
    </footer>

Web Semántica

Accesibilidad mejorada: El HTML semántico facilita la vida de las personas con discapacidades visuales. Los lectores de pantalla, utilizados por estas personas, pueden interpretar el significado de las etiquetas semánticas para "leer" el contenido de manera más lógica y comprensible.
SEO optimizado: Los motores de búsqueda, como Google, valoran el HTML semántico. Al entender la estructura y el contenido de una página, los motores de búsqueda pueden indexarla y clasificarla de manera más efectiva, lo que puede mejorar el posicionamiento en los resultados de búsqueda.
Código más legible y mantenible: El HTML semántico hace que el código sea más claro y fácil de entender para los desarrolladores. Al utilizar etiquetas que describen el significado del contenido, se reduce la necesidad de comentarios extensos y se facilita el mantenimiento del código a largo plazo.

Git & GitHub

Git Software manejador de versiones
GitHub Plataforma para alojar repositorios en la nube, permite gestión de proyectos en colaborativo, revisión de código y más.