Etiquetas de HTML más usadas

¡Qué emocionante! Me encanta porque en esta clase podemos ver cómo la profesora usa HTML para poner básicamente cualquier cosa que ella quiera poner 🤩.
.
Es así de fácil, simplemente le dices qué quieres poner y HTML lo hará 🥳. Otras etiquetas que también suelen ser muy usadas son estas:
.

<b>: Pone tu texto en negritas (pero esta etiqueta NO tiene sentido semántico).
<strong>: También pone tu texto en negrita, pero esta SÍ tiene sentido semántico (Google le da relevancia al texto que pongas ahí).
<i>: Pone tu texto en cursivas (pero esta etiqueta NO tiene sentido semántico).
<em>: También pone tu texto en cursivas, pero esta SÍ tiene sentido semántico (Google le da relevancia al texto que pongas ahí).
<br>: Hace un salto de línea, funciona como si diéramos un enter con el teclado 😄.

.
Realmente no hace falta que te sientes a estudiarlas y memorizarlas y aprendértelas, como dijo la profesora, con la práctica y a medida que creas páginas web te las acabarás aprendiendo sí o sí jaja.
.
PD. ¡Michis are awesome! OwO

Hugo Alberto Torrent Irrazabal

Todas las etiquetas del HTML con aspecto de tabla periódica de los elementos. 😃
https://allthetags.com

Luis Fernando Rodriguez Boett

Que no se les olvide esta cheatsheet 😌.

Jonathan Alejandro Sánchez Alcántara

Ver archivo PDF haciendo clic aquí.

María Del Pilar Chávez Gutiérrez

Llevo meses literal estudiando programación y con está explicación de Teff por fin pude acomodar en mi cabeza bien para que sirve cada etiqueta, estoy muy feliz 🥺

Roberto Ballinas Hernández

Mi aporte de la clase:

Juan camilo piedrahita londoño

En el Layout también se usa <main>contenido principal</main>.

Axel Enrique Galeed Gutierrez

Index y su estructura básica: head

Les comparto mis apuntes. 😄

Layout

Cuando hablamos de layout estamos hablando del diseño de nuestra página.

Las etiquetas que utilizamos aquí son la base en donde van a ir todo el contenido.

Enlaces

Vamos a poder colocar diferentes links o enlaces para que el usuario le dé click o tap y que nos redirija hacia otro lugar.

Textos

h1…h6

Nos indica la importancia de diferentes textos desde el más importante (h1) hasta el menos importante (h6).

p

Lo usamos para estructurar párrafos.

span

Semánticamente no tiene ningún significado al igual que div, es un comodín, pero nos ayuda diferenciar cierto texto dentro de un párrafo.

Formularios

form

Es el lugar donde va a ir todo nuestro formulario.

input

Hay muchos tipos de inputs.

label

Es el texto que nos indica que tenemos que hacer con cierto input en particular.

button

Nos permite enviar los formularios y hacen parte de otras partes de nuestra página si queremos.

Otros apuntes

Curso Definitivo de HTML y CSS

Clases

Index y su estructura básica: body

Anatomía de una etiqueta de HTML

Módulo

Formularios

Reynaldo Lenin Fuentes Garcia

¿Cuáles son las etiquetas HTML básicas?
Hay una serie de etiquetas que son las más usadas para crear cualquier documento HTML, a continuación las explicamos:

<body> para el contenido
<head> para información sobre el documento
<div> división dentro del contenido
<a> para enlaces
<strong> para poner el texto en negrita
<br> para saltos de línea
<H1>…<H6> para títulos dentro del contenido
<img> para añadir imágenes al documento
<ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de la lista
<p> para parágrafos
<span> para estilos de una parte del texto

Manuel Alfonso Illidge Ramírez

Cristian David Quiroz Salas

No quemen el div, recuerden que existen otras etiqueas que son especificas para algunas cosas y les va a ayudar con el SEO

Bryan Jesus Ramon Avila

Les dejo todas las etiquetas que les eran de ayuda

Johnny Gutiérrez Morales

Qué éxito esta clase, ya me siento programador, yo sé que obvio no, pero es muy gratificante como puedes ir creando.

JuanFe Peralta

Profe Platzi

💡 Les recomiendo este artículo para complementar:
44 etiquetas HTML que debes conocer
😄

alan garcia

Daniela Maissi

Comparto un PDF con etiquetas HTML, no se compliquen HTML es abrir y cerrar etiquetas (por explicarlo de una manera sencilla) solo tienes que saber para qué sirve cada una y dónde van, eso es todo. Espero que esto ayude: https://www.brandominus.com/manuales/manual_html5.pdf

Kevin Farid Cruz

Una documentación que se usa bastante es la de MDN, te explica todo referente a HTML, CSS y JS.
Link del HTML reference de MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Gabriela_Ramirez

Otra web para descargar buenas imágenes es: https://unsplash.com/

Miguel Ángel Maldonado Bautista

(https://www.w3schools.com/tags/default.asp)

Les recomiendo que cuando quieran saber a detalle para que sirve y como se usa una etiqueta vayan a esta pagina:

Esta en ingles, pero pueden usar el traductor, además es muy completa y sirve también para aprender CSS y otros lenguajes de programación.

EduarXenix

https://i.emezeta.com/weblog/html5-cheatsheet/html5-cheatsheet-emezeta.pdf

Les comparto unas tablas en donde podrán visualizar etiquetas HTML en español.🛠

Sharon Guiselle Corpas Avendaño

Genial esta clase, recorde unas cositas de prog basica y le coloque color de fondito y a las letras sin usar CSS. porque eso aun no lo sé jej 😃

eaespana

Etiquetas HTML mas usadas =>

LAYOUT =>
-header
-nav
-section
-article
-aside
-footer

ENLACES =>
-a

TEXTOS =>
-h1…h6
-p
-span

IMAGENES Y VIDEOS =>

-img
-svg
-iframe
-videos

FORMULARIOS =>
-formularios
-input
-label
-button

LISTAS =>
-ul
-li
-ol

Juan Diego Bedoya Gutierrez

Me parece EXCELENTE que una chica este orientando este curso ya que el 90% de los instructores son hombres; además, tiene buena didáctica. Gracias señorita

Kevin Salazar

Hola!, por aquí les dejo la tabla periódica de HTML, hecha por MANZDEV.

Cliver Miranda Ortega

Dejo este articulo de Freecodecamp donde también explican el uso de las principales etiquetas de HTML https://www.freecodecamp.org/news/html-cheat-sheet-html-elements-list-reference/

Jose Flores

Yo probando un poco hice esta de aca! JAJA

Rubén D. Chacón

LISTADO ETIQUETAS HTML
A continuación voy a indicarte cuales son las etiquetas HTML más usadas y también te indicaré su finalidad. Voy a centrarme en las principales etiquetas y sobre todo las que están soportadas en HTML 5. Ahí van:
ETIQUETAS INICIALES O DE RAÍZ

<!DOCTYPE html> Indica al navegador que el documento está basado en el estándar HTML5
<html> </html> 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

<head> </head> 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> que veremos a continuación.
<title> </title> Etiqueta usada para definir el título de la página web.
<link> Se usa para enlazar recursos externos al documento HTML. El ejemplo más común son las hojas de estilos CSS.
<meta> 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.
<style> </style> Etiquetas usadas para introducir código CSS en línea, es decir, en el propio documento HTML.

ETIQUETAS DE SECCIONES O PARA ESTRUCTURAR EL HTML

<body> </body> 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.
<nav> </nav> Usadas para definir el contenido que será la sección de navegación de la web.
<main> </main> Se usa para definir el contenido principal del documento. Solamente puede existir uno por documento.
<section> </section> Define una sección del documento
<article> </article> Define contenido independiente de la web.
<aside> </aside> Dentro de estas etiquetas suele alojarse el contenido adicional de la web. Suele ser contenido relacionado con la web pero de poca importancia
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> Son etiquetas HTML muy importantes, ya que son usadas para jerarquizar el contenido de la web. Las etiquetas se usan para explicar brevemente el contenido que irá a continuación.
<header> </header> Se usan para definir la cabecera la página web. Suele contener el logotipo, menú de navegación, etc.
<footer> </footer> Usadas para definir el pie de página.

ETIQUETAS PARA LA AGRUPACIÓN DE CONTENIDO

<p> </p> Etiqueta usada para escribir párrafos de texto.
<hr> Etiqueta utilizada para «romper» entre dos secciones de una web. Usada comúnmente como separador.
<pre> </pre> Usada para pegar texto manteniendo el pre formato propio del texto.
<blockquote> </blockquote> Se usan para indicar que el contenido es texto citado.
<ol> </ol> Etiquetas para crear una lista ordenada
<ul> </ul> Etiquetas para crear una lista des-ordenada
<li> </li> Etiquetas que recogen el contenido de un elemento de una lista, sea ordenada o no.
<dl> </dl> Usada para crear una lista de definiciones.
<dt> </dt> Representa un término definido por la siguiente etiqueta <dd>
<dd> </dd> Se usa para definir los términos listados antes que él.
<figure> </figure> Indica una figura ilustrada como parte del documento HTML5.
<figcaption> </figcaption> Utilizada para definir la leyenda de una figura.
<div> </div> Etiqueta común utilizada para crear un contenedor genérico.
Complementa este listado de etiquetas con nuestro listado de todos los atributos HTML que existen.

ETIQUETAS SEMÁNTICAS PARA TEXTO

<a> </a> Etiqueta utilizada para crear hiperenlaces en el documento HTML
<strong> </strong> Etiqueta para definir una palabra o conjunto de ellas como importantes. Tiene una fuerte importancia en el SEO de la página.
<small> </small> 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.
<cite> </cite> Para indicar el título de una obra
<sub> </sub> y <sup> </sup> Etiquetas utilizadas para representar un subíndice o superíndice.
<mark> </mark> Usada para resaltar texto
<span> </span> Etiqueta HTML sin ningún significado específico. Se usa conjuntamente con los atributos «class» o «id» para atribuirle ciertas características.
<br> Etiqueta utilizada para crear un salto de línea

ETIQUETAS PARA INCRUSTAR CONTENIDO

<img> Etiqueta para «pintar» una imagen en la página web.
<iframe> </iframe> Es una etiqueta que sirve para anidar otro documento HTML dentro del documento principal.
<embed> Usada para integrar una aplicación o contenido interactivo externo que no suele ser HTML.
<object> </object> Utilizada llamar a un recurso externo de la web. Este recurso será tratado como una imagen, o un recurso externo para ser procesado por un plugin.
<video> </video> Se usa para reproducir video en la página web junto a sus archivos de audio y capciones asociadas.
<audio> </audio> Usada para cargar un archivo de audio o stream de audio.
<source> Permite a autores especificar recursos multimedia alternativos para las etiquetas de <video> o <audio>
<svg> </svg> Se usa para llamar a una imagen vectorizada.>

TIQUETAS PARA LA CREACIÓN DE TABLAS

<table> </table> Etiquetas de apertura y cierre de una tabla. El resto de etiquetas de la tabla han de ir siempre recogidas entre estas dos etiquetas.
<caption> </caption> Usada para indicar el título de la tabla.
<colgroup> </colgroup> Etiqueta utilizada para agrupar dos o más columnas de una tabla.
<tbody> </tbody> Usada para describir los datos concretos de una tabla.
<thead> </thead> Indica el bloque de filas que describen las etiquetas de las columnas de la tabla.
<tfoot> </tfoot> Indica los bloques de filas que describen los resúmenes, o datos totales de una columna de una tabla.
<tr> </tr> Se usa para indicar una fila de celdas de una tabla.
<td> </td> Usada para definir una celda de una tabla.
<th> </th> Etiqueta que se usa para definir el encabezado de una celda

ETIQUETAS PARA LA CREACIÓN DE FORMULARIOS

<form> </form> 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.
<fieldset> </fieldset> 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>
<legend> </legend> Etiqueta ligada a <fieldset>. Indica el título del <fieldset>
<label> </label> Se usa para definir el nombre o título de un control del formulario.
<input> Pinta un campo de introducción de datos para el usuario. Es de las principales etiquetas de un formulario.
<button> </button> Etiqueta utilizada para representar un botón en el formulario.
<select> </select> Input que permite una selección entre un conjunto de opciones.
<option> </option> Etiqueta ligada a <select>. Permite añadir diferentes opciones al <select>
<textarea> </textarea> Añade un campo al usuario para que pueda introducir texto en unas líneas máximas de texto que el desarrollador puede definir.

Juan Roberto González León

Yo me llamo Roberto 😃

Omar Juarez

Veo que la profesora refresca la página del navegador cada vez que realiza un cambio en el HTML, esto no está mal pero se puede ahorrar mucho tiempo con la extensión Live Server que se vio en el curso de Prework. Además de que es más cómodo. Acá dejo el enlace a la extensión por si no la tienes.

Diego Andrés Garzón Girón

Dejaré mis apuntes de esta clase que me dejó así 🤯🤯 ** ¡Excelente clase!**
https://drive.google.com/file/d/18k4QDk0HefWtKTwOwNBkUE0ZzBeN_3PP/view?usp=sharing

Charles Duck Castillo Rosas

Mis apuntes en Notion

Sebastian Acevedo

Viva el frontend

hrenatogiron

( )

César Augusto Cortés Labrada

Aquí está todo facilito para empezar a aprender con esta documentación en w3school.

Se las recomiendo:
https://www.w3schools.com/html/
https://www.w3schools.com/css/

En este sitio puedes probar el funcionamiento de las etiquetas o atributos a través de ejercicios de ejemplo en tiempo real.

Aquí aprendí sobre animaciones con CSS en menos de 15 minutos XD

Jose Alberto Cauich Ku

En el apartado de formulario en una sola linea de codigo utilizando solo el input mas un placeholder podremos poner el name dentro de la misma caja de texto, haciendo un diseño mas limpio aqui un ejemplo:
<form action="">
<input type=“text” name=“name” placeholder=“name”>

Anggi Vanesa Pallares Solis

Iván Santiago Tellez Hernandez

La documentación nos indica el tipo de etiquetas que se van a manejar.
El div lo podemos usar, especialmente para alinear los elementos y así mismo, para darle sentido a las etiquetas principales que voy a utilizar dentro de este.

morphycode

En caso de que necesiten información sobre un elemento de HTML o sobre algo de CSS o JS recuerden que pueden ir a al documentación de los lenguajes, aquí les dejo unos enlaces recomendados:

Espero que les sea de utilidad 😃

David Limon

hace 5 meses

Les dejo el aporte de la clase…

Marcos Monteverde

hace 5 meses

Etiquetas más utilizadas:
Layout:

header
nav
section
article
aside
footer
Textos:
h1, h2, h3, h4, h5, h6
p
span
Formularios:
form
input
label
button
Enlaces:
a
Imágenes y video:
img
svg
iframe
video
Listas:
ul
ol
li

Tahisa Yadira Haro Dávalos

hace 10 meses

Layout

Carlos Ramos

Clase 6 - Etiquetas de HTML más usadas

¿Cuáles son las etiquetas más usadas de HTML y cómo las podemos categorizar?

Layout
Header.
Nav.
Section.
Article.
Aside.
Footer.
Div.
Enlaces.
A.
Textos.
H1 … h6.
P.
Span.
Imágenes y videos
Img.
Svg.
Iframe.
Video
Formularios
Form
Input
Label
Button
Listas
Ul
Li
Ol

¿Para qué nos sirve la etiqueta <header>?

Para agregar el encabezado de una página web.

¿Para qué nos sirve la etiqueta <nav>?

Para agregar el menú de navegación de una página web.

¿Para qué nos sirve la etiqueta <section>?

Para agregar una sección de nuestra página web.

¿Para qué nos sirve la etiqueta <article>?

Para agregar un artículo en nuestra página web.

¿Para qué nos sirve la etiqueta <aside>?

Para agregar un contenido secundario en nuestra página web.

¿Para qué nos sirve la etiqueta <footer>?

Para agregar el pie de página en una página web.

¿Para qué nos sirve la etiqueta <a>?

Para agregar un enlace a nuestra página web.

¿Para qué nos sirven las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6>?

Para agregar encabezados con un nivel de jerarquía en nuestra página web.

¿Cuál es el nivel de jerarquía de las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6>?

Los niveles de jerarquía son de mayor a menor, es decir, entre más bajo sea el número más nivel de jerarquía tiene la etiqueta.

¿Para qué nos sirve la etiqueta <p>?

Para agregar un párrafo en nuestra página web.

¿Para qué nos sirve la etiqueta <span>?

Para agregar un texto sin ningún significado semántico. Normalmente la usamos para asignar estilos CSS a textos específicos.

¿Para qué nos sirve la etiqueta img?

Para agregar una imagen en nuestra página web.

¿Para qué nos sirve la etiqueta iframe?

Nos permite embeber una página web externa en nuestra propia página web.

¿Para qué nos sirve la etiqueta <video>?

Para agregar un video en nuestra página web.

¿Para qué nos sirve la etiqueta <form>?

Para agregar un elemento de formulario en nuestra página web.

¿Para qué nos sirve la etiqueta <input>?

Para agregar diferentes campos de texto y numéricos en nuestros formularios.

¿Para qué nos sirve la etiqueta <label>?

Para agregar un texto guía para que el usuario sepa qué información se le está pidiendo en los campos de texto.

¿Para qué nos sirve la etiqueta <button>?

Para agregar un botón a nuestra página web.

¿Para qué nos sirve la etiqueta <ul>?

Para agregar listas desordenadas a nuestra página web.

¿Para qué nos sirve la etiqueta <li>?

Para agregar los ítems de las listas de nuestra página web.

¿Para qué nos sirve la etiqueta <ol>?

Para agregar listas ordenadas a nuestras páginas web.

¿Qué herramienta podemos usar para aprender a usar las etiquetas html?

Html reference.

Carlos Andrés Norato Gómez

hace 6 meses

Hola
Si tu le agregas el atributo target en el <a> te abre la pagina en otra venta así.

 <a target="_blank" href="https://platzi.com/home ">Go to Platzi</a>

Any Omaña

hace 7 meses

Me encanta la documentación compartida, justo estaba buscando algo así para despejar mis dudas al momento de programar. ❤️ ¡Gracias!

Cesar Guevara Cabrera

No se sobrecarguen leyendo informacion de los comentarios, con lo que te da el curso es suficiente, me refiero a guardar los datrasheets por ej, se que es con buena voluntad, pero para ser un desarrollador Front ya iras viendo cositas poco a poco, lo mas importante es terminar primero la ruta con lo minimo y lograr hacer apps, ya luego pueden aprender detalles de todos lados. Consejo para llegar mas rapido, y tambien para no agotarse o aburrirse.

Sergio Daniel

ETIQUETAS MAS UTILIZADAS EN HTML

Michelle Verano Osorio

Siento que falto la etiqueta <main>, pues semanticamente hablando, es la mas importante

Isabel Cristina Pérez López

Kevin Alexander

como consejo en el caso de insertar o hacer uso de imágenes, es una mejor practica usar la etiqueta figure antes de div para envolver la imagen, además que proporciona opciones que ayudaran mucho en seo.

Fabiola Jessica Huancollo Chambi

Con la página de referencia HTML que compartió, me enteré de nuevos tags. Me gustó sobre datalist:

(

Kevin Alexander Lima Recinos

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Etiquetas</title>
</head>
<body>
  <header>
    <nav class="Logo">
      <a href="https://platzi.com/home/"><img src="https://upload.wikimedia.org/wikipedia/commons/3/32/Platzi.jpg" alt="Logo Platzi" height="48" width="124"></a>
    </nav>

    <nav class="navbar">
      <a href="https://platzi.com/home">Clases</a>
      <a href="https://platzi.com/blog/">Blog</a>
      <a href="https://platzi.com/foro/">Foro</a>
      <a href="https://platzi.com/agenda/">Agenda</a>
      <a href="https://platzi.com/live/">TV</a>
      <a href="https://platzi.com/precios/">Planes</a>
    </nav>
  </header>
  
  <section>
    <div id="Usuarios-platzi">
      <img src="https://imagenes.elpais.com/resizer/w3f0rtNhCb7TrZgOObkKj35725U=/414x0/filters:focal(2390x927:2400x937)/cloudfront-eu-central-1.images.arcpublishing.com/prisa/6UVLXA57BRCNDEQEONPNE6WFZE.jpg" alt="Imagen de Freddy Vega - CEO DE PLATZI">
    </div>
  </section>

  <form action="#" method="post" class="form1">
    <fieldset>
      <legend>Ingresa tu correo</legend>
      <input type="email" name="email" placeholder="Email">
      <button>Send</button>
    </fieldset>
  </form>

  <footer>
    <h5>HTML hecho por Kevin Alexander | Estudiante de Platzi </h5>
  </footer>
</body>
</html>

Esta es la estructura que hecho yo, espero les sirva para entender mucho mejor 🙌🏻

Samuel Rueda

Etiquetas HTML más usadas

Layout: El diseño de toda nuestra página. El que nos da la estructura principal de nuestro documento, es el esqueleto dónde van a ir los elementos

Header
Nav
Section
Article
Aside
Footer

Enlances: Acá ponemos diferentes enlaces que nos permita redirigir a otro sitio web o a otra página, etc

Textos:

h1… h6 Podemos poner hasta el más importante que es el h1 hasta el menos importante que esl h6
p Esto nos ayuda a estructurar nuestro parrafos
span No tiene ningún significado ni ningún sentido pero nos ayuda a escribir y estilizar esos pequeños textos de ese parrafo principal

Imagenes y video:

img
svg
iFrame
video

Formularios:

Form La estrucutra inicial donde irá tu formulario
Input Varios tipos de input, puede ser de tipo texto que podamos escribir un texto dentro, o si queremos un check box que es cuando podemos seleccionar, etc
Label El titulo del input en particular
Button Nos permiten enviar nuestro formulario, pueden estar en cualquier parte pero la incuyeron acá

Listas: Escribir listas ordenadas o no ordenadas y li es para escribir la información de esa lista

Erika Alexandra García Barrios

Sinceramente necesitaba este curso.

Marcos Joel Sánchez López

gracias por los aportes ya que sitios como el compartido nos ayuda y nos sirve como material de apoyo

Baldan

HTML 5 también da recursos para crear tus propias etiquetas

Anggi Vanesa Pallares Solis

¡Excelente metodología!. #Estefany Aguilar
metodología EstefAg. breve resumen con una brillante explicación.

Diego Fabian Rico Castro

Si alguien mas al igual que yo viene tomando la escuela de desarrollo web en orden, no te de miedo desde ya empezar a usar git y GitHub, sinceramente es fácil y emociona ver como se va alimentando el repositorio allí.

Felipe de Jesus Villarreal Pedraza

https://www.w3schools.com

Hola a todos, si quieren profundisar en las etiquetas y ver ejemplos concretos les recomiendo esta pagina que muestra tanto HTML , CSS y JAVASCRIPT

user_deleted_2244058

excelente pagina recomendó

Josué Ramírez Hernández

Muy bien clasificadas las etiquetas, sin duda son más usadas en desarrollo web

dario himo

El div que utliza para las imagenes no se puede cambiar <article> si esta en un section? o utlizar <figure>
no se utiliza si utliza es semantico no es semantico???

Angélica Herrera

Interesante artículo: 44 etiquetas HTML que debes conocer link

Julio Loarte Huerto

https://htmlreference.io/

Gregson Murcia Castro

En mi caso agregaría estas etiquetas para la semántica de la imagen

<figure>
        <h1>Cute cat</h1>
        <img src="https://images.unsplash.com/photo-1582461198261-b655abb99f81?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
            alt="cat image">
        <figcaption>Sleepy cat</figcaption>
    </figure>

Christian España

http://htmlreference.io/

Christian Andres Moreno Ceballos

Al momento de utilizar la etiquetas <h1> es importante por temas de posicionamiento solo utilizar una en nuestra pagina web

Jhonatan David Ibarra Lavado

excelente recurso de las etiquetas

ANDRES ALFONSO MIRA MEJIA

hace 14 días

✅

Josue Israel Rojas Vilca

hace 14 días

Las etiquetas HTML más utilizadas son las que se emplean para crear la estructura básica de una página web y para mostrar contenido. Aquí tienes una lista de algunas de las etiquetas más comunes:

<!DOCTYPE>: Esta no es una etiqueta en sí misma, pero es una declaración que se coloca al principio del documento HTML para indicar la versión de HTML que se está utilizando.

<html>: Define el comienzo y el final de un documento HTML. Todo el contenido de la página se encuentra dentro de esta etiqueta.

<head>: Contiene metadatos sobre el documento, como el título de la página, enlaces a hojas de estilo CSS y otros elementos importantes que no se muestran en la página.

<title>: Define el título de la página que se muestra en la barra de título del navegador.

<body>: Contiene todo el contenido visible de la página, como texto, imágenes, enlaces y otros elementos.

<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>: Estas etiquetas se utilizan para estructurar el contenido de la página de manera semántica. Ayudan a dividir el contenido en áreas significativas, como encabezado, navegación, contenido principal, artículos, secciones adicionales y pie de página.

<p>: Define un párrafo de texto.

<a>: Crea enlaces a otras páginas web o recursos.

<img>: Inserta imágenes en la página.

<ul> y <ol>: Se utilizan para crear listas no ordenadas (viñetas) y listas ordenadas (números o letras), respectivamente.

<li>: Define elementos de lista dentro de las etiquetas <ul> o <ol>.

<div>: Se utiliza como un contenedor genérico para agrupar y estructurar elementos HTML, y es comúnmente utilizado en combinación con CSS para aplicar estilos.

<span>: Similar a <div>, pero se utiliza para aplicar estilos o interacciones a partes de texto o elementos inline más pequeños.

Code Conqueror7

hace un mes

Que creativa, gatos son increibles

Code Conqueror7

hace un mes

Me gustas profe :·3

Roberto Poblete Velázquez

Ese gato es mi tocayo. 🤔😎👌

Roberto Poblete Velázquez

Layout: el diseño base del sitio (header, nav, section, , etcétera) Texto: diferentes jerarquías de texto Imágenes y video: etiquetas para media Formularios: muy importante para frontend. <button> no necesariamente pertenece a la lista. <span> es una etiqueta no semántica pero que formatea el texto en estilo de cita (?).

Camilo Tuñón Madrid

No solo copies y pegues, lee si lo que te comparto te parece útil a ti. 😃

Pregunta	Respuesta
¿Cuál es la importancia del HTML semántico?	El HTML semántico nos ayuda a dar sentido y significado a la página web. El usar etiquetas específicas, mejora la accesibilidad, el SEO y la legibilidad del código.
¿Qué elementos conforman la estructura básica de una página web?	La estructura básica incluye elementos como header, navbar, section, article, aside y footer. Estos elementos ayudan a organizar y dar estructura al contenido de la página.
¿Cuál es la función de la etiqueta anchor (<a>)?	La etiqueta anchor se utiliza para crear enlaces en una página web.
¿Qué importancia tienen las etiquetas de encabezado (h1-h6)?	Se utilizan para estructurar y jerarquizar los títulos y subtítulos en una página web. De h1 (el título más importante) hasta h6 (el título menos importante).
¿Cuál es la función de la etiqueta <p>?	Se utiliza para definir párrafos de texto en una página web.
¿Para qué se utiliza la etiqueta <span>?	Se utiliza para aplicar estilos o manipular secciones específicas de texto dentro de un párrafo u otro elemento.
¿Cómo se insertan imágenes en una página web?	Las imágenes se insertan utilizando la etiqueta <img>. El atributo “src” para decir la fuente de la imagen y el atributo “alt” dando un texto alternativo en caso de que la imagen no se cargue.
¿Qué función cumple la etiqueta <form>?	La etiqueta <form> se utiliza para crear formularios interactivos en una página web.
¿Qué es el atributo “action” en la etiqueta <form>?	Este especifica la URL del servidor que manejará los datos del formulario cuando se envíe.
¿Cuál es la importancia de la etiqueta <label> en los formularios?	La etiqueta <label> se utiliza para asociar un texto descriptivo a un elemento de entrada en un formulario, un input, por ejemplo.

Nelson José Moncada Andrade

iframe no es para imagenes y videos. CORRECCION

Oscar Alexánder Ortiz Beltrán

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <nav>
        <ul>
            <li>about us</li>
            <li>contact us</li>
        </ul>
    </nav>
    <section>
        <div>
            <img src="https://images.pexels.com/photos/3777622/pexels-photo-3777622.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="cat">
        </div>
        <div>
            <h1>Cats</h1>
            <p>Cats are awesome</p>
        </div>
    </section>
    <form action="">
        <label for="name">Name</label>
        <input type="text" id="name">
    </form>
    <a href="https://www.pexels.com/">Go to pexels</a>
</body>
</html>

Wilson Villanueva

Hola, que gran curso, aprovechando esta clase les recomiendo usar la función “target” luego del (a href), el target les permitirá abrir el enlace fuera de la pagina actual.
ej:
href=“https://pagina/” target="_blank" >texto</a>

Leidy Vaneza Vicente Ccorimanya

<html>: Define el comienzo y el final del documento HTML.
<head>: Contiene información sobre el documento, como el título de la página, enlaces a hojas de estilo y scripts, entre otros.
<title>: Especifica el título de la página que se muestra en la pestaña del navegador o en los resultados de búsqueda.
<body>: Contiene el contenido visible de la página web, como texto, imágenes, enlaces, entre otros.
<h1> a <h6>: Encabezados de nivel 1 a nivel 6, utilizados para estructurar el contenido por orden de importancia.
<p>: Define un párrafo de texto.
<a>: Crea un enlace a otra página web o a una ubicación dentro del mismo documento.
<img>: Inserta una imagen en la página web.
<ul> y <li>: Se utilizan para crear listas no ordenadas, donde
<ul> define la lista y <li> representa cada elemento de la lista.
<ol> y <li>: Se utilizan para crear listas ordenadas, donde
<ol> define la lista numerada y <li> representa cada elemento de la lista.
<div>: Se utiliza para agrupar y dividir secciones de contenido.
<span>: Se utiliza para aplicar estilos o manipular contenido dentro de un texto.
<table>, <tr>, <th>, <td>: Elementos utilizados para crear tablas y definir filas, encabezados y celdas de la tabla, respectivamente.
<form>, <input>, <button>: Elementos utilizados para crear formularios y campos de entrada de datos.
<header>, <nav>, <main>, <footer>: Elementos utilizados para estructurar las diferentes secciones de una página web, como el encabezado, la navegación, el contenido principal y el pie de página, respectivamente.
Estas son solo algunas de las etiquetas más utilizadas en HTML. Existen muchas otras etiquetas y atributos disponibles para dar estructura y estilo a una página web, así como para agregar contenido multimedia, elementos de audio y video, entre otros.

MARCO ANTONIO REYES GONZALEZ

<code> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header></header>
    <main>
        <section>
            <figure>
                <img src="./pics/small.jpg" alt="imagen de un gato"/>
                <figcaption>Esto es una imagen de un gatito</figcaption>
            </figure>
        </section>
    </main>
    <footer></footer>
    
</body>
</html>

Carlos Angeles

mi pagina se ve asi

Juan López

Dejo mi pequeño aporte:

Etiquetas de HTML mas usadas:

Layout (diseño de página):

Header
Nav
Section
Article
Aside
Footer

Enlaces (redireccionar):

Textos:

h1 … h6
p
span

Imagenes y Videos:

Img
Svg
iframe
Video

Formularios:

Form
Input
Label
Button

Listas:

Leonardo Andres Martinez Guevara

Muy buena clase !

Juan David Santamaria Gomez

hoy fue un repaso de las etiquetas principal de la estructura del lenguaje marquetado de hipertexto.

Kendall Espinoza

hace 4 meses

En el minuto 7:55 la etiqueta semántica adecuada sería

<article> </article>

Define un bloque de contenido autónomo que puede existir en cualquier contexto. Ya que la etiqueta
Ejemplo :

<article>
  <header>
    <h2>Título del artículo</h2>
  </header>

  <p>Contenido del artículo.</p>

  <footer>
    <p>Autor: John Doe</p>
    <p>Fecha de publicación: 27 de mayo de 2023</p>
  </footer>

  <section>
    <p>Este es el cuerpo del artículo.</p>
    <p>El contenido adicional del artículo se puede estructurar y agrupar utilizando <code>&lt;section&gt;</code>.</p>
  </section>
</article>

Por otro lado div

<div> </div>

Define un bloque genérico de contenido, que no tiene ningún valor semántico. Se utiliza para elementos de diseño como contenedores.

Ejemplo de uso de div

<div class="card">
  <div class="card-header">
    <!-- Encabezado de la tarjeta -->
  </div>
  <div class="card-body">
    <!-- Cuerpo de la tarjeta -->
  </div>
</div>

Recuerda que la clave en HTML5 semántico es utilizar etiquetas que describan de manera significativa el contenido siempre que sea posible, y utilizar <div> como un contenedor genérico solo cuando no haya una opción semántica más adecuada.

Kendall Espinoza

hace 4 meses

En el minuto 7:24 la etiqueta semántica adecuada sería

<figure> </figure>

Ejemplo:

<<figure>
  <img src="/images/html-reference-logo.png" alt="HTML Reference logo">
</figure>>

Ivan Martinez

hace 6 meses

Es abrumador ver tantas etiquetas al comenzar con HTML 🤯 sin embargo, ya despues que se aprenden y ponen en práctica escribir código en HTML es tan fluido y fácil como lo hace parecer teff 🙈

Jonathan Fernando Ramirez Valencia

hace 6 meses

Charles Duck Castillo Rosas

hace 7 meses

Mis apuntes en Notion💚

Manuel Fernando Jamaica Prieto

hace 7 meses

En esta clase me parece genial dar uso de las etiquetas específicas para poder elaborar cada sección de la estructura del sitio web y que los div se pueden utilizar a modo de separador.

Ricardo Alfonso Chavez Vilcapoma

BUENAS PRÁCTICAS DE HTML:

Evitar la divitis para layout. En vez de ello usar las etiquetas semánticas como header, nav, main, etc.
Identación
Evitar comentarios
No usar atributos para aplicar CSS
Agregar el atributo alt en la etiqueta img
Usar minúsculas en etiquetas y atributos.
Omitir valor de atributos booleanos como checked, selected, disabled y readonly. Por defecto son false y si se agregan pasan a ser true.

Samuel Alvarez

El layout es la distribución de la página web, en la parte de enlaces se utiliza la etiqueta <a>, los textos van desde el título <h1> y párrafos, multimedia, formularios y listas.

Wilman Garcia

https://platzi.com/cursos/html-css/

Adalberto Morales

vengo del 2023 y existe algo llamado ChatGPT

Esteban Cardona Gil