Estructura base de HTML con ejemplos
En esta ocasión te mostrare la estructura base de HTML con ejemplos, si estas comenzando en el desarrollo web, lo primero que debes adoptar es la estructura base, ya que conociendo este tema tendrás la libertad de agregar mas y mas elementos, ademas de que podrás colocarlos según tus necesidades.
Elementos de la estructura base de HTML5
La estructura general de una página HTML5 incluye una serie de elementos clave que permiten estructurar el contenido de la página y agregar elementos interactivos. Los elementos básicos de una página HTML5 son:
Doctype: Es una declaración especial que indica el tipo de documento HTML que se está utilizando. Por ejemplo:
<!DOCTYPE html>indica que se está utilizando la última versión de HTML.HTML: Es el elemento raíz de la página web y contiene todo el contenido de la página.
Head: Contiene información sobre la página que no se muestra en la pantalla, como el título de la página, el enlace a hojas de estilo, la descripción y las palabras clave.
Body: Contiene el contenido que se muestra en la pantalla, como texto, imágenes, videos, formularios, etc.
Body
Dentro del body, se pueden utilizar una gran cantidad de elementos HTML para estructurar y organizar el contenido de la página. Algunos de los elementos más comunes incluyen:
Encabezados (heading): Se utilizan para organizar el contenido en títulos y subtítulos, desde
<h1>(el más importante) hasta<h6>.Párrafos (paragraph): Se utilizan para mostrar texto en la página.
Imágenes (image): Se utilizan para mostrar imágenes en la página.
Enlaces (link): Se utilizan para crear enlaces a otras páginas o recursos en línea.
- Listas (list): Se utilizan para crear listas ordenadas (
<ol>) o no ordenadas (<ul>). - Tablas (table): Se utilizan para mostrar datos en una tabla.
- Formularios (form): Se utilizan para recopilar información del usuario.
Estructura base HTML5
Esta estructura incluye el doctype (<!DOCTYPE html>) que indica que se está utilizando la última versión de HTML, seguido del elemento html que contiene todo el contenido de la página. El head incluye información sobre la página que no se muestra en la pantalla, como el título de la página, mientras que el body incluye el contenido que se muestra en la pantalla, en este caso, un encabezado principal (h1) y un párrafo (p).
Ejemplos
Ejemplo incluyendo Header y Footer
En esta estructura, se utiliza el elemento header para incluir el encabezado de la página, que puede incluir un título (h1) y un menú de navegación (nav). El elemento section se utiliza para incluir la sección principal de la página, que puede contener títulos (h2, h3, etc.) y contenido. Por último, el elemento footer se utiliza para incluir el pie de página, que puede contener información de derechos de autor, enlaces a redes sociales, etc.
Ejemplo con un Formulario
En esta estructura, se utiliza el elemento form para incluir un formulario de contacto, que incluye campos para el nombre, email, teléfono y mensaje. Cada campo está incluido en un elemento label que proporciona una descripción del campo y un elemento input que permite al usuario introducir datos. El botón de enviar el formulario se crea con el elemento button, aunque podríamos utilizar input y el atributo type="submit".
Ejemplo con una Tabla
En esta estructura, se utiliza el elemento table para crear una tabla de precios. La primera fila de la tabla (el encabezado) se crea con el elemento thead y cada celda del encabezado se crea con el elemento th. El cuerpo de la tabla se crea con el elemento tbody y cada fila de la tabla se crea con el elemento tr. Las celdas de cada fila se crean con el elemento td.
Ahora ya conoces como es la estructura base de HTML5, en el par de ejemplos que hemos visto, agregamos elementos de formulario, elementos como Header y Footer, y elementos como una Tabla que solemos utilizar para mostrar datos que queremos que sean mejor representados.
