HTML5 y su estructura básica – PHP paso a paso

8 respuestas

html5

El camino hasta ahora

En el anterior artículo de PHP paso a paso, primera toma de contacto realizamos un página en PHP, aunque nuestro código era muy sencillo:

<?php

echo 'hola mundo';

?>

Como nuestro objetivo es que se acceda a nuestra página desde un navegador web utilizaremos el lenguaje de marcado semántico HTML5

HTML5, lo básico

HTML5 es la versión 5 del lenguaje de marcado HTML. Un documento escrito en HTML tiene una estructura básica como la siguiente:

<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="utf-8" />
		<title>Hola Mundo!</title>
	</head>
	<body>
		<h1>Hola Mundo!</h1>
	</body>
</html>

Analicemos un poco el código:

  • <!DOCTYPE html> Lo primero que nos encontramos es la declaración del tipo de documento que se está mostrando. El DOCTYPE variará según el tipo de documento realizado, en nuestro ejemplo hemos utilizado el doctype del HTML5 que es maravillosamente sencillo.
  • html Tras declarar el tipo de documento, indicamos que iniciamos nuestro documento HTML. Esta etiqueta se cierra cuando finalizamos el documento. Vemos que lleva un atributo lang, esto sirve para indicar el idioma del documento (en nuestro caso español)
  • head En un documento HTML tenemos una cabecera dónde colocaremos los metadatos de la página, el código JavaScript y el CSS que utilizará el navegador para renderizar la página.
  • meta charset Obligatorio en HTML5, informa el juego de caracteres del documento, debería ser siempre utf-8. Como todo metadato debe ir dentro del head
  • title Es un tipo de metadato especial que nos proporciona el título de la página. Por motivos de posicionamiento (SEO) se recomienda que el meta title sea parecido al H1 del documento y a la URL de la página.
  • body En su interior tendremos el contenido de la página.

HTML5, lo nuevo

HTML5 ha venido a solucionar, entre otras cosas, la falta de un criterio para definir el contenido semántico de una página web agregando una serie de etiquetas destinadas a facilitar la estructura del documento desde el punto de vista de su significado.

  • section: Esta etiqueta sirve para agrupar elementos relacionados entre sí de forma temática. Los section creados a nivel del body serán aquellos cuyo contenido de significado a la página, o sea, formen el contenido principal de la misma.
  • article: Esta etiqueta es «la última etiqueta con significado semántico». Habitualmente se utiliza dentro de un section para separar las unidades de contenido con significado semántico.
  • header: Creada para incluir información destinada a ayudar en la navegación. Suele incluir un H1 y, de declararse a nivel de body, la etiqueta nav.
  • nav: Esta etiqueta la utilizaremos para incluir el menú de navegación.
  • footer: Destinada a incluir la información sobre el elemento que lo contiene (autoría, propiedad, enlaces…)
  • aside: Su uso indicado es para agrupar el contenido a visualizar en la página, pero que no forma parte del contenido principal de la página.

Estas nuevas etiquetas permiten varios niveles de anidamiento entre sí. Por ejemplo, un section (por definición del estándar) debe tener un header y un footer, además de los article necesarios, pudiendo incluso tener otros section en su interior.

A nivel de body también podemos tener un header y footer, estando dentro del header la etiqueta nav con el menú del sitio web.

Los aside también pueden estar a nivel de body, section e incluso article.

Todo esto aporta un alto grado de complejidad a la estructura del documento, aunque aporta una enorme flexibilidad para estructurar correctamente el contenido de la página desde le punto de vista semántico.

Otras novedades de HTML5

Una de las novedades que más ruido a generado por la red es la posibilidad de tener más de un H1 por documento.

Hasta la llegada del HTML5 un documento sólo podía tener un H1 (titular de primer nivel), pero con la nueva versión del HTML esto ha cambiado. Como la estructura de HTML5 se basa en el significado semántico, se permite el uso de un H1 para cada una de las etiquetas semánticas básicas, o sea, section y article colocándose habitualmente dentro del header.

También tenemos el hgroup, destinado a agrupar, dentro del header, varios H1, H2, etc.

Sin embargo, nuestra página se hace no sólo para los navegadores, sino que también nos interesa que los motores de búsqueda lo indexen bien y, en este punto, aunque se permitan varios H1 Google sigue recomendando que se utilice un solo H1 indicando que en el caso de que se encuentren varios H1 dentro de una misma página, éstos pasarán a ser interpretados como párrafos (p) perdiendo así todo su significado de posicionamiento.

Nuestro ejemplo en HTML5

Teniendo en cuenta todo lo comentado, vamos a transformar nuestro hola mundo en un documento HTML más completo agregando información para aprovechar al máximo las nuevas etiquetas.

<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="utf-8" />
		<title><?php echo 'Hola Mundo!'; ?></title>
	</head>
	<body>
		<header>
			<h1><?php echo 'Hola Mundo!'; ?></h1>
			<!-- <nav>El men&uacute; si procediese</nav> --> <!-- Etiqueta comentada al no tener men&uacute; -->
		</header>
		<section>
			<article>
				<h2><?php echo 'Nuestra primera p&aacute;gina PHP'; ?></h2>
				<?php echo 'Nuestra primera p&aacute;gina realizada en PHP con HTML5'; ?>
			</article>
		</section>
		<aside>
			<h3><?php echo 'Art&iacute;culos relacionados';?></h3>
			<ul>
				<li><a href="//rolandocaldas.com/php/primera-toma-de-contacto-php-paso-a-paso" target="_blank"><?php echo 'Primera toma de contacto'; ?></a></li>
				<li><a href="//rolandocaldas.com/php/html5-estructura-basica" target="_blank"><?php echo 'HTML5 estructura b&aacute;sica'; ?></a></li>
			</ul>
		</aside>
		<footer>
			<?php echo 'Creado por rolandocaldas.com'; ?>
		</footer>
	</body>
</html>

En el ejemplo podemos ver cómo utilizamos el header para colocar el titular de la página, el footer para poner información de autoría, el aside para información secundaria y la combinación de section y article para colocar el contenido principal de la página.

A nivel de PHP es interesante recalcar cómo el código PHP ha sido encerrado entre <?php y ?> de forma que en un mismo documento tenemos todo el código, partes escritas en PHP y otras en HTML. Esto no es del todo correcto y en artículos futuros profundizaremos en la organización y estructura de nuestro código siguiendo patrones como el MVC (Modelo, Vista, Controlador), pero por ahora nos permitiremos alguna licencia que otra.

Del mismo modo, tampoco tiene mucho sentido en un documento HTML hacer lanzar diferentes echo en PHP destinados a imprimir una simple cadena de texto «al aire». Evidentemente, esto es así porque estamos con los primeros pasos y en próximos artículos empezaremos a acercarnos a utilizar «como es debido» el PHP.

Nuestro rudimentario hola mundo en HTML5

Nuestro rudimentario hola mundo en HTML5

GitHub: PHP paso a paso – HTML5 y su estructura básica

En la próxima entrega

Ya tenemos nuestra página en PHP y sirviendo el contenido en HTML para que el navegador (y los buscadores) pueda interpretar correctamente su contenido.

Lo que vamos a abordar en la próxima entrega será la forma de incorporar la presentación semántica (el aspecto y formato) del documento HTML. Para ello utilizaremos CSS3.

Related posts:

  1. CSS3 básico parte 2 – PHP paso a paso
  2. Variables, constantes y funciones. PHP paso a paso
  3. CSS3 básico parte 1 – PHP paso a paso
  4. PHP paso a paso – Primera toma de contacto

8 pensamientos en “HTML5 y su estructura básica – PHP paso a paso”

  1. Jesus
    Responder ↓

    Gracias por el articulo, aunque me surgió una duda ¿Por qué cuando uso código PHP solo sin embebir funciona, pero al usar HTML ya no funciona? Sé que es muy noob la pregunta pero vengo de Java-Android y ahí todo es más «sencillo».

  3. rolando.caldas Autor
    Responder ↓

    Exacto Jesús, este artículo es parte de una serie de artículos de PHP, por eso no es un HTML al uso y se tiene que guardar como loquesea.php. El servidor web que va a interpretar el fichero PHP, normalmente es el Apache, tiene en su configuración asociada la extensión .php con el programa PHP, por lo que si el fichero termina en .php, Apache llamará al PHP para que le interprete el contenido, si el fichero tiene una extensión .html, para el Apache será un documento HTML al uso, por lo que lo enviará directamente al navegador (por así decirlo) sin pedirle a PHP que interprete nada 😉

    saludos!

  4. Hector Perez
    Responder ↓

    Beunas tare, creo que tengo la misma duda de rolando.caldas, pues si para guardar un archivo HTML5 tengo que guardarlo como archiHTML5.html, ¡como podría php interpretar el «codigo php» si no se reconoce com tal?

    1. rolando.caldas Autor
      Responder ↓

      Hola Hector. Este artículo es una continuación de http://rolandocaldas.com/php/primera-toma-de-contacto-php-paso-a-paso lo que hacemos en este artículo es transformar el fichero index.php que se creó en ese primer artículo, incorporando la estructura de HTML5, pero el fichero se sigue llamando index.php no archiHTML5.html

      En un fichero .html no vamos a escribir código PHP, si escribimos código PHP el fichero lo tendremos que guardar con la extensión .php

      Para ver correctamente el ejemplo de este artículo, tienes que guardar el fichero con el nombre «loquesea.php» o bien eliminar el código PHP y guardarlo como .html

      Si el fichero es .html lo puedes abrir sin problemas con un navegador web, pero si el fichero es .php necesitas tener un servidor web que interprete el PHP. En el primer artículo (http://rolandocaldas.com/php/primera-toma-de-contacto-php-paso-a-paso) tienes una serie de enlaces a manuales útiles para instalar el servidor web y, además, una introducción básica a PHP. Lo ideal es que sigas el primer artículo y, una vez lo termines, leas este.

      Ten en cuenta que aunque en este artículo hablo de la estructura básica de un documento HTML5, está enmarcado en una serie de artículos en los que se explica todo lo necesario para crear un sitio web en PHP, lo que significa que se habla de PHP, HTML5, CSS3, JavaScript y MySQL (aunque aún no esté tan avanzada la serie de artículos).

      Espero que todo esté más claro ahora, saludos!

  5. Chris
    Responder ↓

    Una preguntilla.
    Una web que en su diseño no tiene footer, en el código¿ debe figurar aunque visualmente no aparezca? ¿por qué? Gracias

    1. rolando.caldas Autor
      Responder ↓

      Cuando hablamos de codigo hablamos de estructura y significado semántico el diseño «no importa» aunque el diseño no tenga pié de página propiamente dicho, si la página tiene información que encaja semánticamente como footer debes usar esa etiqueta aunque visialmente no se ubique en el pie. Al igual que en un listado de noticias cada noticia es un article que tendrá un footer con la info del autor o la fecha o los links e info de x comentarios. .. los enlaces para editar el admin etc. Espero no haberte complicado más!

Deja un comentario