Cuando comienza a aprender HTML, una de las primeras cosas que se da cuenta es que un sitio web no es solo una unidad; de hecho, está compuesto por docenas o incluso cientos de componentes básicos que se unen para brindarle una experiencia de sitio web.
En HTML, estos bloques de construcción se denominan elementos. Los elementos HTML le dicen al navegador cómo mostrar texto, imágenes y otro contenido de la página, y le brindan al navegador otra información útil. Si desea comprender cómo funcionan los sitios web, debe conocer los conceptos básicos de los elementos HTML.
En esta publicación de blog, presentaremos elementos HTML y le enseñaremos cómo escribirlos correctamente. También enumeraremos algunos de los elementos HTML más populares que utilizará en sus páginas web. Empecemos.
¿Qué son los elementos HTML?
En HTML, un elemento es una sección de un documento HTML. Algunos elementos HTML representan componentes visibles en la página web, como texto, imágenes o botones, mientras que otros marcan diferentes secciones de la página o brindan metainformación sobre el documento.
En el propio código, los elementos HTML se crean con etiquetas. La etiqueta HTML consta de texto entre corchetes angulares (<>). Por ejemplo, el elemento de párrafo HTML (p) se ve así:
ver la pluma Elementos HTML:
por HubSpot (@hubspot) en CódigoPen.
La mayoría de los elementos HTML constan de tres partes:
- La etiqueta de inicio (o etiqueta de inicio) marca dónde se encuentra el contenido del elemento ( en el ejemplo anterior).
- Una etiqueta de cierre (o una etiqueta final) marca el final del contenido del elemento ( arriba). La etiqueta de cierre es idéntica a la etiqueta de apertura, con la adición de una barra diagonal (/) después del primer paréntesis angular.
- El contenido se coloca entre las etiquetas de apertura y cierre del elemento (Este es el texto del párrafo. arriba).
Tenga en cuenta que las etiquetas HTML no distinguen entre mayúsculas y minúsculas. Puedes escribir
cómo y seguirá funcionando. Sin embargo, la mayoría de los programadores escriben el marcado HTML en minúsculas porque es más fácil y consistente.
Elementos HTML vacíos
Si bien la mayoría de los elementos HTML se escriben con una etiqueta de apertura y cierre, algunos elementos constan de una sola etiqueta y no tienen etiquetas ni contenido de cierre. Estos son los llamados elementos en blanco.
Uno de los elementos en blanco que ve con frecuencia es el elemento de salto de línea que agrega un salto de línea entre el texto. El elemento de salto de línea se hace con un espacio en blanco.
etiqueta, que se muestra a continuación:
ver la pluma Elementos HTML:
por HubSpot (@hubspot) en CódigoPen.
Como puede ver, simplemente usando
crea un salto de línea sin tener que cerrar la etiqueta. Otros espacios en blanco comunes incluyen (imagen), , y
atributos HTML
Los elementos HTML también pueden contener atributos. Los atributos son código adicional dentro de la etiqueta de apertura de un elemento que proporciona información adicional sobre el elemento. El atributo puede ser opcional u obligatorio.
Por ejemplo, podemos usar estilo atributo para cambiar el color de nuestro elemento de párrafo.
ver la pluma Elementos HTML:
con estilo por HubSpot (@hubspot) en CódigoPen.
Anidamiento de elementos HTML
Los elementos HTML también se pueden colocar dentro de otros elementos; esto se denomina anidamiento y es clave para la forma en que se ensamblan los documentos HTML.
Volviendo a lo nuestro
Por ejemplo, veamos cómo el elemento ancla que crea el hipervínculo se anida en el texto del párrafo. En este caso, el elemento ancla se coloca entre las etiquetas de apertura y cierre del elemento de párrafo.
ver la pluma Elementos HTML: enlace en un párrafo por HubSpot (@hubspot) en CódigoPen.
También tenga en cuenta que todo el texto en el medio y tiene estilizaciones aplicadas automáticamente para que parezca un hipervínculo.
En este ejemplo, llamamos al elemento de párrafo el elemento «principal» y al elemento ancla el elemento «secundario». Los elementos secundarios también pueden contener elementos anidados y, por lo tanto, ser elementos principales en sí mismos. Puede anidar elementos en tantos niveles como necesite en HTML, siempre que cada elemento principal termine correctamente con una etiqueta de cierre.
De hecho, todos los documentos HTML tienen al menos dos niveles de anidamiento debido a cómo están configurados. Un documento HTML suele tener la siguiente estructura:
<html>
<head>
<!-- metadata goes here -->
</head>
<body>
<!-- page content goes here -->
<p>This is an example paragraph.</p>
</body>
</html>
Desempaquemos lo que vemos aquí: En cada archivo HTML, todos los elementos están anidados dentro etiqueta. Se llama elemento raíz porque contiene todo lo demás en el documento.
por lo general contiene dos hijos inmediatos. Estos son
, etc.).
Puedes poner elementos HTML en él
Para obtener más información sobre por qué el anidamiento es importante en HTML, consulte nuestra Guía de introducción al objeto de modelo de documento en HTML.
Bloquear y elementos HTML incrustados
Al aprender sobre elementos HTML, también es importante distinguir entre elementos de bloque y elementos integrados. La mayoría de los elementos HTML caen en una de estas dos categorías.
Elementos de bloque
Un elemento a nivel de bloque crea una nueva sección en la página. De forma predeterminada, un elemento a nivel de bloque se extiende para llenar el 100 % del área visible (es decir, el área visible de la página web) y siempre comienza una nueva línea.
Los elementos de bloque comunes incluyen
,
abajo (encabezados de página),
(lista desordenada),
(lista ordenada) i .Aquí hay un ejemplo de tres elementos de bloque en una página con un fondo de color para mostrar cómo llenan el espacio.
ver la pluma Elementos HTML: elementos de bloque por HubSpot (@hubspot) en CódigoPen.
Aunque el contenido no cubre todo el ancho de la ventana gráfica, los elementos de bloque sí lo hacen. También tenga en cuenta que, a diferencia del ancho, la altura de cada elemento está determinada por su contenido.
Elementos a nivel de línea
Los elementos en línea existen según su elemento principal. Tanto el ancho como la altura de un elemento en línea están determinados por su contenido. Además, los elementos en línea no comienzan una nueva línea, lo que significa que puede poner muchos de ellos en la misma línea.
Los elementos comunes de nivel en línea incluyen , ![]()
, (subrayado; elemento en cursiva), (pone el elemento en negrita),
Aquí hay otro ejemplo de elementos de bloque con elementos incorporados agregados, para que pueda ver cómo funcionan juntos los dos tipos de elementos.
ver la pluma Elementos HTML: elementos de nivel en línea por HubSpot (@hubspot) en CódigoPen.
Lista de etiquetas HTML
Aunque hay más de 100 elementos en HTML5, en realidad solo necesita saber una docena o dos para escribir HTML de manera efectiva. También ayuda que la mayoría de los nombres de las etiquetas describan lo que hace el elemento, haciéndolos más fáciles de recordar.
Estas son algunas etiquetas HTML comunes que verá en las páginas web:
Etiqueta Descripción ¿Bloque o integrado? … la raíz del documento HTML, que contiene todo lo demás No aplica … contiene metadatos sobre un documento HTML No aplica … contiene el contenido de la página de un documento HTML No aplica …
crea un párrafo de texto en bloque …
,
…
etc.
crea el encabezado de la página; las opciones van desde abajode más importante a menos importante
en bloque ![]()
incrusta la imagen en la página nivel incorporado incrusta un reproductor multimedia en la página y muestra el video nivel incorporado … crea un hipervínculo a partir del texto adjunto nivel incorporado … indica texto subrayado; texto en cursiva por defecto nivel incorporado … indica texto importante; texto en negrita por defecto nivel incorporado crea un salto de línea nivel incorporado …
produce una lista ordenada, normalmente numerada por defecto en bloque …
produce una lista desordenada, generalmente una lista con viñetas por defecto en bloque crea un botón interactivo nivel incorporado … indica el área principal del contenido de la página en bloque … representa el área de encabezado de la página en bloque indica el área de pie de página en bloque indica el área de navegación de la página en bloque … elemento de bloque general en bloque … elemento genérico de nivel en línea nivel incorporado … contiene el título del documento que se muestra en la pestaña de la página No aplica contiene estilo (en formato CSS) para el documento No aplica … indica que el documento HTML utiliza un documento diferente; más comúnmente utilizado para vincular a un archivo CSS externo No aplica … indica cualquier otro metadato relevante No aplica
Aprender elementos HTML
Si lo piensa, es realmente interesante que cada sitio web y sitio web que ha visitado esté compuesto por varios elementos de página, junto con el uso creativo de CSS y JavaScript.
Pero esa es la esencia: crear un sitio web eficaz consiste en aprovechar al máximo los elementos que tiene a su disposición. Y la mejor manera de conocer los artículos es, por supuesto, usarlos. Así que intente crear sus propios sitios web, experimente con diferentes elementos y vea cómo encaja todo.
Aquí hay un ejemplo de tres elementos de bloque en una página con un fondo de color para mostrar cómo llenan el espacio.
ver la pluma Elementos HTML: elementos de bloque por HubSpot (@hubspot) en CódigoPen.
Aunque el contenido no cubre todo el ancho de la ventana gráfica, los elementos de bloque sí lo hacen. También tenga en cuenta que, a diferencia del ancho, la altura de cada elemento está determinada por su contenido.
Elementos a nivel de línea
Los elementos en línea existen según su elemento principal. Tanto el ancho como la altura de un elemento en línea están determinados por su contenido. Además, los elementos en línea no comienzan una nueva línea, lo que significa que puede poner muchos de ellos en la misma línea.
Los elementos comunes de nivel en línea incluyen , , (subrayado; elemento en cursiva), (pone el elemento en negrita),
Aquí hay otro ejemplo de elementos de bloque con elementos incorporados agregados, para que pueda ver cómo funcionan juntos los dos tipos de elementos.
ver la pluma Elementos HTML: elementos de nivel en línea por HubSpot (@hubspot) en CódigoPen.
Lista de etiquetas HTML
Aunque hay más de 100 elementos en HTML5, en realidad solo necesita saber una docena o dos para escribir HTML de manera efectiva. También ayuda que la mayoría de los nombres de las etiquetas describan lo que hace el elemento, haciéndolos más fáciles de recordar.
Estas son algunas etiquetas HTML comunes que verá en las páginas web:
| Etiqueta | Descripción | ¿Bloque o integrado? |
|---|---|---|
| … | la raíz del documento HTML, que contiene todo lo demás | No aplica |
| … | contiene metadatos sobre un documento HTML | No aplica |
| … | contiene el contenido de la página de un documento HTML | No aplica |
… | crea un párrafo de texto | en bloque |
…, …etc. | crea el encabezado de la página; las opciones van desde abajo | en bloque |
| incrusta la imagen en la página | nivel incorporado | |
| incrusta un reproductor multimedia en la página y muestra el video | nivel incorporado | |
| … | crea un hipervínculo a partir del texto adjunto | nivel incorporado |
| … | indica texto subrayado; texto en cursiva por defecto | nivel incorporado |
| … | indica texto importante; texto en negrita por defecto | nivel incorporado |
| crea un salto de línea | nivel incorporado | |
| produce una lista ordenada, normalmente numerada por defecto | en bloque |
| produce una lista desordenada, generalmente una lista con viñetas por defecto | en bloque |
| crea un botón interactivo | nivel incorporado | |
| indica el área principal del contenido de la página | en bloque | |
| representa el área de encabezado de la página | en bloque | |
| indica el área de pie de página | en bloque | |
| indica el área de navegación de la página | en bloque | |
… | elemento de bloque general | en bloque |
| … | elemento genérico de nivel en línea | nivel incorporado |
| contiene el título del documento que se muestra en la pestaña de la página | No aplica | |
| contiene estilo (en formato CSS) para el documento | No aplica | |
| … | indica que el documento HTML utiliza un documento diferente; más comúnmente utilizado para vincular a un archivo CSS externo | No aplica |
| … | indica cualquier otro metadato relevante | No aplica |
Aprender elementos HTML
Si lo piensa, es realmente interesante que cada sitio web y sitio web que ha visitado esté compuesto por varios elementos de página, junto con el uso creativo de CSS y JavaScript.
Pero esa es la esencia: crear un sitio web eficaz consiste en aprovechar al máximo los elementos que tiene a su disposición. Y la mejor manera de conocer los artículos es, por supuesto, usarlos. Así que intente crear sus propios sitios web, experimente con diferentes elementos y vea cómo encaja todo.
