HTML
HTML
A continuación voy a indicarte cuales son las etiquetas HTML más usadas y también te indicaré su finalidad.
Voy a centrarme en las principales etiquetas y sobre todo las que están soportadas en HTML 5. Ahí van:
<!DOCTYPE html> Indica al navegador que el documento está basado en el estándar HTML5
<html> </html> Representa la raíz de un documento HTML. Todos los demás elementos de la
estructura HTML deben ser recogidos dentro de estas etiquetas.
<head> </head> Representa una colección de metadatos acerca del documento, incluyendo
enlaces a, o definiciones de, scripts y hojas de estilo. El resto de etiquetas de metadatos, irán
recogidas dentro de las etiquetas de apertura y cierre del head. Importante explicar que estos
metadatos del documento, es información para el navegador y no contenido que será visible en la
página web. A excepción de la etiqueta <title> que veremos a continuación.
<title> </title> Etiqueta usada para definir el título de la página web.
<link> Se usa para enlazar recursos externos al documento HTML. El ejemplo más común son las
hojas de estilos CSS.
<meta> Etiqueta usada para definir otros metadatos que no se pueden definir con una etiqueta
HTML especifica. Por ejemplo para definir el autor del sitio, o la descripción del mismo.
<style> </style> Etiquetas usadas para introducir código CSS en línea, es decir, en el propio
documento HTML.
<body> </body> Al contrario que la etiqueta de metadatos <head>, todo lo que quieras mostrar en
la página web debe ir recogido dentro de las etiquetas de apertura y cierre de <body>. Este
contenido será el que se muestre en la web.
<nav> </nav> Usadas para definir el contenido que será la sección de navegación de la web.
<main> </main> Se usa para definir el contenido principal del documento. Solamente puede existir
uno por documento.
<section> </section> Define una sección del documento
<article> </article> Define contenido independiente de la web.
<aside> </aside> Dentro de estas etiquetas suele alojarse el contenido adicional de la web. Suele
ser contenido relacionado con la web pero de poca importancia
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> Son etiquetas HTML muy importantes, ya que son usadas para
jerarquizar el contenido de la web. Las etiquetas se usan para explicar brevemente el contenido
que irá a continuación.
<header> </header> Se usan para definir la cabecera la página web. Suele contener el logotipo,
menú de navegación, etc.
<footer> </footer> Usadas para definir el pie de página.
ETIQUETAS PARA LA AGRUPACIÓN DE CONTENIDO
<table> </table> Etiquetas de apertura y cierre de una tabla. El resto de etiquetas de la tabla han
de ir siempre recogidas entre estas dos etiquetas.
<caption> </caption> Usada para indicar el título de la tabla.
<colgroup> </colgroup> Etiqueta utilizada para agrupar dos o más columnas de una tabla.
<tbody> </tbody> Usada para describir los datos concretos de una tabla.
<thead> </thead> Indica el bloque de filas que describen las etiquetas de las columnas de la tabla.
<tfoot> </tfoot> Indica los bloques de filas que describen los resúmenes, o datos totales de una
columna de una tabla.
<tr> </tr> Se usa para indicar una fila de celdas de una tabla.
<td> </td> Usada para definir una celda de una tabla.
<th> </th> Etiqueta que se usa para definir el encabezado de una celda
<form> </form> Etiqueta de apertura y cierre de un formulario de una página web. El resto de
etiquetas de formulario deben ir siempre recogidas entre estas etiquetas de apertura y cierre de
formulario.
<fieldset> </fieldset> Etiqueta que representa un conjunto o agrupación de elementos de un
formulario. «Pinta» un recuadro alrededor de las etiquetas que estén contenidas dentro del
<fieldset>
<legend> </legend> Etiqueta ligada a <fieldset>. Indica el título del <fieldset>
<label> </label> Se usa para definir el nombre o título de un control del formulario.
<input> Pinta un campo de introducción de datos para el usuario. Es de las principales etiquetas de
un formulario.
<button> </button> Etiqueta utilizada para representar un botón en el formulario.
<select> </select> Input que permite una selección entre un conjunto de opciones.
<option> </option> Etiqueta ligada a <select>. Permite añadir diferentes opciones al <select>
<textarea> </textarea> Añade un campo al usuario para que pueda introducir texto en unas líneas
máximas de texto que el desarrollador puede definir.
TIPOS DE ATRIBUTOS HTML
Existen diferentes tipos de atributos para las etiquetas. Algunos son de ámbito global, mientras que otros
son más específicos y solo son válidos para algunas etiquetas HTML. En general podemos ordenarlos de la
siguiente manera:
Atributos requeridos: son atributos necesarios para la etiqueta HTML. Sin ellos, la etiqueta por si
sola no tendrá el comportamiento esperado.
Atributos opcionales: en este caso, estos atributos son utilizados para modificar la funcionalidad
por defecto de la etiqueta HTML.
Atributos globales: son atributos de ámbito general que pueden ser utilizados en casi cualquier
etiqueta HTML.