Conoce las nuevas etiquetas HTML5 que te ayudaran a maquetar mejor

Conoce las nuevas etiquetas HTML5 que te ayudaran a maquetar

Conoce las nuevas etiquetas HTML5 que te ayudaran a maquetar mejor

Conoce las nuevas etiquetas HTML5 que te ayudaran a maquetar

CSS

Luego de bastante tiempo de solo usar los famosos div ahora HTML evoluciono y nos brinda nuevas etiquetas desarrolladas para un tipo especial de contenido

Con la nueva cantidad de etiquetas que se implementaron para mejorar la maquetación web estos últimos años , resulta un dolor de cabeza memorizarlas totalmente todas, por lo cual en este artículo te presentaremos un lista de las más utilizadas y una pequeña descripción que te facilitara al momento de utilizarlas:

Etiqueta Función
<!–…–> Define un comentario
<!DOCTYPE> Define el tipo de docuemento
<a> Define un hipervínculo
<abbr> Define una abreviación
<address> Define la información de contacto del autor / propietario del documento
<area> Define un área dentro de un mapa de imagen
<article> Define un artículo
<aside> Define el contenido lateral del contenedor de una página
<audio> Define contenido de sonido
<b> Define texto en negrita
<base> Especifica la base donde se abrirán todas las URL del documento
<bdi> Aísla una parte del texto que puede tener un formato diferente del texto externo
<bdo> Sobreescribe la dirección del texto
<blockquote> Define una sección que tiene otra fuente
<body> Define el cuerpo del documento
<br> Define un salto de línea
<button> Define un botón clickeable
<canvas> Se usa para dibujar gráficos en pantalla
<caption> Define el título de una tabla
<cite> Define el título de un trabajo
<code> Define un trozo de código de programación
<col> Especifica las propiedades de la columna para cada columna del elemento <colgroup>
<colgroup> Especifica un grupo de una o más columnas de una tabla
<command> Define un botón command al que un usuario puede invocar
<datalist> Especifica en un input una lista pre-definida de opciones
<dd> Define la descripción de un ítem en una lista de definición
<del> Define un texto que ha sido definido en un Mdocument
<details> Define detalles adicionales que el usuario puede ver o esconder
<dfn> Define el término de una definición
<dialog> Define una caja o ventana de dialogo
<div> Define una sección en un documento
<dl> Define una lista de definición
<dt> Define un término (un ítem) en una lista de definición
<em> Define énfasis en un texto
<embed> Define el contenedor de una aplicación externa (no html)
<fieldset> Grupo de elementos relacionados en un formulario
<figcaption> Define el título para una figura <figure>
<figure> Especifica auto-contenido
<footer> Define el pie de página de un documento
<form> Define un formulario html
<h1> a <h6> Define encabezados o títulos
<head> Define información hacerca del documento
<header> Define la sección de encabezado del docuemnto
<hgroup> Grupo de encabezado (<h1> a <6>)
<hr> Define un cámbio de temática a partir de una línea dibujada
<html> Define la raíz del documento
<i> Define una parte del texto de modo alternativo
<iframe> Define un frame en línea
<img> Define una imagen
<input> Define un control de entrada de texto
<ins> Define texto que ha sido insertado en un documento
<kbd> Define entrada del teclado
<keygen> Define un campo generador de claves para formularios
<label> Define el rótulo para un elemento <input>
<legend> Define un título para los elementos <fieldset>, <figure>, <details>
<li> Define un ítem de una lista
<link> Define la relación entre un documento y un recurso externo (generalmente con hojas de estilo)
<map> Define un mapa de imagen del cliente
<mark> Define texto resaltado o marcado
<menu> Define la lista de un menú
<meta> Define un metadato de un documento
<meter> Define una medida escalar en un rango conocido
<nav> Define un link de navegación
<noscript> Define un contenido alternativo para los usuarios que no soportan scripts del cliente
<objet> Define un objeto embebido
<ol> Define una lista ordenada
<optgroup> Define un grupo de opciones relacionadas en una lista desplegable
<option> Define una opción en una lista desplegable
<output> Define el resultado de un cálculo
<p> Define un párrafo
<param> Define un parámetro para un objeto
<pre> Define texto pre-formateado
<progress> Representa el progreso de una tarea en una barra
<q> Define una cita corta
<rp> Define que debe mostrar en navegadores que no soportan scripts de ruby
<rt> Define una pronunciación de caracteres
<ruby> Define una notación de ruby
<s> Define texto que no es correcto
<samp> Define un ejemplo de salida de un programa
<script> Define un script del lado cliente
<section> Define una sección de un documento
<select> Define un drop-down list
<small> Define texto pequeño
<source> Define los recursos para elementos multimedia
<span> Define una pequeña sección de un documento
<strong> Define un texto en negrita
<style> Define un estilo para la información de un documento
<sub> Define un texto que es subíndice
<summary> Define un encabezado visible para el elemento <details>
<sup> Define un texto que es superíndice
<table> Define una tabla
<tbody> Define el cuerpo de una tabla
<td> Define una celda en una tabla
<textarea> Define un control de entrada de múltiples líneas
<tfoot> Agrupa los footer contenidos en una tabla
<th> Define una celda de encabezado en una tabla
<thead> Agrupa los encabezados de una tabla
<time> Define fecha / hora
<title> Define un título para el documento
<tr> Define una fila en una tabla
<track> Define texto de la pista para elementos multimedia (vídeo y audio)
<ul> Define una lista desordenada
<var> Define una variable
<video> Define un vídeo o película
<wbr> Define un posible salto de linea

 

Ahora despues de listarte las principales etiquetas , te toca implementarlas en tu sitio web, no te olvides que al usar estas etiquetas le facilitas a google la lectura de tu pagina web para que pueda indexarla correctamente y pueda mejorar en el posicionamiento de busquedas en este .

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 344 veces | Publicado hace 11 meses

¿TE GUSTARÍA APRENDER A DESARROLLAR UNA APP DELIVERY DE ABARROTES PARA UNA TIENDA?

Mira el temario del curso en el siguiente link
Tienda Delivery en Flutter y Laravel

© Todos los derechos reservados CODEA APLICACIONES | Comunidad de programación web y desarrollo de aplicaciones móviles | 2020