100 etiquetas html pdf

100 etiquetas de HTML y su función (con PDF)

Publicado el | Escrito por Oier Bravo

¡Bienvenidos a de la mano de este artículo sobre las 100 etiquetas de HTML y su función! Si eres nuevo en el mundo del desarrollo web y quieres aprender a crear sitios web, este post es perfecto para ti. HTML es el lenguaje de marcado más utilizado en la creación de páginas web, y conocer las etiquetas básicas es esencial para comenzar a trabajar en este campo.

En este artículo, nos centraremos en las 100 etiquetas de HTML más utilizadas. Aprenderemos que cada una tiene una función y una sintaxis únicas.

Las etiquetas HTML se dividen en dos categorías principales: las etiquetas de contenido y las etiquetas de formato. Las de contenido se utilizan para identificar diferentes tipos de contenido en una página web, como texto, imágenes, videos y enlaces. Las de formato, por otro lado, se utilizan para aplicar diferentes estilos y diseños a los elementos de contenido.

En este artículo, exploraremos estas etiquetas y muchas más, proporcionando una descripción detallada de su sintaxis y su función en la creación de páginas web. Aprender sobre estas etiquetas es una herramienta valiosa para cualquiera que esté interesado en el desarrollo de páginas web.

Además, puedes descargar en el siguiente botón un documento PDF con las 100 etiquetas de HTML y su explicación:

Etiquetas para la base del documento

EtiquetaDescripciónAtributos
<!DOCTYPE>Tipo de documento HTML.–
<html>Documento HTML.lang
<head>Información sobre el documento HTML.–
<body>Define el cuerpo del documento.–
<title>Título del documento.–
<meta>Metadatos del documento HTML.charset, name, content
<base>Define la URL base para todas las URL relativas en un documento.href, target
<link>Conecta un documento HTML con una hoja de estilo externa.href, rel, type
<style>Define información de estilo para un documento HTML.type, media
<details>Define detalles adicionales que el usuario puede ver o esconder.–
<summary>Encabezado visible para el elemento <details>.–
<!– –>Permite escribir un comentario.–

Etiquetas para dividir secciones

EtiquetaDescripciónAtributos principales
<div>Contenedor genérico de sección.–
<section>Sección de contenido temático.–
<article>Contenido independiente y autónomo.–
<aside>Contenido relacionado pero no central.–
<header>Encabezado del contenido o sección.–
<footer>Pie de página del contenido o sección.–
<nav>Grupo de enlaces de navegación.–
<main>Contenido principal del documento.–

Etiquetas para crear textos

EtiquetaDescripciónAtributos
<p>Define un párrafoalign
<h1> – <h6>Define encabezados de distintos tamañosalign
<hgroup>Grupo de encabezado (<h1> a <h6>)–
<a>Define un enlacehref, target, download, rel, type, hreflang, accesskey, tabindex
<strong>Define texto en negrita–
<em>Define texto enfatizado–
<u>Define texto subrayado–
<del>Define texto tachado–
<sup>Define texto sobrescrito–
<sub>Define texto subíndice–
<blockquote>Define una cita largacite
<q>Define una cita cortacite
<pre>Define un bloque de texto preformateado–
<abbr>Define una abreviaturatitle
<address>Define información de contacto–
<cite>Define un título de trabajo–
<bdo>Define la dirección del textodir
<mark>Define el texto resaltado–
<span>Incluye texto en línea
<small>Define el texto pequeño–
<time>Define una fecha/horadatetime
<var>Define una variable en el texto–
<dfn>Define el término de una definición–
<bdi>Aísla una parte del texto para que tenga un formato diferente–
<br>Salto de línea–
<wbr>Define un posible salto de linea–
<hr>Cambio de temática a partir de una línea dibujada–

Etiquetas para listas

EtiquetaDescripciónAtributos
<ul>Una lista desordenada.type, start, reversed
<ol>Una lista ordenada.type, start, reversed
<li>Un elemento de lista dentro de una lista desordenada o ordenada.value
<dl>Una lista de definición.–
<dt>Un término (un nombre o un concepto) dentro de una lista de definición.–
<dd>La definición (el significado o la descripción) de un término dentro de una lista de definición.–

Etiquetas para tablas

EtiquetaDescripciónAtributos
<table>Crea una tablaborder, cellpadding, cellspacing, width
<caption>Agrega un título a la tabla–
<th>Define una celda de encabezado en una tablacolspan, rowspan
<tr>Define una fila en una tabla–
<td>Define una celda en una tablacolspan, rowspan
<thead>Agrupa el contenido del encabezado en una tabla–
<tbody>Agrupa el contenido del cuerpo en una tabla–
<tfoot>Agrupa el contenido del pie de página en una tabla–
<col>Define las propiedades para una o más columnas de una tablaspan
<colgroup>Define un grupo de columnas en una tablaspan

Etiquetas para multimedia y scripts

EtiquetaDescripciónAtributos
<script>Define un script en JavaScript u otro lenguaje de scriptsrc, type, async, defer, crossorigin
<noscript>Define un contenido alternativo para navegadores que no admiten scriptsNinguno
<canvas>Define un área para gráficos dinámicos y dibujos, utilizando scripts (por ejemplo, JavaScript)width, height
<audio>Define un archivo de sonido o música, que se reproduce cuando se carga la página websrc, preload, autoplay, loop, controls
<video>Define un archivo de video, que se reproduce cuando se carga la página websrc, width, height, poster, preload, autoplay, loop, controls
<source>Define múltiples recursos de medios para elementos multimedia como audio y videosrc, type, media
<track>Define un texto de título o subtítulo para elementos multimedia como audio y videosrc, srclang, label, default
<iframe>Define un marco en línea en el que se puede cargar una página web diferentesrc, width, height, frameborder, scrolling
<embed>Define un contenido integrado, como un plugin de Flashsrc, type, width, height
<object>Define un objeto incrustado en un documento HTML, como una imagen, un video o un archivo de audiodata, type, width, height, name
<param>Define un parámetro para un objetoname, value
<map>Define una imagen como un mapa de imagenname
<area>Define una región de un mapa de imagenshape, coords, href, alt
<progress>Define una barra de progreso para tareas largas en curso, como descargas o carga de archivosvalue, max
<meter>Define un valor escalar dentro de un rango conocido o un valor fraccionalvalue, min, max, low, high, optimum
<code>Define un fragmento de código de computadoraNinguno
<kbd>Define texto de tecladoNinguno
<samp>Define la salida de una muestra o ejemplo de un programa de computadoraNinguno
<var>Define una variable en un contexto de computadoraNinguno

Etiquetas para formularios

EtiquetaDescripciónAtributos
<form>Crea un formulario HTML.action, method, target
<input>Define un campo de entrada.type, name, value, placeholder, required, autofocus, disabled
<textarea>Define un área de texto para entrada de datos.name, rows, cols, placeholder, required, autofocus, disabled
<select>Define una lista desplegable.name, multiple, size, required, autofocus, disabled
<option>Define una opción en una lista desplegable.value, selected, disabled
<label>Define una etiqueta para un elemento de formulario.for
<fieldset>Agrupa elementos de formulario.–
<legend>Define una leyenda para un elemento de formulario agrupado.–
<button>Define un botón de formulario.type, name, value, autofocus, disabled
<datalist>Define una lista de opciones predefinidas para un campo de entrada.id
<optgroup>Agrupa opciones en una lista desplegable.label, disabled
<input type=»radio»>Define un botón de radio.name, value, checked, required, autofocus, disabled
<input type=»checkbox»>Define una casilla de verificación.name, value, checked, required, autofocus, disabled
<input type=»submit»>Define un botón de envío de formulario.name, value, formaction, formmethod, formtarget, formenctype, autofocus, disabled
<input type=»reset»>Define un botón para restablecer el formulario.–
<input type=»image»>Define una imagen como botón de envío de formulario.src, alt, name, value, formaction, formmethod, formtarget, formenctype, autofocus, disabled
<input type=»hidden»>Define un campo oculto en el formulario.name, value

100 etiquetas en HTML: conclusión

La comprensión de las html etiquetas es esencial para cualquier persona que desee adentrarse en el mundo del desarrollo web. Cada una de estas etiquetas desempeña una función específica, y saber cuándo y cómo usarlas correctamente es la clave para crear páginas web estructuradas y accesibles. A lo largo de este artículo, hemos explorado una variedad de etiquetas en HTML, brindando a los lectores una visión clara de su utilidad y aplicación práctica en diferentes contextos de diseño web.

Para aquellos interesados en profundizar aún más, hemos compilado una lista exhaustiva de 100 códigos HTML, que incluye no solo las etiquetas más comunes sino también algunas menos conocidas que pueden ser de gran ayuda en proyectos más complejos. Este recurso es una referencia rápida para desarrolladores que buscan refrescar su memoria o incorporar nuevas etiquetas en su flujo de trabajo.

Además, entendiendo la necesidad de tener acceso a esta información de manera conveniente y eficiente, hemos creado un documento 100 códigos HTML PDF. Este archivo se ha diseñado para ser descargado, impreso y consultado en cualquier momento, proporcionando así una guía práctica que puede ser de gran ayuda durante el desarrollo de proyectos web, tanto para novatos como para profesionales experimentados.

Finalmente, es importante destacar que cada una de estas 100 etiquetas de HTML y su función han sido descritas con detalle en nuestras secciones anteriores. Con este conocimiento, los desarrolladores pueden asegurarse de que están utilizando el código de manera adecuada, optimizando así la estructura de sus sitios web y mejorando la experiencia del usuario. La correcta utilización de las etiquetas es fundamental para el éxito de cualquier página web, y con este compendio, los desarrolladores tienen al alcance de la mano una herramienta valiosa para lograrlo.

0 thoughts on “100 etiquetas de HTML y su función (con PDF)”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *