Estructura y Etiquetas en HTML5

Avatar Tutor | marzo 11, 2022

Html son las siglas para Hyper Text Markup Language, y se utiliza para hacer páginas web con lenguaje marcado, porque combina el hipertexto y el lenguaje marcado. El hipertexto define el vínculo entre las páginas web, mientras que el lenguaje marcado define el documento de texto dentro de la etiqueta que estructura la página web. Aquí veremos un tutorial de Htlml5 básico.

Para empezar, Htlml5 como puedes imaginar es la quinta versión e incluye ciertas mejoras en el marcado disponible para los documentos  y ha introducido interfaces de programación de aplicaciones (API) y Modelo de objetos de documento (DOM).

La quinta versión además ofrece la posibilidad de introducir nuevas funciones multimedia que admiten controles de audio y video mediante el uso de etiquetas <audio> y <video>. También hay nuevos elementos gráficos que incluyen gráficos vectoriales y etiquetas. El contenido semántico ha sido enriquecido con etiquetas como <header> <footer>, <article>, <section> y <figure>.

En html5 hay opciones para arrastrar y soltar, se pueden incluir servicios de geolocalización, se puede hacer instalación de almacenamiento web para guardar datos en el navegador web, el lenguaje puede manejar la sintaxis incorrecta, la declaración DOCTYPE es mucho más sencilla  <!doctype html>, y mucho más. En resumen, html5 ofrece una codificación más fácil.

Estructura html5

Un documento html5 se divide en dos partes:

  • Head: Contiene la información sobre el documento HTML. Por ejemplo, título de la página, versión de HTML, metadatos, enlaces, etc.
  • Body: Incluye todo el contenido que se muestra en la página web.

La estructura básica de html luce así y es el código que toda página web debe tener:

<!DOCTYPEhtml>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

A continuación veamos la explicación completa de cada una de las etiquetas utilizadas en el código html anterior.

Etiquetas html

Las etiquetas HTML son como palabras clave que definen cómo el navegador web formateará y mostrará el contenido. Las etiquetas funcionan como una ayuda para que el navegador web pueda distinguir entre un contenido HTML y un contenido simple.

Las etiquetas HTML contienen tres partes principales: etiqueta de apertura, contenido y etiqueta de cierre. No obstante, algunas etiquetas HTML son etiquetas no cerradas.

Cuando un navegador web lee un documento HTML, lo lee de arriba a abajo y de izquierda a derecha. Con las etiquetas HTML se crean documentos html y se representan sus propiedades. Pero cada etiqueta html tiene propiedades diferentes.

Las etiquetas esenciales son las que vimos en el código html de ejemplo, y pasamos a explicar su función a continuación.

<!DOCTYPE html>

Esta etiqueta indica la versión de html. Actualmente indica que la versión es html5.

<html>

Es el elemento raíz HTML y se usa para envolver todo el código.

<head>

Es la etiqueta que contiene metadatos, título, página CSS, y más. Los elementos que se usan dentro de la etiqueta head son:

  • <style>
  • <title>
  • <base>
  • <noscript>
  • <script>
  • <meta>

<body>

Se utiliza para encerrar todo el contenido de la página web. Desde los textos, las imágenes y hasta los enlaces. Todo el contenido que ves renderizado dentro del navegador está contenido dentro de este elemento.

Dicho esto, debes saber que todas las etiquetas deben encerrarse entre estos corchetes o signos de mayor qué y menor qué < >. Por otro lado, cada etiqueta html se encarga de realizar tareas específicas. Y si utilizas una etiqueta de apertura <tag> también debes utilizar una etiqueta de cierre </tag> al menos en la mayoría de los casos. 

Sintaxis

La sintaxis de las etiquetas en html es la siguiente.

<etiqueta> contenido </etiqueta>

Con esto claro, veamos algunos ejemplos básicos de etiquetas que se utilizan dentro de la etiqueta <body>.

  • <p> Etiqueta de párrafo </p>
  • <h2> Etiqueta de encabezado </h2>
  • <b> Etiqueta en negrita </b>
  • <i> Etiqueta en cursiva </i>
  • <u> Etiqueta de subrayado </u>

Etiquetas html no cerradas

Ya mencionamos que hay casos en los que no hay una etiqueta de cierre. Estas etiquetas pueden ser:

  • <br>: br significa break line, lo que quiere decir que rompe la línea de código. 
  • <hr>: hr significa Horizontal Rule, lo que quiere decir que se utiliza para poner una línea en la página. 

Metaetiquetas

Las metaetiquetas de html5 son:

DOCTYPE, title, link, meta and style.

Etiquetas de texto

Las etiquetas de texto en html5 son:

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>

Etiquetas de enlace

Las etiquetas de link o anclas son:

<a> and <base>

Etiquetas de imágenes y objetos

Son etiquetas que se utilizan para agregar imágenes, galerías, objetos y contenido visual.

<img>, <area>, <map>, <param> and <object>

Etiquetas de listas

Para hacer listas dentro de tu sitio web, ordenadas y desordenadas, se utilizan etiquetas tales como:

<ul>, <ol>, <li>, <dl>, <dt> and <dd>

Etiquetas de tabla

Los elementos de tabla representan datos en dos o más dimensiones. Las etiquetas para esto son:

  • table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption.

Etiquetas de formularios

El elemento HTML form ( <form> ) define que una sección del documento contiene elementos que funcionan como formulario para que el usuario envíe datos. Para ello se utilizan los elementos:

  • form, input, textarea, select, option, optgroup, button, label, fieldset and legend.

Etiquetas de Scripting

Se utilizan para insertar o referenciar un script ejecutable dentro de un documento html. En cuyo caso se utiliza.

  • script and noscript.

Con esto hemos dado un vistazo a la estructura y las etiquetas básicas de html5. También hemos visto las principales etiquetas de contenido que ha introducido la quinta versión de este lenguaje de programación de front-end para hacer la vida de los desarrolladores más fácil. 

Written by Tutor

04:40

Related View More