Si estas empezando en el mundo del desarrollo web, necesitaras dominar, las etiquetas HTML, más utilizadas, para construir, los documentos, en este articulo, te mostraré, un listado muy completo de todas ellas. Guarda esta página en favoritos, porqué, puede resultarte muy útil. Vamos a verlas.
Antes de entrar en materia, conviene definir, que son las etiquetas html. Las etiquetas HTML, son pequeños bloques de código, que indican al navegador, como debe interpretar el contenido recogido entre dichas etiquetas.
Por ejemplo, si queremos poner, en el documento, un párrafo de texto, hay una etiqueta especifica, para que el navegador interprete ese texto, como un párrafo, y sería esta:
<p>Esto es un párrafo.</p>
Estas etiquetas, cuentan además con atributos que podemos añadirles y que en sí, pueden determinar, como será el comportamiento específico, que tendrá la etiqueta, te remito a un listado de atributos HTML, para manejar con mayor conocimiento, las etiquetas.
Las etiquetas HTML, comienzan siempre con el símbolo < y acaban, con el símbolo >. Entre medias, irá el nombre de la etiqueta que queremos, que el navegador interprete.
Todas las etiquetas HTML, están compuestas por una etiqueta de apertura, y otra, de cierre. Aunque hay excepciones, como por ejemplo la etiqueta para cargar una imagen, <img src="">, ó <br>, que sirve para generar un salto de línea, que no tienen cierre, y son llamadas etiquetas huérfanas, ya que solo necesitan, etiqueta de apertura.
Las etiquetas de cierre, se construyen con una barra '/', justo antes de la propia etiqueta y los símbolos < >, es decir </>
Por ejemplo, si queremos incluir en nuestro documento, una especie de caja contenedora de otras etiquetas, abriremos con la etiqueta de apertura <div>, y cerraríamos con la etiqueta de cierre </div>.
Con esta base, de lo que son, las etiquetas y como implementarlas en nuestro código html, pasemos a ver un listado de las etiquetas, más comunes.
Este es el código html básico, para construir, un documento web, bueno si lo abrieses así, en un navegador, solo verías, una página en blanco, pues verás, que no tiene contenido. Pero si piensas dedicarte a escribir código y para empezar, puedes escribirlo en un block de notas u otro editor de texto plano y te ahorraras de escribir el mismo código, infinidad de veces.
Voy a explicar, cuales son las etiquetas HTML más usadas y su finalidad, me centraré, en las etiquetas principales, y sobre todo, las que están soportadas en HTML5. Estas son:
EtiquetaFinalidadIndica al navegador que el documento está basado en el estándar HTML5, antiguamente esta etiqueta era, mucho más compleja de declarar.
Representa la raíz de un documento HTML. Todos los demás elementos de la estructura HTML deben ser recogidos dentro de estas etiquetas. Metadatos del documento
Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo. El resto de etiquetas de metadatos, irán recogidas dentro de las etiquetas de apertura y cierre del head. Importante explicar que estos metadatos del documento, es información para el navegador y no contenido que será visible en la página web. A excepción de la etiqueta <title>.
Etiqueta usada para definir el título de la página web. Importante, darle significado explicito, pues será, lo que se visualizará, en la pestaña de los navegadores.
Se usa para enlazar recursos externos al documento HTML. El ejemplo más común son las hojas de estilos CSS.
Etiqueta usada para definir otros metadatos que no se pueden definir con una etiqueta HTML especifica. Por ejemplo para definir el autor del sitio, o la descripción del mismo.
Etiquetas usadas para introducir código CSS en línea, es decir, en el propio documento HTML. Es más recomendable, separar, CSS, en archivos externos y enlazarlos con <link>.
Etiqueta que usaremos, para incluir ó enlazar el documento, con código, de programación, generalmente javascript, puede incluirse en el <head> ó dentro del <body>, habitualmente antes de su etiqueta de cierre.
Al contrario que la etiqueta de metadatos <head>, todo lo que quieras mostrar en la página web debe ir recogido dentro de las etiquetas de apertura y cierre de <body>. Este contenido será el que se muestre en la web.
Usadas generalmente, para definir el contenido que será, la sección de navegación de la web.
Se usa para definir el contenido principal del documento. Solamente puede existir uno por documento.
Define una sección del documento
Define contenido independiente de la web.
Dentro de estas etiquetas suele alojarse el contenido adicional de la web. Suele ser contenido relacionado con la web, pero de menor importancia.
Son etiquetas HTML muy importantes, ya que son usadas para jerarquizar el contenido de la web. Estas etiquetas se usan, como encabezados, para explicar brevemente el contenido que irá a continuación.
Se usán para definir, la cabecera de la página web. Suele contener el logotipo, menú de navegación, iconos sociales, etc.
Usadas para definir el pie de página. Suelen contener el copyright, formularios, sección de comentarios, iconos sociales, etc
Etiqueta usada para escribir párrafos de texto.
Etiqueta utilizada para «romper» entre dos secciones de una web. Usada comúnmente como separador.
Usada para pegar texto manteniendo el pre formato propio del texto.
Se usan para indicar que el contenido es texto citado.
Etiquetas para crear una lista ordenada.
Etiquetas para crear una lista desordenada.
Etiquetas que recogen el contenido de un elemento de una lista, sea ordenada o no.
Usada para crear una lista de definiciones.
Representa un término definido por la siguiente etiqueta <dd>.
Se usa para definir los términos listados antes que él.
Indica una figura ilustrada, como parte del documento HTML5.
Utilizada para definir la leyenda de una figura.
Etiqueta común utilizada para crear un contenedor genérico.
Etiqueta utilizada para crear hiperenlaces, internos ó externos, en el documento HTML
Etiqueta para definir una palabra o conjunto de ellas como importantes. Tiene una fuerte importancia en el SEO de la página.
Utilizada para dejar un comentario aparte, del tipo una nota de derechos de autoría, u otros textos que no son esenciales para la comprensión del documento.
Para indicar el título de una obra.
Etiquetas utilizadas para representar un subíndice o superíndice.
Usada para resaltar texto.
Etiqueta HTML sin ningún significado específico. Generalmente se le asignán atributos «class» o «id» para atribuirle ciertas características, con css.
Etiqueta utilizada para crear un salto de línea.
Etiqueta para incrustar, una imágen en la página web.
Es una etiqueta que sirve para anidar otro documento HTML dentro del documento principal.
Usada para integrar una aplicación o contenido interactivo externo que no suele ser HTML. Por ejemplo, videos de Youtube.
Utilizada para llamar, a un recurso externo de la web. Este recurso será tratado como una imágen, o un recurso externo para ser procesado por un plugin.
Se usa para reproducir video en la página web junto a sus archivos de audio y capciones asociadas.
Usada para cargar en una web un archivo de audio o stream de audio.
Permite a autores especificar recursos multimedia alternativos para las etiquetas de <video> o <audio>
Se usa para llamar a una imágen vectorizada.
Se utiliza para representar gráficos ó animaciones a través de secuencias de comandos, osea de forma prográmada, generalmente con javascript.
Etiqueta, que se utiliza, como una especie, de widget de revelación de texto oculto, con la que puede interactuar, el usuario, para visualizarlo.
Etiquetas de apertura y cierre de una tabla. El resto de etiquetas de la tabla han de ir siempre recogidas entre estas dos etiquetas.
Usada para indicar el título de la tabla.
Etiqueta utilizada para agrupar dos o más columnas de una tabla.
Usada para describir los datos concretos de una tabla.
Indica el bloque de filas que describen las etiquetas de las columnas de la tabla.
Indica los bloques de filas que describen los resúmenes, o datos totales de una columna de una tabla.
Se usa para indicar una fila de celdas de una tabla.
Usada para definir una celda de una tabla.
Etiqueta que se usa para definir el encabezado de una celda.
Etiqueta de apertura y cierre de un formulario de una página web. El resto de etiquetas de formulario deben ir siempre recogidas entre estas etiquetas de apertura y cierre de formulario.
Etiqueta que representa un conjunto o agrupación de elementos de un formulario. «Pinta» un recuadro alrededor de las etiquetas que estén contenidas dentro del <fieldset>.
Etiqueta ligada a <fieldset>, pues indica el título del <fieldset>
Se usa para definir el nombre o título de un control del formulario.
Pinta un campo de introducción de datos para el usuario.
Etiqueta utilizada para representar un botón
Input que permite una selección entre un conjunto de opciones.
Etiqueta ligada a <select>. Permite añadir diferentes opciones al <select>
Añade un campo al usuario para que pueda introducir texto en unas líneas máximas de texto que el desarrollador puede definir.
Además de las etiquetas HTML que aquí te he mostrado, existen algunas más, pero con este listado, podrás hacer el 99% de las páginas web. para ver el listado completo, visita la página del World Wide Web Consortium o W3C, que es el orgánismo, encargado de velar, por este estándar y el del CSS (cascading style sheet), ú hojas de estilo en cascada.
Para despedirme, si echas alguna etiqueta en falta ó tienes alguna otra sugerencia, agradecería el contacto, gracias por leer, hasta la vista.
