¿Qué es un documento HTML? – Estructura, tipos y ejemplos

Definición de un documento HTML

Un documento HTML es un archivo que contiene un lenguaje de marcado de hipertexto. El código HTML se basa en etiquetas, o palabras clave ocultas, que proporcionan instrucciones para formatear el documento. Una etiqueta comienza con un corchete angular y el signo ‘menor que’: ‘ < ‘. La etiqueta termina con un corchete angular y el signo ‘mayor que’ ‘ > ‘. Las etiquetas le indican al programa de procesamiento, a menudo el navegador web, qué hacer con el texto. Por ejemplo, para poner la palabra “Hola” en negrita, usaría la etiqueta de apertura en negrita <b> y luego la etiqueta de cierre en negrita </b>, así:

<b>Hola</b>

HTML está definido por el World Wide Web Consortium, una organización que regula los estándares para Internet. Cada versión de HTML tiene un conjunto de definiciones. Tenga en cuenta que HTML no es un lenguaje de programación. Si bien a menudo nos referimos al marcado HTML como código HTML, los lenguajes de programación requieren el procesamiento de declaraciones lógicas y matemáticas. HTML permite al desarrollador hacer que los documentos de texto parezcan atractivos y agradables. En la mayoría de los casos, la programación en un documento HTML se realiza con JavaScript.

Tipos de HTML

La versión más nueva de HTML, que está ingresando a la industria, es HTML 5. HTML se puede dividir en tres categorías: transicional, estricto y conjunto de marcos. Estos tipos se aplican a cómo se utiliza HTML, no necesariamente a la selección de etiquetas.

Transicional

El transicional es el tipo más común de HTML. Tiene un componente de sintaxis flexible o gramática y ortografía. A lo largo de los años, el HTML de transición se ha utilizado sin restricciones de sintaxis y los navegadores admiten un enfoque de “mejor esfuerzo” para leer las etiquetas. Si las etiquetas están mal escritas, los navegadores no corrigen los errores de los desarrolladores web y muestran el contenido de todos modos. Los navegadores no informan de errores HTML; simplemente muestran lo que pueden. Este es el concepto de “mejor esfuerzo”.

Estricto

El tipo estricto de HTML está destinado a devolver reglas al HTML y hacerlo más confiable. Por ejemplo, el tipo estricto requiere cerrar todas las etiquetas abiertas. Este estilo de HTML es importante en los teléfonos, donde la potencia de procesamiento puede ser limitada. Un código limpio y sin errores ayuda a cargar las páginas más rápido.

Conjunto de cuadros

Finalmente, un conjunto de marcos permite a los desarrolladores web crear un mosaico de documentos HTML donde se pueden conectar varios documentos en una sola pantalla. Esta técnica se utiliza a menudo para crear un sistema de menús. Hace clic en un elemento del menú en el lado izquierdo de la pantalla y solo se vuelve a cargar el lado derecho de la pantalla. El menú permanece en su lugar.

Ejemplos HTML

Echemos un vistazo a algunos ejemplos. Para ejecutar los ejemplos, simplemente cree un documento de texto en su escritorio llamado ‘test.html’. Si está utilizando un programa de Bloc de notas, asegúrese de que la extensión del archivo sea.html, no ‘test.html.txt’. Para hacer esto, use ‘Guardar como’ en el Bloc de notas y luego incluya entre comillas dobles el nombre del archivo ‘test.html’. En su escritorio, verá un ícono con “prueba” como nombre y la imagen en el ícono tendrá una asociación de navegador web.

Si elige omitir la notación del encabezado (y muchos desarrolladores web la omiten), se asumirá el HTML de transición. Nuestro primer ejemplo introducirá una etiqueta <br />. Esta es una etiqueta de nueva línea o una etiqueta de ruptura. Inserte lo siguiente en su documento:

Hola mundo.<br />Este es mi primer documento HTML.

Este ejemplo mostrará el texto en el navegador en dos líneas. “Hola mundo” estará en la primera línea y “Este es mi primer documento HTML” en la segunda línea.

Ahora, agreguemos más variación al ejemplo:

<h2>Hola mundo.</h2><br /><br />Este es mi <i>primer</i> documento HTML

En este ejemplo, “Hola mundo” se mostrará como texto grande. <h2> es una etiqueta de encabezado, que hace que el texto sea grande y en negrita. A continuación, tenemos dos líneas nuevas, luego la palabra “primero” está en cursiva.

Aquí hay otra adición al ejemplo:

<html><body>

<h1>Mi primer título</h1>

<h2>Hola

mundo.</h2><br /><br />Este es mi <i>primer</i> documento HTML

</body></html>

Tenga en cuenta que, aunque en el código HTML hay un nuevo salto de línea después de la palabra ‘Hola’, el navegador mostrará ‘Hola mundo’ en la misma línea. Este es el caso porque el navegador sólo mira las etiquetas HTML, no el estilo del código en sí. Puedes poner muchas líneas nuevas entre ‘Hola’ y ‘mundo’ y seguirán apareciendo en la misma línea.

En este último ejemplo también agregamos las etiquetas <html><body>. Estas etiquetas ayudan a crear contenedores para otro código HTML. Cuando las etiquetas están dentro de contenedores, se puede acceder a ellas mediante otras tecnologías como JavaScript u hojas de estilo en cascada.

Resumen de la lección

Un documento HTML se basa en un archivo que contiene lenguaje de marcado de hipertexto. En HTML, las etiquetas o palabras clave ocultas indican a los programas de procesamiento, a menudo navegadores web, cómo mostrar el texto. Hay tres categorías de HTML: transicional, estricto y conjunto de marcos. El transicional es el tipo más común de HTML, mientras que el tipo estricto de HTML está destinado a devolver reglas al HTML y hacerlo más confiable. Frameset permite a los desarrolladores web crear un mosaico de documentos HTML y un sistema de menús.