Curso IT Fundamentos HTML 010_Elementos, Atributos
Elementos
| Etiqueta de apertura | Contenido del elemento | Etiqueta de cierre |
|---|---|---|
<h1> | Este es un título | </h1> |
<p> | Este es un párrafo | </p> |
<a href="https://www.zhaojian.net/" title="Enlace"> | Este es un enlace | </a> |
<img src="/images/logo.png" alt="Esta es una imagen"> | Esta es una imagen | |
<br> | Salto de línea |
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8" /> <title>hello HTML</title> </head>
<body> <h1>Este es un título</h1> <p> Este es un párrafo<br> <a href="https://www.zhaojian.net/" title="Enlace">Este es un enlace</a> </p> <img src="/images/logo.png" alt="Esta es una imagen" /> <br /> </body>
</html>[!Resumen]
- Los elementos HTML comienzan con una etiqueta de apertura (inicio) y terminan con una etiqueta de cierre (fin)
- El contenido de un elemento HTML es el contenido entre la etiqueta de apertura y la de cierre
- Algunos elementos HTML tienen contenido vacío (empty content). Estos elementos sin contenido y sin etiqueta de cierre se denominan etiquetas vacías o elementos vacíos, para implementar funcionalidades específicas manteniendo simplicidad y flexibilidad, como:
<br>,<hr>,<img>,<meta>,<input>, etc.- La mayoría de los elementos HTML pueden tener atributos
- Los elementos HTML se suelen llamar etiquetas HTML (HTML tag)
- Los elementos HTML normalmente aparecen en parejas, por ejemplo
<p>y</p>- Los elementos HTML pueden anidar otras etiquetas HTML
- Los elementos HTML no distinguen entre mayúsculas y minúsculas, se recomienda usar minúsculas
Atributos
Los elementos HTML pueden tener atributos (Attribute) que proporcionan más información sobre el elemento o definen ciertos comportamientos del elemento. Los atributos siempre se definen en la etiqueta de apertura y suelen aparecer en la forma “nombre_atributo=valor_atributo”. Por ejemplo, el elemento de enlace (a) puede usar el atributo href para especificar la dirección de destino del enlace:
Ejemplo:
<a href="https://www.zhaojian.net">zhaoJian.Net</a>Resultado:
En el código anterior, el atributo href del elemento a tiene el valor "https://www.zhaojian.net", lo que significa que cuando se hace clic en el enlace, el navegador saltará a esa URL.
Atributos comunes:
id: Proporciona un identificador único para el elemento.class: Proporciona uno o más nombres de clase para el elemento. Diferentes elementos pueden tener el mismo nombre de clase.style: Proporciona estilos en línea para el elemento.title: Añade contenido de título al elemento de enlace.alt: Añade contenido descriptivo al elemento de imagen.
[!Resumen]
- Los atributos siempre aparecen en forma de pares nombre-valor, por ejemplo:
name="value".- Se debe insertar un espacio entre el atributo y el nombre del elemento (o el atributo anterior, si hay más de un atributo).
- Los valores de atributos siempre deben estar entre comillas. Las comillas dobles son las más comunes, pero usar comillas simples también está bien.
- Los atributos y valores de atributos no distinguen entre mayúsculas y minúsculas, se recomienda usar minúsculas.