Imprimir este CapítuloImprimir este Capítulo

2D. HTML correcto y accesible

5. HTML

5.1. Sintaxis

HTML es un lenguaje de etiquetas.

A través de las etiquetas vamos definiendo los elementos del documento (enlaces, párrafos, imágenes, etc.).

  • Una etiqueta se abre: <ejemplo>
  • Y se cierra: </ejemplo>

Por ejemplo: la etiqueta para un párrafo es "p".

Si quisiese escribir un párrafo en HTML, abriría la etiqueta, introduciría el texto del párrafo y cerraría la etiqueta. Así:

<p>Soy un párrafo.</p>

Partes de un documento HTML

Las más importantes son:

  • Cabecera (head)
  • Cuerpo (body)

Un documento HTML contiene ambas, de manera que su estructura más básica sería:

<html>
    <head></head>
    <body></body>
</html>

En la etiqueta HEAD se incluirán los encabezados (título de la página -etiqueta “title”-, metainformación y otros elementos que veremos más adelante, como la llamada a las hojas de estilo CSS.

En la etiqueta BODY irá, como su propio nombre indica, el cuerpo de la página (los párrafos, las imágenes, las listas, etc.).

Y tanto HEAD como BODY forman parte del HTML (están dentro de la etiqueta HTML).

Ya estamos en condiciones de entender este código:

<html>
    <head>
        <title>Ejemplo 1</title>
    </head>
    <body>
        <h1>Un ejemplo sencillo de HTML</h1>
        <p>Hola.</p>
        <p>Te doy la bienvenida al maravilloso mundo del HTML.</p>
    </body>
</html>

Nuestra primera página web

Copiad el código anterior, pegadlo en un documento en blanco del Bloc de notas, guardadlo con extensión .html (ejemplo: ejemplo_1.html) y abridlo con un navegador (Firefox, Safari, Opera, Google Chrome, Internet Explorer...).

Eso es una página web. Como vemos, lo que hemos escrito en el “title” se ve en la parte superior del navegador (tomemos nota de este detalle: se volverá a hablar de eso cuando se trate de la “explotación de las tecnologías SEO”).

La finalidad de este curso no es convertirse en un experto en HTML, sino aprender lo suficiente para sacar partido a las herramientas de EducaMadrid para conseguir hacer páginas semánticamente correctas y con el mayor nivel de accesibilidad posible.

Sin embargo, saber algo más de HTML es muy recomendable. A mayor conocimiento, mayor control de nuestras páginas, de su apariencia y de su nivel de accesibilidad.

Para saber más