3.3 Estructura

Antes de empezar a crear un documento HTML es importante elegir un editor de texto plano  que resalte la sintaxis HTML, de modo que las etiquetas y atributos destaquen sobre el contenido. Así, se facilita el entendimiento y minimizan los problemas al detectar errores de  formato.

Por ejemplo la ausencia de una etiqueta de cierre.

<p><b>Cierre incorrecto</p></b>

<p><b>Cierre correcto </b></p>

Para mejorar la legibilidad del código  HTML  se recomienda seguir unas pautas, por ejemplo insertar las etiquetas  de apertura y cierre en líneas independientes, además de tabular (desplazar hacia la derecha) el contenido incluido dentro de cada etiqueta.

La estructura de una página HTML está compuesta por los siguientes elementos básicos:

  • <!DOCTYPE html>:los documentos comienzan con esta declaración que indica a los navegadores que tipo de archivo es.

  • <html>: elemento raíz que contiene todo el documento HTML, requiere cierre con </html>. Se compone  se <head> y <body>.

  • <head>: esta etiqueta cabecera contendrá la información  general de la página necesaria para los navegadores o servidores.
    • La única subetiqueta visible al usuario será <title> que  define el título de la página en el navegador.
    • Además consta de otra etiqueta <meta charset=”UTF-8”/> necesaria para indicar al navegador que tipo de codificación de caracteres utiliza el editor. Por ejemplo, se reconocerá las tildes y la letra ñ, así como otros caracteres especiales como €.

  • <body>: contiene la parte visible del documento HTML.

¡ Veamos un ejemplo sencillo!

html2 estructura

Ejemplo de estructura HTML

Objetivos

Texto plano, porque no utilizar un procesador como Word.

El texto plano es un formato de contenido que solo incluye caracteres imprimibles a diferencia del texto con maquetación que incluyen efectos al texto propios de procesadores como LibreOffice Writer o Microsoft Word.

En el punto 2.1 vimos los distintos editores, en esta asignatura trabajarás con Notepad ++. Es muy importante que se guarde el archivo con extensión .html para ser interpretado por el navegador.