Curso HTML 3. Estructura básica de un documento HTML

Estructura básica de un documento HTML

Un documento HTML bien construido consta de varias secciones clave que permiten al navegador interpretar correctamente el contenido y los motores de búsqueda indexar la página adecuadamente. A grandes rasgos estas secciones son:

La declaración de tipo de documento (<!DOCTYPE>).
El elemento raíz <html> con atributos de idioma.
La cabecera (<head>) donde van metadatos, enlaces a recursos y título.
El cuerpo (<body>) con todo el contenido visible y semántico.

1. Declaración de tipo de documento (<!DOCTYPE>)

La primera línea de todo documento HTML debe indicar al navegador qué versión de HTML se está usando. En HTML5 la sintaxis es muy sencilla:

Sin esta declaración, los navegadores podrían renderizar en “modo quirks”, provocando inconsistencias.

2. Elemento raíz (<html>)

Después del <!DOCTYPE>, el siguiente contenedor es <html>. Aquí se suelen establecer atributos de idioma y orientaciones adicionales:

lang: idioma principal del documento (por ejemplo es para español).
dir: dirección del texto (ltr izquierda a derecha, rtl derecha a izquierda).

...

3. Cabecera (<head>)

El bloque <head> contiene información no visible directamente en la página, pero fundamental para su correcta interpretación:

Elemento	Atributos	Descripción
<meta charset>	`charset='UTF-8'`	Define la codificación de caracteres para evitar problemas con acentos y símbolos.
<meta name=’viewport’>	`content='width=device-width, initial-scale=1.0'`	Asegura adaptación responsiva en dispositivos móviles.
<title>	–	Texto que aparece en la pestaña del navegador y como título en resultados de búsqueda.
<link rel=’stylesheet’>	`href='styles.css'`	Vincula hojas de estilo externas.
<script>	`src='app.js'`	Incluye archivos JavaScript externos o código inline.

Ejemplo completo de la cabecera:


  
  

  
  

  
  Mi Página de Ejemplo

4. Cuerpo (<body>)

En el <body> va todo el contenido visible: texto, imágenes, videos, formularios, etc. Es recomendable estructurarlo de forma semántica para accesibilidad y SEO:


  
  
    Bienvenido a Mi Sitio
    
      
        Inicio
        Servicios
        Contacto
      
    
  

  
  
    
      Artículo Destacado
      Este es un párrafo de ejemplo con texto resaltado y énfasis.
    

    
      Sección Adicional
      Podemos incluir listas, imágenes y más contenido aquí.
      
        Elemento uno
        Elemento dos
      
    
  

  
  
    © 2024 Mi Sitio Web. Todos los derechos reservados.

5. Ejemplo completo de un documento básico

A continuación un esquema simplificado que reúne todos los elementos anteriores:



  
    
    
    Documento Básico
    
    
  
  
    
      Cabecera
    
    
      Contenido principal aquí.
    
    
      Pie de página

Con esta estructura clara y semántica lograrás páginas más accesibles, fáciles de mantener y mejor indexadas por buscadores.

Curso HTML 3. Estructura básica de un documento HTML

Estructura básica de un documento HTML

1. Declaración de tipo de documento (<!DOCTYPE>)

2. Elemento raíz (<html>)

3. Cabecera (<head>)

4. Cuerpo (<body>)

Artículo Destacado

Sección Adicional

5. Ejemplo completo de un documento básico

Comentarios

Deja una respuesta Cancelar la respuesta