This article is currently in the process of being translated into Spanish (~99% done).
Your First Webpage
Este es un ejemplo de uno de los documentos más simples de HTML5 que puedes crear. Comienza con el doctype HTML5, seguido del título de la página, y luego algún contenido, en este caso un solo párrafo.
<!DOCTYPE html>
<title>Your first HTML5 Document</title>
<p>Okay, now we’re going somewhere!</p>Deberías tener una idea de cómo se vería esto en un navegador: el título del documento ("Your first HTML5 Document" -> "Tu primer documento HTML5") y el texto ("Okay, now we’re going somewhere!" -> "Bien, ¡Ahora vamos a alguna parte!") escrito en la parte superior izquierda de la página.
La declaración del tipo de documento (doctype) le dice a todos los que están leyendo el documento que el contenido HTML sigue.
<!DOCTYPE html>Si has visto el marcado de documentos HTML anteriores, es posible que hayas visto una declaración doctype que se parece mucho a esto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Incluso los desarrolladores web profesionales copian y pegan este largo doctype de un documento a otro. El nuevo doctype más simple es fácil de recordar y, como no se declara una versión específica, todas las nuevas funciones futuras están disponibles automáticamente en tu página.
¿Para qué es el DOCTYPE?
Pero ¿por qué hay un doctype? Todos los navegadores tienen dos formas diferentes de leer tu documento: modo estándar y modo quirks. Si no les dices qué tipo de documento están manejando, entrarán en el modo quirks. Piensa en esto como la forma antigua de leer tu documento: puede haber algunas fallas y puedes estar seguro de que no todos los navegadores leen tu documento de la misma manera. La declaración de un doctype obliga a los navegadores a entrar en modo estándar: la "nueva" forma de leer tu documento. Usando el modo estándar, la mayoría de los navegadores leerán tu documento de la misma manera y realmente entenderán lo que estás escribiendo.
Para hacer que el documento HTML5 sea más fácil de entender, querrías usar los dos elementos de sección: <head> y <body>. Al usar estas secciones, separas claramente la información acerca de tu página (la cabecera) del contenido real (cuerpo). Usando estos, tu página web se vería así:
<!DOCTYPE html>
<head>
<title>Your first HTML5 Document</title>
</head>
<body>
<p>Okay, now we’re going somewhere!</p>
</body>¿Qué acaba de suceder con la sangría?, podrías pensar. Si deseas o no usar la sangría es tu propia elección, pero visualiza la estructura de tu página y hace que sea más fácil echar un vistazo.
La última cosa que querrías agregar es el elemento <html> y se coloca justo después de la declaración del doctype.
<!DOCTYPE html>
<html>
<head>
<title>Your first HTML5 Document</title>
</head>
<body>
<p>Okay, now we’re going somewhere!</p>
</body>
</html>¡Felicidades, acabas de crear tu primera página web HTML5! ¿Notaste cómo el elemento <p> está dentro del elemento <body>? A eso se le denomina elementos de anidación y es una parte muy esencial de la estructura de HTML. Lo dejaremos por ahora, pero sólo quería presentarte la idea de anidar elementos.
Lo que has aprendido
- Siempre declara el tipo de documento (doctype) - <!DOCTYPE html>
- Usa el elemento <head> para separar la información acerca de tu página
- Usa el elemento <body> para separar el contenido real de tu página web
- Usar <html>, <head>, y <body> es una cuestión de estilo cuando se usa HTML5, pero hace que la estructura de la página sea más clara para ti.
- Usar sangrías en el código lo hace más fácil de comprender
- Puedes anidar un elemento dentro de otro elemento
