Las instrucciones HTML están encerradas entre los caracteres: < y > y las llamamos etiquetas.

La mayoría de las etiquetas HTML requieren una marca de comienzo, cláusula de apertura y otra de finalización, cláusula de cierre.

La estructura básica de una página HTML es:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  Cuerpo de la página.
</body>
</html>

Una página HTML es un archivo que generalmente tiene como extensión los caracteres html. Por ejemplo, podemos llamar a nuestra primera página con el nombre: pagina1.html

Estos son los elementos básicos que toda página HTML debe llevar.

Consideraciones sobre una página HTML

La primera etiqueta DOCTYPE, sirve para informar al navegador acerca de la versión de HTML con la que está codificada nuestra página. Tal como está escrita ejemplo es la de HTML5, y es la más simple si la comparamos con las anteriores.

Descubre más cosas sobre HTML5 en Novedades y estructura de páginas web HTML5

  • Después, la página comienza con la etiqueta:<html> y finaliza con la etiqueta:</html>
  • Las cláusulas de cierre tienen el mismo nombre que las de apertura, más el caracter /

Una página HTML tiene dos secciones muy bien definidas que son la cabecera:

<head>
</head>

Y el cuerpo de la página:

<body>
Cuerpo de la página.
</body>
  • Todo el texto que dispongamos dentro del <body> aparece dentro del navegador tal cual lo hayamos escrito.
  • Todas las páginas tienen como mínimo esta estructura: cabecera y cuerpo.

Otra cosa importante es que el lenguaje HTML no es sensible a mayúsculas y minúsculas, es decir podemos escribirlo como más nos guste, es decir, que da lo mismo escribir <BODY>, que <Body> o <body>, aunque por convención se escriben en la mayoría de los casos en minúsculas.

Aademás, no es necesario que dispongamos cada etiqueta en una línea. Podríamos incluso escribir todas las etiquetas de la página en una sola línea.

Caso práctico:

Copia el código anterior con la estructura básica de la página en un archivo de texto y luego le cambias la extensión de .txt a .html.

Nota: puede que la extensión del archivo no sea visible por defecto en tu equipo, esto se puede cambiar en las opciones de carpeta de Windows.

Una vez hecho eso, el archivo pasa a abrirse de manera predefinida con el navegador web, de forma que, si hemos agregado algo de texto dentro de la etiqueta body, veremos el resultado al abrir la página en el navegador.

Para volver a editar el contenido del archivo tendremos que seleccionar Abrir con.. y emplear un editor de texto como el Block de notas.

Normalmente, en diseño web empleamos editores de código que nos facilitan la escritura de los lenguajes de desarrollo y diseño web.

Uno de los más populares actualmente es Visual Studio Code, aunque este puede ser un poco pesado, ya que está pensado para el uso de otros lenguajes de programación como JavaScript. Si sólo quieres editar HTML y CSS hay muchos otros mucho más livianos como Notepad++ o Bluefish.

Sería genial leer tus experiencias y consejos sobre esto. Comenta y suscríbete a los comentarios para mantenerse al día en la conversación.

Por favor, si te ha gustado, ¡comparte!. Me será de gran ayuda. ¡¡Gracias!!