2 tags HTML que no conocias <base> y <abbr>

19-11-2015 - Andrés Cruz

2 tags HTML que no conocias <base> y <abbr>
In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

En la API de HTML existen muchas tags o elementos muy poco usados por tener funciones muy específicas y por lo tanto no son tan famosos pero que son iguales útiles; hoy veremos un par de tags HTML que puede que no conozcas:

El elemento <base>

Este elemento define una URL y/o target global al documento que permite sobrescribir los atributos target y/o href que no se encuentren especificados en un elemento <a>.

¡IMPORTANTE! solo puede haber un elemento <base> en el head del documento:

Si tenemos el siguiente código HTML:

    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Elemento base 1</title>
            <base href="https://www.bing.com/" target="_blank">
        </head>

        <body>
            <a href="">Google.com</a>
        </body>
    </html>

Veremos que al precionar sobre el enlace "Google.com" esta nos redirigirá al buscador de Microsoft en la siguiente dirección: https://www.bing.com/.

Ver ejemplo

Si por el contrario, si especificamos la URL en el atributo href del enlace:

    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Elemento base 2</title>
            <base href="https://www.bing.com/" target="_blank">
        </head>

        <body>
            <a href="http://www.google.com/">Google.com</a>
        </body>
    </html>

El enlace nos redirigirá a Google.com aunque al no especificar el target se abrirá el enlace en una pestaña nueva.

Ver ejemplo

El elemento <abbr>

Este elemento simplemente permite definir una abreviación como podemos ver en el siguiente ejemplo:

 <p>El lenguaje de programación <abbr title="PHP Hypertext Pre-processor">PHP</abbr>...</p>

El lenguaje de programación PHP...

El lenguaje de programación PHP...

Consulta la documentación oficial en los siguientes enlaces:

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

!Cursos a!

10$

En Udemy

Quedan días!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!