comparte el articulo 

Introducción a los elementos y etiquetas de HTML

Actualizado el 04/10/2013 < > 2 Cometarios

Resumen: Un archivo HTML es un archivo de texto normal, salvo por tener etiquetas de formato o marcaje. En HTML, usamos "etiquetas" para crear la estructura de una página web.

¿Qué es el HTML?

HTML es un lenguaje de marcado, y es por mucho el lenguaje más comúnmente utilizado en la Web. Los lenguajes de marcado dan forma a un documento HTML. Determinan qué partes son encabezados, qué partes párrafos, qué partes listas, qué partes enlaces, etc. HTML significa Lenguaje de Marcas de Hipertexto (Hyper Text Markup Language). El HTML fue desarrollado por el científico Tim Berners-Lee en 1990.

Un archivo HTML es un archivo de texto normal, salvo por el hecho de que contiene etiquetas de formato o marcaje. En HTML, usamos "etiquetas" (tags) para crear la estructura de una página web. Estas etiquetas indican al navegador cómo mostrar el texto y las imágenes en el documento. Los archivos HTML deben tener la extensión .htm o .html para que se interpreten correctamente por un navegador como Internet Explorer. Al ser un archivo de texto, se puede crear un archivo HTML utilizando cualquier editor de texto corriente, como el Bloc de notas, WordPad o MSWord, etc.

Etiquetas lógicas en HTML (logical inline tags)

Las etiquetas lógicas HTML están diseñadas para describir (en el explorador) el significado del texto que encierran. Esto tiene un impacto importante en los motores de búsqueda como Google (y en el SEO), puesto que los buscadores analizan esas "etiquetas" para intentar averiguar de qué trata una página web. Hay muchas etiquetas lógicas en HTML, entre otras:

  • <strong>: marca un texto en negrita, denota importancia.
  • <em>: destaca un texto – por lo general hace que los navegadores muestren el texto en cursiva.
  • <span>: una etiqueta de línea neutral. – Para darle un aspecto diferente se usa CSS.
  • <div>: un elemento de bloque neutral. – Para darle un aspecto diferente también se usa CSS.

Aunque estas etiquetas lógicas tienen una forma predeterminada de mostrarse en los navegadores (como Internet Explorer o Firefox), se entiende que el CSS se debería utilizar para darles la apariencia deseada y crear así el diseño de una página web.

Etiquetas de bloque vs etiquetas de línea

En HTML, las etiquetas son "de línea" o "elementos de bloque".

Elementos de bloque en HTML (block elements)

Un elemento de bloque digamos que existe en su propia caja virtual y está siempre seguido por un salto de línea (un enter). En otras palabras, un elemento en bloque rompe el flujo del texto para crear un espacio propio alrededor de sí mismo que ningún otro elemento puede invadir.

elemento de bloque en html

Elementos de línea en HTML (inline elements)

Las etiquetas de línea (o elementos de línea), en cambio, sí forman parte del "flujo" del texto en el que se insertan y no forman esa caja virtual de la que hablábamos, ni tienen saltos de línea. Los elementos de línea siguen el flujo normal del texto. Por ejemplo en el siguiente texto:

Este es un ejemplo de un elemento de línea en HTML.

El texto en negrita está contenido dentro de un elemento de línea o inline tag, en este caso <strong>. Aquí el código:

<p>Este es un ejemplo de un <strong>elemento de línea</strong> en HTML.</p>

Así, un ejemplo de una etiqueta de bloque es un <div> (caja) ó un <p> (párrafo) y un ejemplo de una etiqueta de línea es la <b> (negrita). Para entender este concepto lo más sencillo es probar lo que sucede en un texto cuando se introducen ambos, haz la prueba.

Publicado el 30/12/2009, última actualización 04/10/2013.

Licencia: Contenido propiedad de LaWebera.es. Prohibida su copia.

Autor: Verónica Milán

URL: LaWebera.es - Diseño de Sitios Web

Añadir Comentario (Subir al texto)

2 Cometarios

  1. Manejo de fuentes con Adobe Dreamweaver

    […] elemento seleccionado), una clase, un ID o una etiqueta. Si seleccionamos cambiar la fuente de una etiqueta, en el caso que tomamos como ejemplo, cambiaremos las fuentes de todas las etiquetas h1 del […]

    Lunes, 5 de abril 2010

  2. Introducción al uso de capas con CSS y XHTML / HTML

    […] con el documento HTML. Luego se encuentra el cuerpo del documento (todo lo que está dentro de las etiquetas <body> y </body>) donde habremos colocado tres capas, una llamada “capa” y dos […]

    Miércoles, 7 de abril 2010

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras