HTML Step by Step

Estructura básica

Partes de una etiqueta

Etiqueta

Atributos en HTML

Los atributos HTML proporcionan información adicional a los elementos HTML sobre cómo se debe procesar o mostrar el contenido.

HTML align Attribute

Syntax

Valores

Leftizquierda
Center
Right
Justify

Atributos universales clásicos

Los atributos universales clásicos están contemplados en la mayoría de las etiquetas HTML. Estos son los más conocidos:

Atributo HTMLDescripciónEjemplo
idSirve para identificar de forma individual a cada elemento HTML.id=»ejemplo»
classPermite asignar un elemento a una o varias clases.class=»coches»
styleDefine el estilo de un elemento HTML y puede determinar, por ejemplo, su color, fuente o tamaño.style=»color: blue; font-size: 2em»
titleContiene información adicional sobre el contenido de un elemento; se muestra, por ejemplo, en una ventana separada cuando se pasa el ratón por encima del elemento en cuestión.title=»texto de ejemplo»
langEstablece el idioma base de un documento.<html lang=»es»>
dirDefine el sentido de lectura de un texto, bien sea de izquierda a derecha o viceversa.<html dir=»ltr»>ejemplo</html>

Atributos HTML específicos

Existen numerosos atributos HTML específicos para definir elementos concretos. Estos son los más utilizados:

Atributo HTMLDescripciónEjemplo
altMuestra un texto alternativo si no se puede cargar o mostrar una imagen.<img src=»https://www.ionos.es/digitalguide/cocherojo.jpg» alt=»Coche deportivo rojo en un semáforo.»>
heightEstablece la altura de un elemento en px.<img alt=»el coche rojo» height=»220″>
widthEstablece el ancho de un elemento en px.<img alt=»el coche rojo» width=»220″>
hrefDefine la URL de un enlace.<a href=»https://www.paginaejemplo.es» title=»Más información»>
hreflangEstablece el idioma del documento vinculado.<a href=»https://www.paginaejemplo.es» lang=»es» hreflang=»en»>Información en inglés</a>
targetDefine dónde se debe abrir un enlace.<a href=»https://www.paginaejemplo.es» target=»_blank»>
relDefine la relación entre el documento target y su vínculo.<a rel=»nofollow» href=»https://www.paginaejemplo.es/»>pagina de ejemplo</a>
srcDefine el origen de un elemento.<img src=»https://www.ionos.es/digitalguide/cocherojo.jpg» alt=»el coche rojo»>
autoplayGarantiza que un determinado contenido multimedia se reproduzca automáticamente; sin embargo, la mayoría de los navegadores pueden anular esta configuración.<reproducción automática de vídeo>
posterDefine una imagen que previsualizar cuando se inserta un vídeo en HTML.<video controls poster=»previsualización.png»>

Nuevos atributos desde HTML5

Desde la introducción de HTML5 y HTML 5.1 hay algunos atributos HTML de nueva incorporación. Entre ellos se encuentran los siguientes:

Atributo HTMLDescripciónEjemplo
contenteditableDefine si el contenido de un elemento puede ser editado; sus posibles valores son true y false.<p contenteditable=»false»>
hiddenAtributo universal que puede ocultar un elemento.<p hidden>Este texto quedará oculto</p>
dropzoneDefine si en el proceso de arrastrar y soltar el elemento este se copia (copy), se enlaza (link) o se mueve (move).<p dropzone=»move»>
draggableAtributo universal que define si el contenido de un elemento puede ser arrastrado y soltado; sus posibles valores son true, false y auto.<p draggable=»false»>
loadingEstablece cómo se cargan los medios externos; los valores permitidos son auto, eager y lazy.<img src=»https://www.ionos.es/digitalguide/cocherojo.jpg» alt=»el coche rojo» loading=»lazy»
spellcheckDetermina si se debe activar un corrector ortográfico; los valores permitidos son true y false.<p contenteditable=»true» spellcheck=»false»>

Atributos de evento

Hay muchos atributos HTML diferentes, que activan eventos en un navegador. Los siguientes atributos HTML son, por lo tanto, solo una pequeña selección de diferentes eventos que pueden ser activados a través del JavaScript incluido en HTML.

Atributo HTMLDescripciónEjemplo
onclickActiva un evento en JavaScript con un clic de ratón.<button onclick=»Ejemplo de función ( ) «>Haz clic aquí</button>
onscrollSe activa al mover la rueda del ratón sobre él.<div onscroll=»Ejemplo de función ( ) «>
onkeydownSe activa cuando se pulsa una tecla.<input type=»text» onkeydown=»Ejemplo de función ( ) «>
onsearchActiva un JavaScript en cuanto se introduce una búsqueda en la ventana de búsqueda.<input type=»búsqueda» onsearch=»Ejemplo de función ( ) «>
onerrorPuede ejecutar un JavaScript en caso de error.<img src=»https://www.ionos.es/digitalguide/cocherojo.jpg» onerror=»Ejemplo de función ( ) «>
oncopySe activa cuando se copia un texto.<input type=»text» oncopy=»Ejemplo de función ( ) » value=»Copia este texto»>
onselectActiva un JavaScript en cuanto se selecciona un elemento del input.<input type=»text» onselect=»Ejemplo de función ( ) » value=»Texto de ejemplo»>

Atributos de datos

Además de los atributos HTML mencionados anteriormente, existen otra serie de atributos que solo pueden evaluarse a través de un script o utilizarse con CSS. De esta manera se puede proporcionar información que no se va a mostrar de forma visual. Estos atributos HTML siempre comienzan con data-. Puedes definirlos con setAttribute y leerlos con getAttribute. Los motores de búsqueda tampoco analizan estos atributos HTML. Para los atributos de datos solo se permiten letras minúsculas, números, guiones, puntos y dobles puntos.

Valor
Contenido de la etiqueta
Cierre de la etiqueta

Etiquetas semánticas de maquetación

HTML «block-level» elements

List of all HTML «block-level» elements.

Here are the block-level elements in HTML:

<h1>,<h2>,<h3>,<h4>,<h5>,<h6> – Headings
<p> – Paragraphs
<hr> – Horizontal rule
<address> – Address information
<article> – Article content
<aside> – Sidebar content
<blockquote> – Block quotations
<canvas> – Drawing area
<dd> – Description in a description list
<div> – Generic container
<dl> – Description list
<dt> – Term in a description list
<fieldset> – Group of related form elements
<figcaption> – Caption for a figure
<figure> – Image or media with a caption
<footer> – Footer of a section or page
<form> – HTML form
<header> – Header of a section or page
<li> – List item
<main> – Main content of a document
<nav> – Navigation links
<noscript> – Alternate content when JavaScript is not enabled
<ol> – Ordered list
<ul> – Unordered list
<pre> – Preformatted text
<section> – Standalone section in a document
<table> – Table
<video> – Video content


HTML «Inline» elements

Tablas


Formularios
Listas

imput
select
Imagenes

Deja un comentario

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