Los elementos HTML pueden tener atributos, que contienen información adicional sobre el elemento.

Los atributos HTML generalmente vienen en pares de nombre-valor y siempre van en la etiqueta de apertura de un elemento. El nombre del atributo indica qué tipo de información está proporcionando sobre el elemento y el valor del atributo es la información real.

Por ejemplo, un elemento anchor ( ) en un documento HTML crea vínculos a otras páginas u otras partes de la página. Utiliza el hrefatributo en la etiqueta de apertura para decirle al navegador a dónde envía el enlace a un usuario.

Aquí hay un ejemplo de un enlace que envía a los usuarios a la página de inicio de freeCodeCamp:

Click here to go to freeCodeCamp!

Observe que el nombre del atributo ( href) y el valor (“www.freeCodeCamp.org”) están separados por un signo igual y las comillas rodean el valor.

Hay muchos atributos HTML diferentes, pero la mayoría de ellos solo funcionan en ciertos elementos HTML. Por ejemplo, el hrefatributo no funcionará si se coloca en una abertura.

etiqueta.

En el ejemplo anterior, el valor proporcionado al hrefatributo podría ser cualquier enlace válido. Sin embargo, algunos atributos solo tienen un conjunto de opciones válidas que puede usar, o los valores deben estar en un formato específico. El langatributo le dice al navegador el idioma predeterminado de los contenidos en un elemento HTML. Los valores del langatributo deben utilizar códigos de país o idioma estándar, como el eninglés o el ititaliano.

Atributos booleanos

Algunos atributos HTML no necesitan un valor porque solo tienen una opción. Estos se denominan atributos booleanos. La presencia del atributo en una etiqueta lo aplicará a ese elemento HTML. Sin embargo, está bien escribir el nombre del atributo y establecerlo igual a la única opción del valor. En este caso, el valor suele ser el mismo que el nombre del atributo.

Por ejemplo, el elemento de un formulario puede tener un requiredatributo. Esto requiere que los usuarios completen ese elemento antes de poder enviar el formulario.

Aquí hay ejemplos que hacen lo mismo:

Puede leer más sobre los atributos,, src y roll aquí:

Atributo

Atributo src

Atributo de rollo

Atributo

Ahora aprendamos más sobre algunos otros atributos HTML:

Atributo de alineación P

Importante

Este atributo no es compatible con HTML5. Se recomienda utilizar la text-alignpropiedad CSS.

Para alinear el texto dentro de un

Syntax

Lorem Ipsum...

Attributes

• left - Text aligns to the left
• right - Text aligns to the right
• center - Text aligns to the center
• justify - All lines of text have equal width

Example

Paragraph align attribute example

Img Src Attribute

The attribute refers to the source of the image you want to display. The img tag will not display an image without the src attribute. However, if you set the source to the location of the image, you can display any image.

There is an image of the freeCodeCamp Logo located at //avatars0.githubusercontent.com/u/9892522?v=4&s=400

You can set that as the image using the src attribute.

 Img Src Attribute Example 

The above code displays like this:

The src attribute is supported by all browsers.

You can also have a locally hosted file as your image.

For example, Change my color

function redify(){ let text = document.querySelector('#text'); text.style.color = "red"; }

Using raw JavaScript onclick attribute:

Hello World

Img Align Attribute

The align attribute of an image specifies where the image should be aligned according to the surrounding element.

Attribute Values:

right - Align image to the right left - Align image to the left

top - Align image to the top

bottom - Align image to the bottom

middle - Align image to the middle

For example:

 Img Align Attribute 
This is an example. More text right here 

También podemos alinearnos a la derecha si queremos:

This is another example

Tenga en cuenta que el atributo de alineación no es compatible con HTML5 y debe utilizar CSS en su lugar. Sin embargo, todavía es compatible con todos los principales navegadores.

Atributo de tipo de entrada

El atributo de tipo de entrada especifica el tipo de entrada que el usuario debe poner en su formulario.

texto

Una línea de un texto.

  Login:  

contraseña

Una línea de un texto. El texto se muestra automáticamente como una serie de puntos o asteriscos (depende del navegador y del sistema operativo).

  Password:  

correo electrónico

El HTML comprueba si la entrada coincide con el formato de la dirección de correo electrónico (algo @ algo).

  E-mail address:  

número

Permitir solo entrada numérica. También puede especificar el valor mínimo y máximo permitido. El siguiente ejemplo verifica que la entrada sea un número entre 1 y 120.

  Age:  

radio

El usuario solo puede seleccionar una opción. El grupo de botones de opción debe tener el mismo atributo de nombre. Puede seleccionar automáticamente una opción mediante la checkedpropiedad (en el ejemplo siguiente, se selecciona el valor Azul).

  Red Green Blue 

caja

El usuario puede seleccionar cero o más opciones del grupo de casillas de verificación. También puede utilizar la checkedpropiedad aquí para una o más opciones.

  english spanish french 

botón

La entrada se muestra como botón, el texto que debe mostrarse en el botón está en el atributo de valor.

enviar

Muestra el botón de enviar. El texto que debe mostrarse en el botón está en atributo de valor. Luego de hacer clic en el botón, el HTML hace la validación y si pasa, se envía el formulario.

Reiniciar

Muestra el botón de reinicio. El texto que debe mostrarse en el botón está en atributo de valor. Después de hacer clic en el botón, se eliminan todos los valores del formulario.

Hay más tipos de elementos.

Otros atributos HTML:

atributo src

atributo de rollo

atributo

atributo