Estructura básica de HTML

Josetxu 0 HTML BásicoResponsive

Todo documento HTML debe tener una estructura específica que se puede separar en cuatro partes bien diferenciadas:

El DOCTYPE, y las etiquetas html, head y body.

  • El DOCTYPE, es el tipo de documento.
  • La etiqueta html, es donde irá nuestro código.
  • La etiqueta head, es el encabezado de la página.
  • La etiqueta body, es donde irá el contenido de la página.

Este es el aspecto de un documento HTML básico:

<!DOCTYPE html>
<html>
  <head>
    <title>Estructura HTML</title>
  </head>
  <body>
    <div>Hola Mundo</div>
  </body>
</html

Ahora vayamos por partes…

DOCTYPE

El DOCTYPE es la declaración del tipo de documento.

Dependiendo de lo que queramos para nuestra página web el tipo de documento debe ser uno u otro. Hay múltiples opciones para el DOCTYPE dependiendo de si nuestra página está en HTML5, HTML4, XHTML… puede ser Strict, Transitional, Frameset….

A continuación dejo unos ejemplos, aunque también puedes echar un vistazo al W3C.

El moderno HTML5 lo ha resumido al mínimo necesario, bastará con poner:

<!DOCTYPE html>

En HTML 4.01 Transitional sería:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//ES" "http://www.w3.org/TR/html4/loose.dtd">

Otro ejemplo con XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

html

La segunda parte de la estructura es la etiqueta html.

Debe tener etiqueta de apertura y etiqueta de cierre. Indica que todo lo que está entre las etiquetas va escrito en código HTML (fácil, ¿no?).

<!DOCTYPE html>
<html>
  <head>
    <title>Estructura HTML</title>
  </head>
  <body>
    <div>Hola Mundo</div>
  </body>
</html>

head

La tercera parte es la etiqueta head.

Debe tener etiqueta de apertura y etiqueta de cierre. Es donde debemos poner el título de la página, los scripts, los estilos css, metatags, etc.. A su vez va contenida dentro de la etiqueta html.

<!DOCTYPE html>
<html>
  <head>
    <title>Estructura HTML</title>
    <link media="all" type="text/css" href="css/style.css" rel="stylesheet"/>
  </head>
  <body>
    <div>Hola Mundo</div>
  </body>
</html>

body

La cuarta parte de la estructura es la etiqueta body.

Debe tener etiqueta de apertura y etiqueta de cierre. Es donde realmente pondremos el contenido y los elementos de la página y también va a su vez dentro de la etiqueta html.

<!DOCTYPE html>
<html>
  <head> 
    <title>Estructura HTML</title>
  </head>
  <body>
    <h1>Mi página web</h1>
    <div>Hola Mundo</div>
  </body>
</html>

Y con esto ya tenemos una estructura básica (muy básica) de un documento HTML.

HTML BásicoResponsive

Deja un Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *