Estructura del documento html
Además de definir partes individuales de su página (como “un párrafo” o “una imagen”), HTML también cuenta con una serie de elementos a nivel de bloque que se utilizan para definir áreas de su sitio web (como “la cabecera”, “el menú de navegación”, “la columna de contenido principal”). Este artículo analiza cómo planificar la estructura básica de un sitio web y cómo escribir el HTML para representar esta estructura.
Secciones básicas de un documentoLas páginas web pueden tener y tendrán un aspecto bastante diferente entre sí, pero todas suelen compartir componentes estándar similares, a menos que la página muestre un vídeo o un juego a pantalla completa, forme parte de algún tipo de proyecto artístico o simplemente esté mal estructurada:
Enlaces a las secciones principales del sitio; suelen estar representados por botones de menú, enlaces o pestañas. Al igual que la cabecera, este contenido suele ser consistente de una página web a otra: tener una navegación incoherente en tu sitio web sólo hará que los usuarios se sientan confundidos y frustrados. Muchos diseñadores web consideran que la barra de navegación forma parte de la cabecera en lugar de ser un componente individual, pero esto no es un requisito; de hecho, algunos también argumentan que tener las dos separadas es mejor para la accesibilidad, ya que los lectores de pantalla pueden leer las dos características mejor si están separadas.
Comentarios
Introducción: HTML son las siglas de Hyper Text Markup Language. Se utiliza para diseñar páginas web utilizando un lenguaje de marcas. HTML es la abreviatura de Hypertext y Markup language. El hipertexto define el enlace entre las páginas web. El lenguaje de marcas se utiliza para definir el documento de texto dentro de la etiqueta que define la estructura de las páginas web. HTML 5 es la quinta y actual versión de HTML. Ha mejorado el marcado disponible para los documentos y ha introducido interfaces de programación de aplicaciones (API) y el Modelo de Objetos del Documento (DOM). Características:
Estructura de las carpetas de las páginas web
Lo que sigue es un extracto de nuestro libro, HTML5 & CSS3 for the Real World, 2ª edición, escrito por Alexis Goldstein, Louis Lazaris y Estelle Weyl. Se venden ejemplares en tiendas de todo el mundo, o puedes comprarlo en forma de ebook aquí.
Más adelante en el libro, nos ocuparemos específicamente de la adición de características CSS3 y otras bondades de HTML5; por ahora, consideraremos qué elementos queremos utilizar para construir el diseño general de nuestro sitio. En esta sección y a lo largo de los próximos capítulos hablaremos mucho de semántica. Cuando usamos el término “semántica”, nos referimos a la forma en que un elemento HTML determinado describe el significado de su contenido.
Antes de decidir qué elementos son apropiados para estas diferentes partes de nuestra página, vamos a considerar algunas de nuestras opciones. En primer lugar, presentaremos algunos de los nuevos elementos semánticos de HTML5 que podrían utilizarse para ayudar a dividir nuestra página y añadir más significado a la estructura de nuestro documento.
Al contrario de lo que normalmente se podría suponer, puedes incluir un nuevo elemento de cabecera para introducir cada sección de tu contenido. No está reservado sólo para la cabecera de la página (que normalmente podrías marcar con <div id=”header”>). Cuando usamos la palabra “sección” aquí, no nos limitamos al elemento de sección real descrito en la siguiente parte; técnicamente, nos referimos a lo que HTML5 llama “seccionar contenido”. Esto significa cualquier trozo de contenido que pueda necesitar su propia cabecera, incluso si eso significa que hay varios trozos de este tipo en una sola página.
Plantilla de estructura Html5
El documento HTML es una página web, que le ayuda a mostrar el contenido en el sitio web. Se compone de etiquetas, que tiene una apertura, así como las etiquetas de cierre. Sin embargo, algunas etiquetas no vienen en pares, es decir, no tienen una etiqueta de cierre. La estructura básica mínima también tiene algunas etiquetas, que usted necesita añadir.doctypeEsta es una declaración de doctype, que comienza el programa HTML y se añade como <!DOCTYPE html>. Se agrega para decirle e instruir al navegador sobre el documento.<htmlLo primero después de la declaración doctype es la etiqueta <html>. Todas las demás etiquetas HTML vienen dentro de la etiqueta <html>…</html> dice. Cada etiqueta dentro de esta etiqueta sigue las reglas de HTML.<head>La etiqueta <head> le ayuda en la adición del título para el documento HTML utilizando la etiqueta <title>…<title>.<body>La etiqueta <body> permite que usted necesita para el contenido del documento HTML. Puede utilizar la etiqueta <p>…</p> para añadir contenido al documento, que es visible en la página web.ExampleLive Demo<!DOCTYPE html>