Saltar a contenido

icono Introducción a HTML

Una página web no es más que un archivo de texto (que podemos hacer con el mismo bloc de notas) donde, mediante una serie de elementos de marcado, configuramos la estructura y el contenido que va a tener dicha página.

HTML

El lenguaje HTML (HyperText Markup Language) es un lenguaje de hipertexto, es decir, texto en documentos que permiten enlazar directamente con otros documentos. Fue creado en 1980 para poder transmitir documentos por Internet con las velocidades tan limitadas de la época, ya que el emisor lo que se transmite son una serie de instrucciones para construir el documento en el ordenador del receptor.

HTML es el primer lenguaje que una persona debe conocer si desea comenzar a realizar páginas web, ya que es el primero que se utilizó y es la base de los lenguajes de edición actuales. No se trata de  un lenguaje de programación propiamente dicho, aunque a veces se le denomina así coloquialmente.

Editor e interpretador

Etiquetas HTML

Una página web se basa en elementos representados por etiquetas, que organizan y presentan contenido, estableciendo la jerarquía y semántica de la información. Todas las etiquetas HTML disponen de los símbolos mayor que < y menor que >, y normalmente se utilizan en parejas. Una al principio (etiqueta de apertura) y otra al final del texto al que afectan etiqueta de cierre. 

Estructura etiquetas

Reglas y normas HTML5

Las principales reglas y normas de HTML5 son:

  • Estructura Básica: Todo documento HTML5 debe tener una estructura básica que incluya las etiquetas <!DOCTYPE HTML> <html>, <head>, y <body>. La etiqueta <html> es el elemento raíz y debe contener todas las demás etiquetas.
  • Etiquetas en mayúsculas o minúsculas: Las etiquetas HTML no distinguen entre mayúsculas y minúsculas. Por lo tanto, <html> y <html> son equivalentes. Se recomienda seguir siempre la misma sintaxis, preferiblemente letras en minúsculas.
  • Estructura jerárquica: Gráficamente, los elementos utilizados se pueden representar del siguiente modo:
Estructura básica de un documento HTML

Estructura básica de una página web

La estructura de una página web se refiere a la organización de los elementos y contenidos dentro de la página. Esta estructura es fundamental para garantizar que el contenido sea accesible, legible y fácil de navegar.

En la estructura de una página web tenemos tres partes diferenciadas: cabecera, cuerpo y pie de página. O, por sus términos en inglés: header, body y footer.

Estructura básica de una página web

Cabecera o header

La cabecera es la parte superior de la página web. Aquí suele incluirse la información básica de la empresa o marca y es consistente en todo el sitio, es decir, se repite en cada página de la web por la que navegas.

Los elementos que se incluyen en la cabecera son:

  • Logo de la empresa
  • El menú de navegación
  • Un cuadro de búsqueda
  • Una pequeña descripción de la web

Cuerpo o body

Esta es la parte de la web que alberga el contenido principal de tu página. Esta parte sí es diferente en cada página de tu sitio. Es decir, no será el mismo contenido el que incluyes en tu página de contacto que en la página principal.

El pie de página o footer es la parte inferior de una página web. Al igual que la cabecera, se repite y es consistente en cada página. En el footer podemos encontrar los siguientes elementos:

  • Menú simplificado
  • Información de contacto
  • Botones de redes sociales
  • Logo de la empresa
  • Enlace a la política de privacidad
Actividad

📝 AA4.4 Estructura de una páginas web

(C.ESP2 / CE2.4 / IC1-3p)

  1. ¿Qué es la cabecera de una página web y qué suele contener?
  2. ¿Qué es el cuerpo de una página web y qué suele contener?
  3. ¿Qué es el pie de página de una página web y qué suele contener?
  4. Busca en Internet cada una de las herramientas de desarrollo web vistas e indica el nombre de al menos una de cada tipo.
  5. Indica los nombres de los principales lenguajes de edición de páginas web.

Elementos semánticos

A la hora de implementar dicha estructura tenemos una relación de elementos semánticos, o marcados semánticos, que nos ayudan a definir las distintas divisiones de una página web.

Los elementos semánticos son:

Elementos semánticos que definen estructura documento HTML5
Elemento Descripción Ejemplo Periódico digital
<section> Define secciones de una web . Agrupa contenidos como noticias por temática o ámbito por ejemplo cultura, economía...
<nav> Especifica una sección que contiene un menú de navegación. Enlaces de navegación de la web.
<article> Determina secciones de contenido. Una noticia perteneciente a un tema o ámbito concreto.
<aside> Define la barra lateral de una página web donde se incluye información adicional a la principal.  Relación de links a artículos relacionados con la noticia que se está leyendo.
<h1> <h2> <h3> <h4> <h5> <h6> Se utilizan para definir los encabezados de diferentes niveles, donde <h1> es el más importante y <h6> el menos. Suele emplearse para los títulos.
<header> Determina la cabecera de una web o de un elemento. Título del periódico donde se visualiza el logo y además podría servir para contener el título de las secciones.
<footer> Define el pie de página. También se puede utilizar para definir el pie de otros elementos. Pie de página del periódico indicando contacto, redes sociales. También podría delimitar el pie de cada sección del periódico.
<address> Especifica una sección que contiene información de contacto. Suele contener e-mail, teléfono, redes sociales...
<main> Determina el contenido principal del documento. Indica la parte principal del documento (sin tener en cuenta header o footer) Solo puede existir un elemento <main> en el documento.
Etiquetas unitarias

