Unidad 12. Estructura de una página web (I)

Al hablar de la estructura de una página web <html> podemos distinguir dos partes principales, la cabecera <head> y el cuerpo <body>. La cabecera contiene información importante para la propia página pero que el usuario no ve directamente (salvo el título), y en el cuerpo está el contenido visible de la página.

En este vídeo explicamos la estructura de una página web:

Vamos a ver las zonas más importantes que hay dentro de ambas partes, para ello utilizaremos el siguiente esquema:

En la cabecera tenemos etiquetas para definir los metadatos <meta> como el juego de caracteres (charset) y el viewport, a continuación el título <title> y enlaces a archivos de hojas de estilo <link> y Javascript <script>. Algunas de estas etiquetas son obligatorias y otras opcionales, pero con reglas en cuanto a donde deben colocarse. Englobando la cabecera y el cuerpo tenemos la etiqueta <html>. Para definir el tipo de documento se utiliza la declaración !DOCTYPE.

Dentro del cuerpo <body> tenemos todo el contenido de la página web, por lo tanto podemos incluir en él prácticamente todas las etiquetas de HTML, sin ninguna regla en cuanto al orden de las etiquetas, sin embargo, es conveniente dar una estructura lógica a la página mediante el uso adecuado de las etiquetas semánticas. Este tipo de etiquetas permiten definir cabeceras <header>, cuerpo principal <main>, secciones <section>, artículos <article>, contenido adicional <aside> y pies <footer>. Dentro de cada una de estas partes podemos colocar las etiquetas que incorporan el contenido, párrafos <p>, cabeceras (h1,h2,...), listas, tablas, imágenes, vídeos, ... Si necesitamos hacer algún tipo de agrupación de etiquetas que no está contemplado por las etiquetas semánticas disponemos de la etiqueta <div> que crea un contenedor sin significado semántico.

Las etiquetas semánticas no conllevan ninguna característica de formato ni de ubicación, pero sí tienen un significado semántico que puede ser interpretado por los buscadores y por otro tipo de programas (lectura por voz, accesibilidad, ...)

Otra forma de representar la estructura de una página web es mediante un árbol de nodos, como puedes ver en la figura siguiente

Cada etiqueta se representa como un nodo del que cuelgan las etiquetas que contine, de esta forma vemos que una página web tiene una estructura de un árbol. Mediante esta representación podemos ver los diferentes niveles en que se encuentran las etiquetas, cuales son hermanas, cuales hijas, descendientes, etc.

En el siguiente ejemplo hemos representado una página web con una estructura similar a la que estamos viendo. El uso de las etiquetas para el contenido principal, la sección y del artículo no está claramente determinado y cada uno lo puede adaptar a sus necesidades, por ejemplo, en este caso el cuerpo principal contiene a las secciones, y estas están formadas por artículos. A lo largo del curso iremos viendo algunas de las combinaciones posibles con las etiquetas semánticas.

<!DOCTYPE html>
<html lang="es">
	<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Título </title>
  <link rel="stylesheet" href="mi_hoja_estilo.css">
  <script src="mi_archivo_utilidades.js"></script>
	...
	</head>
	<body>
	 <header> Cabecera </header>
  <nav> Menú </nav>
  <main> 
		<section>
       <h2> Cabecera de sección 1 </h2>
        <article>
          <h3> Cabecera del artículo 1 </h3>
            <div class="fondo_art_1">
				<p> Primer párrafo del artículo 1 </p>
				<p> Segundo párrafo del artículo 1 </p>
			   </div>
			</article> 
			<article>
          <h3> Cabecera del artículo 2 </h3>
            <p> Párrafo del artículo 2 </p>
        </article>      
			  ...
		</section>
     <section>
       <h2> Cabecera de sección 2</h2>
        	  ...
		</section>
</main> 
<aside> 
    <p> Publicidad </p>  
</aside>
<footer> 
    <p> ©Copyright 2018 aulaClic </p> 
</footer>
	</body>
</html>

También podemos ver una forma de usar el contendor div, en este caso sirve para agrupar párrafos a los que se le quiere dar un formato específico, pero por una cuestión estética, sin significado semántico, por ejemplo para darle un color de fondo diferente, <div class="fondo_art_1">.

A continuación vamos a ver con más detalle cada una de estas etiquetas.

Enero-2019 (V 2.2)

Pág. 12.1

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies