GeneralHTMLProgramaciónServidoresTecnologíaWeb

HTML: Estructura básica

La estructura de la página HTML es muy fácil de notar si nos fijamos en la estructura de las páginas HTML, que contienen elementos como <head> o <body> . Por lo tanto, crear un sitio es un proceso de creación y, como creador, debes estar familiarizado con todos los componentes básicos necesarios. Hay mucho que aprender, pero todo comienza con los conceptos básicos esenciales: bienvenido al escenario de etiquetas HTML.

Entre las numerosas etiquetas HTML que forman la estructura lógica de una página, algunas se consideran la base. La estructura se puede dividir en tres secciones principales: <html><head> y <body>.

Eche un vistazo al código de una página HTML simple:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Título de la página</title>
  </head>
  <body>
    <h1>Esto es un encabezado</h1>
    <p>Esto es un párrafo</p>
  </body>
</html>

Si guarda este código en formato HTML ( .html ) y lo abre en su navegador, la página se verá así:

archivo index.html

Esto parece bastante básico, pero con HTML puedes hacer mucho más: personalizar la estructura del texto, gestionar su presentación visual y mostrar párrafos, formularios, imágenes, títulos y tablas. El lenguaje de marcado de hipertexto le permite formatear textos, lo que los hace más amigables para los usuarios de Internet. Es mucho más conveniente leer texto con etiquetas claras y lógicas que leer texto no estructurado.

Para esto se ha creado las llamadas especificaciones que son las normas que rigen cómo debe estaur escrito y estructurado el HTML. Para conocer un poco mas de estas especificaciones, lanzadas en 1993, te recomendamos visitar: https://www.w3.org/wiki/HTML_/_Especificaciones

Volvamos al código del ejemplo anterior y consideremos las etiquetas enumeradas con más detalle.

  • El elemento <!DOCTYPE> especifica el tipo del documento actual: DTD (Definición de tipo de documento) . Es necesario que el navegador comprenda según qué estándar HTML mostrar la página web. Como puede ver, esta es una de las etiquetas que no están emparejadas;
  • La etiqueta <meta> con atributo charset especifica la codificación del documento. Si no se especifica, algunos navegadores pueden mostrar caracteres oscuros en lugar del texto;
  • La etiqueta  <html> indica que es un documento HTML;
  • La etiqueta <head> está diseñada para almacenar elementos que ayudan al navegador y a los motores de búsqueda a trabajar con datos;
  • <title> contiene  el título del documento HTML. Aunque esta etiqueta no es obligatoria, sigue presente en casi todas las páginas web de Internet;
  • La etiqueta <body> define el área de contenido de la página. Envuelve el contenido que se muestra en la ventana principal del navegador;
  • La etiqueta <h1>contiene el título de la página dentro del cuerpo y la etiqueta <p> es responsable de los párrafos. Estas etiquetas no son las secciones principales y se proporcionan aquí como ejemplo, pero es probable que las encuentres útiles en el futuro a medida que pases de lo básico a lo artístico.

Estructura básica de la página HTML
A continuación se muestra una visualización de ejemplo de la estructura básica de la página HTML:

HTML basic structure

Como puedes ver, esta estructura guarda un parecido con nuestra anatomía. Con suerte, esta analogía le ayudará a comprender mejor HTML.

Conclusión

Seguramente, tanto los humanos como las páginas web son mucho más complejos y muestran mucha variación. Las páginas modernas pueden ser muy grandes y contener muchas etiquetas diferentes en su interior <body>, pero su estructura básica siempre sigue siendo la misma. Ahora que lo pienso, esto también es muy humano.

Deja una respuesta

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