Las etiquetas <body> <h1> y <main> solo se pueden utilizar una vez por documento HTML, el resto de etiquetas de contenido se pueden usar siempre que sea necesario.

<main> vs <body>
  • Las etiquetas <body> Define el contenido completo del documento HTML. Todo lo que aparece visible en la página web (texto, imágenes, tablas, formularios, etc.) debe estar dentro de esta etiqueta.
  • La etiqueta <main> Representa el contenido principal de la página HTML. No incluye elementos repetitivos como encabezados, menús o pie de página.Solo puede haber un <main> por página

Visualización estructura
esquema básico página _web_
<!DOCTYPE html>
<html lang="es">  
<head>    
    <title>Título de la _web_  </title>    
    <meta charset="UTF-8">
    <meta name="title" content="Título de la _web_ ">
    <meta name="description" 
        content="Descripción de la _web_ ">    
    <link href="estilos.css" rel="stylesheet">
    <style>
        header{background-color:yellow;}/* Código _CSS_ */
    </style> 
    <script src="script.js"></script>  
    <script type="text/JavaScript">
        /* Código JS */
    </script> 
</head>  
<body>    
    <header>
        <h1>Título de la _web_</h1>      
    </header>    
    <nav>
        <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Contacto</a></li>
    </ul>
    </nav>
    <section>      
        <article>
            <h2>CONTENIDO PRINCIPAL</h2>
            <p>Este es el contenido principal de mi _web_ .</p>      
        </article>      
    </section>
    <aside>
        <h3>Testimonios</h3>
        <p>Me gusta mucho esta página.</p>
    </aside>
    <footer>
        <h4>Redes sociales</h4>
        <a href="#">Facebook</a>
        <a href="#">Tiwtter</a>
    </footer>
</body>  
</html>

See the Pen Untitled by Elena (@aznarel) on CodePen.

Actividad

📝 AA4.5 Identificación elementos semánticos

(C.ESP2 / CE2.4 / IC1-3p)

Identifica en la siguiente imagen los elementos semánticos empleados para la estructura de la web .

Imagen 1
Imagen 2

Solución

IdentificarSemantica2 IdentificarSemantica4

Elementos metainformación

La metainformación en HTML se utiliza para proporcionar información adicional sobre un documento HTML.

Esta información no se muestra directamente en la página web , pero puede ser utilizada por los motores de búsqueda, los navegadores y otros sistemas para entender y clasificar el contenido del documento.

Estas etiquetas se colocan entre las etiquetas <head> y </head>. Es importante tener en cuenta que las metatags pueden variar dependiendo de las necesidades y estándares específicos de cada sitio web.

Algunas de las etiquetas más comunes para la metainformación en HTML son:

Elemento Descripción
<title> Define el título del documento, que se muestra en la barra de título del navegador y en los resultados de búsqueda.
alt text
<meta charset="UTF-8"> Especifica la codificación de caracteres utilizada en el documento. UTF-8 es la codificación más comúnmente utilizada para admitir caracteres multilingües.
<meta name="description" content="Descripción del sitio"> Proporciona una breve descripción del contenido del sitio web . Es utilizado por los motores de búsqueda para mostrar información sobre el sitio en los resultados de búsqueda.
<meta name="keywords" content="palabra clave1, palabra clave2"> Especifica palabras clave relacionadas con el contenido del sitio web . Aunque no es tan relevante para los motores de búsqueda modernos, aún puede ser utilizado para conocer la temática del sitio web.
<meta name="author" content="Nombre del autor"> Especifica el nombre del autor del documento.
index.html
<!DOCTYPE html> <!-- (9) -->
<html lang="es"><!-- (10) -->
<head><!-- (11) -->
  <meta charset="UTF-8">   <!-- (1) -->
  <meta name="description" content="Descripción del sitio"> <!-- (2) -->
  <meta name="keywords" content="palabra clave1, palabra clave2"><!-- (3) -->
  <meta name="author" content="Nombre del autor"><!-- (5) -->
  <title>Metainformación del Sitio</title><!-- (8) -->
</head>
<body><!-- (12) -->
  <!-- Contenido del sitio _web_ -->
</body>
</html>
  1. Especifica la codificación de caracteres utilizada en el documento.
  2. Descripción del sitio
  3. Especifica palabras clave relacionadas con el contenido
  4. Nombre del autor del documento.
  5. Indica los derechos de autor
  6. Título del documento
  7. doctype sirve para indicar al navegador qué tipo de documento está viendo y qué versión específica del lenguaje se está empleando.
  8. La etiqueta <html> representa la raíz de un documento HTML y contiene todos los demás elementos HTML (excepto la etiqueta <!DOCTYPE>).
  9. Cabecera del documento web.
  10. Cuerpo del documento web.

Comentarios

Los comentarios en HTML son anotaciones en el código, que no se muestran en el navegador y sirven para la comprensión y mantenimiento del código.

Los comentarios en HTML se encierran entre las etiquetas <!-- y -->

<!-- Esto es un comentario dentro de un documento _HTML_ -->
<!--
 /$$   /$$ /$$$$$$$$ /$$      /$$ /$$      
| $$  | $$|__  $$__/| $$$    /$$$| $$      
| $$  | $$   | $$   | $$$$  /$$$$| $$      
| $$$$$$$$   | $$   | $$ $$/$$ $$| $$      
| $$__  $$   | $$   | $$  $$$| $$| $$      
| $$  | $$   | $$   | $$\  $ | $$| $$      
| $$  | $$   | $$   | $$ \/  | $$| $$$$$$$$
|__/  |__/   |__/   |__/     |__/|________/
 -->                                         
<!--¿Te están entrando ganas de hacer ASCII Art?  -->
Actividad

📝 AA4.6 Plantilla metadatos

(C.ESP2 / CE2.4 / IC1-3p)

Crea un nuevo documento HTML, y llámalo plantillaMetadatos.html. Dentro, añade una estructura básica de las etiquetas HTML para que el documento tenga lo siguiente:

  • Un comentario al principio del documento con tu nombre
  • Un título que sea “Mi primera página HTML”
  • Un juego de caracteres ISO-8859-1 o UTF-8.
  • Información sobre el autor.
  • Configurar el área visible de la página web para que se visualice correctamente en otros dispositivos.
  • Un párrafo (en el body) con tu nombre.

Guarda la página y prueba a abrirla con un navegador para comprobar que se ve correctamente (incluyendo los acentos que pueda haber).

Actividad Refuerzo

🔨 AAR4.7 Refuerzo V/F

(C.ESP2 / CE2.4 / IC1-3p)

Indica si las siguientes afirmaciones son verdaderas o falsas y corrige las falsas:

  1. HTML es un lenguaje de programación.
  2. La etiqueta <main> puede aparecer varias veces en un documento.
  3. La metainformación se coloca dentro de <body>.
  4. <header> solo puede usarse una vez en una página.
  5. <img> es una etiqueta unitaria.
  6. El contenido visible de una web va dentro de <body>.
Solución
  1. HTML es un lenguaje de programación.❌ FALSO → HTML es un lenguaje de marcado, no de programación.
  2. La etiqueta <main> puede aparecer varias veces en un documento. ❌ FALSO → Solo puede existir un <main> por documento HTML.
  3. La metainformación se coloca dentro de <body>. ❌ FALSO → La metainformación va dentro de <head>.
  4. <header> solo puede usarse una vez en una página. ❌ FALSO → Puede usarse varias veces (por ejemplo, en una sección o artículo).
  5. <img> es una etiqueta unitaria. ✅ VERDADERO
  6. El contenido visible de una web va dentro de <body>. ✅ VERDADERO
Actividad Refuerzo

🔨 AAR4.8 Refuerzo Identificación visual

(C.ESP2 / CE2.4 / IC1-3p)

Entrega una captura de una página web real (noticia, tienda online, blog…) y pide que identifiquen:

  • Header
  • Nav
  • Main
  • Article
  • Aside
  • Footer
Solución

(La respuesta depende de la web elegida, pero debe identificarse algo equivalente a:)

  • Header → Parte superior con logo, nombre de la web o título principal.
  • Nav → Menú de navegación con enlaces (Inicio, Contacto, Noticias…).
  • Main → Zona central con el contenido principal.
  • Article → Cada noticia, entrada o bloque de contenido independiente.
  • Aside → Barra lateral con información adicional o enlaces relacionados.
  • Footer → Parte inferior con contacto, redes sociales, copyright, etc.

✔️ Se considerará correcta si los elementos están bien justificados, aunque el diseño visual sea distinto.

Actividad Refuerzo

🔨 AAR4.9 Refuerzo Relaciona columnas

(C.ESP2 / CE2.4 / IC1-3p)

Relaciona cada etiqueta con su función:

Etiqueta Función
<meta charset>
<nav>
<article>
<footer>
<title>
Solución
Etiqueta Función
<meta charset> Indica la codificación de caracteres del documento
<nav> Define un menú de navegación
<article> Representa un contenido independiente (noticia, entrada…)
<footer> Define el pie de página
<title> Define el título del documento que aparece en el navegador

Referencias