Curso Definitivo de HTML y CSS
Curso Definitivo de HTML y CSS

Web Developer Fundamentals

1

¿Qué aprenderás sobre HTML y CSS?

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es Full Stack?

5

Páginas Estáticas vs. Dinámicas

HTML

6

HTML: anatomía de una página web

7

Index y su estructura básica: head

8

Index y su estructura básica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatomía de una etiqueta de HTML

Etiquetas multimedia

11

Tipos de imágenes

12

Optimización de imágenes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

CSS

21

¿Qué es CSS?

22

¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatomía de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

Más sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desafío: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas prácticas y ejemplos de responsive

50

Imágenes responsive

Accesibilidad

51

Semántica

52

Textos

53

Labels, alt y title

Próximos pasos

54

Próximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Curso Definitivo de HTML y CSS

Curso Definitivo de HTML y CSS

Diego De Granda

Diego De Granda

Index y su estructura básica: body

8/55
Recursos

body es la etiqueta que identifica la parte visible de nuestro sitio web. Dentro del body, se añadirán las etiquetas para marcar los elementos visuales del sitio web, como logotipo, menús de navegación, contenido principal, entre otrs. Es muy importante usar HTML semántico y no llenar todo de <div> para que nuestro sitio sea mejor interpretado por el navegador y, por lo tanto, más accesible.

Etiquetas del cuerpo del documento (body):

  • article: diferencia partes del contenido que pueden vivir por sí mismas.
  • nav: para hacer menús de navegación.
  • aside: contenido menos relevante, como publicidad, etc.
  • section: sirve para diferenciar las secciones principales del contenido.
  • header: cabecera del documento.
  • footer: pie de página del documento.
  • h1 - h6: títulos de nuestro sitio web.
  • table: tablas de contenidos, similar a la estructura de las hojas de calculo.
  • ul y ol: listas de items.
  • div: cualquier división para organizar el contenido.
  • h1 a h6: son etiquetas para indicar títulos con un estilo que destaca del resto.
  • article: es la parte de nuestro contenido que puede vivir por sí mismo. Pueden haber tantos artícle como proyectos o eventos tenga nuestro portafolio.
  • p: define el texto de un párrafo.
  • small: aplica una apariencia de texto reducido en tamaño.
  • strong: aplica al texto un formato de negritas.
  • a: corresponde a un ancla o enlace a una url interna o externa del documento.
  • img: con esta etiqueta podemos enlazar imágenes en el documento.
  • figure: le da un contexto semántico a las imágenes.

Ejemplo de un body con etiquetas semánticas HTML.

  <body>

    <header> <!--Sección superior de nuestro website--> 

      <nav></nav> <!--Sección de navegación de nuestro website, siempre dentro del header-->

    </header>

    <main> <!--Main es el contenido central de nuestro website, "la parte del medio"-->

      <section> 
        <!--Nuestro website puede estar divido por secciones, por ejemplo platzi tiene 3: El navegador de cursos y rutas, el feed y nuestras rutas de aprendizaje-->

        <article>
          <!--Contenido independiente de la página. Es reutilizable-->
        </article>

      </section>

      <ul> <!--Lista desordenada: Sin numerar-->

        <li><!--Item List. Elementos de la lista--></li>

      </ul>

      <ol></ol> <!--Lista ordenada: Numerada-->
      
    </main>

    <footer> <!--Sección final de nuestro website-->

    </footer>

    <p>Soy un texto</p> <!--Párrafo, texto-->

    <h1>Soy un titulo</h1> 
    <!--Títulos, muestran el texto más grande y con negrilla. Existen desde el h1 al h6-->

    <a href="#">Soy un link</a>
    <!--Enlaces/links que nos permitirán movernos entre páginas.-->

  </body>

Aporte creado por: John Cárdenas, Fabián Ardilla.

Aportes 419

Preguntas 104

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

John Cardenas

John Cardenas

hace 4 años

body es la parte visible de nuestro website 😃. Es muy importante usar HTML semántico y no llenar todo de <div> para que nuestro sitio sea mejor interpretado por el navegador y por lo tanto más accesible.

  <body>

    <header> <!--Sección superior de nuestro website--> 

      <nav></nav> <!--Sección de navegación de nuestro website, siempre dentro del header-->

    </header>

    <main> <!--Main es el contenido central de nuestro website, "la parte del medio"-->

      <section> 
        <!--Nuestro website puede estar divido por secciones, por ejemplo platzi tiene 3: El navegador de cursos y rutas, el feed y nuestras rutas de aprendizaje-->

        <article>
          <!--Contenido independiente de la página. Es reutilizable-->
        </article>

      </section>

      <ul> <!--Lista desordenada: Sin numerar-->

        <li><!--Item List. Elementos de la lista--></li>

      </ul>

      <ol></ol> <!--Lista ordenada: Numerada-->
      
    </main>

    <footer> <!--Sección final de nuestro website-->

    </footer>

    <p>Soy un texto</p> <!--Párrafo, texto-->

    <h1>Soy un titulo</h1> 
    <!--Títulos, muestran el texto más grande y con negrilla. Existen desde el h1 al h6-->

    <a href="#">Soy un link</a>
    <!--Enlaces/links que nos permitirán movernos entre páginas.-->

  </body>
Yajayra Arauco Flores

Yajayra Arauco Flores

hace 4 años

![](

Daniela Wario

Daniela Wario

hace 4 años

Estructura basica y sus etiquetas 🧐

Ikal
Jorge Antonio Gómez García

Jorge Antonio Gómez García

hace 4 años

Hola compañeros, les comparto mi aporte a la clase. Es una infografía resumen. 😃

Andrés Gutiérrez Arcia

Andrés Gutiérrez Arcia

hace 4 años

Podemos hacer comentarios en los archivos HTML con la sig. sitaxis

<!-- Esto es un comentario -->
JochuaOrtiz

JochuaOrtiz

hace 4 años

pequeño aporte de lo visto en la clase

 <!DOCTYPE html> <!--Indicamos el tipo de HTML a utilizar-->
 <html lang="es"> <!-- Etiqueta raiz del documento -->
   <head> <!-- Encabezado del sitio web -->
       <meta charset="utf-8"> <!-- Navegador entienda caracteres especiales -->
       <meta name="description" content="mi primer sitio web"> <!-- Descripcion de mi pagina web -->
       <meta name="robots" content="index,follow"> <!-- Ayuda para la busqueda de robots -->
       <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Para sitios web responsivos -->
       <title>titulo de mi pagina</title> <!-- titulo de mi pagina -->
       <link rel="stylesheet" href="css/style.css"><!-- Agregar hojas de estilos -->
   </head>
   <body> <!-- Cuerpo del sitio web -->
     
      
    <!--Tipos de Etiquetas
      
      1-Etiquetas contenedoras : llevan mas etiquetas adentro y nos ayudan a estructuras la anatomia de nuestro sitio web.
      
      2-Etiquetas de contenido : son etiquetas que llevan texto , imagenes o cualquier cosa que se va a renderizar en el proyecto.
      
      -->
      
    <!--Header: Encabezado de nuestro sitio web-->
      <header>
          
      </header>
      
    <!--nav: Etiqueta para nuestra barra de navegacio-->
      <nav>
          
      </nav>
      
    <!-- Main : Etiqueta para nuestro contenido principal -->
      <main>
         
         <!-- section : una seccion de nuestro contenido principal -->
         <section>
             
             <!-- article : contenido independiente (dentro de una seccion) -->
             
             <article>
                 
             </article>
             
         </section>
         
         <!-- TIPOS DE LISTA 
         
             1- Listas desordenadas : No enumeradas
             2- Listas ordenadas: Enumeradas
         
         -->
         
         <!-- Lista desordenada -->
            <ul> <!-- UL : unordered list -->
               
               <li>Lista desordenada</li> <!-- LI : List Item -->
                
            </ul>
                  
        <!-- Lista ordenada -->
            <ol> <!-- Ordered list -->
                
                <li>Lista ordenada</li> <!-- LI : List item -->
                
            </ol>
                  
        <!-- P : Crear un parrafo -->
            
            <p>
                soy un parrafo
            </p>
            
            <p>
                soy otro parrafo
            </p>
                  
        <!-- H1 - H6 : Encabezados (Headings) -->
            
            <h1>encabezado h1</h1>
            <h2>encabezado h2</h2>
            <h3>encabezado h3</h3>
            <h4>encabezado h4</h4>
            <h5>encabezado h5</h5>
            <h6>encabezado h6</h6>

        <!-- A : Creamos hipervinculos  -->
            
            <a href="#">Este es un link</a>
                                                                                   
      </main>
      
    <!-- Aside : Barra lateral del sitio web -->
      <aside>
          
      </aside>
    
    <!-- footer : Pie de pagina de nuestro sitio web -->
      <footer>
          
      </footer>                
       
   </body> 
 </html>
Mateo Josué Moreira Arias

Mateo Josué Moreira Arias

hace 4 años

Si no les da la opción de “open with live server” instalen la siguiente extensión:

Luis Sepulveda

Luis Sepulveda

hace 3 años

Les comparto la siguiente página para que validen etiquetas y se encuentra en español, esto para los que no manejamos bien el inglés todavía.
Elements HTML

Jorge Luis Pulido Urbina

Jorge Luis Pulido Urbina

hace 4 años

Dejé a mi novia durmiendo esta mañana así que por si acaso…

<body>
    <header>
        <nav>
        </nav>
    </header>
    <main>
    <h1>Hola mi amor buenos días</h1>
    <p>¿Qué quieres desayunar hoy?</p>
    <ul>
        <li> Lista de opciones:</li>
        </ul>
    <ol>
        <li>¿Arepa con queso?</li>
        <li>¿Pizza recalentada?</li>
    </ol>
    <a href="#"> Click aquí para pedir por rappi</a>
</main>
</body>```
inst_alvarohrv

inst_alvarohrv

hace 4 años

Esta pagina nos regala una lista de etiquetas y la propiedad CSS ‘display’ que por defecto posee (block, inline, etc) https://htmlreference.io/

Piter Mancilla Rosas

Piter Mancilla Rosas

hace 4 años

Descubrí una extensión en VS Code llamada: PrintCode
PrintCode nos permite imprimir nuestro código o guardarlo en PDF, para eso debemos tener instalada la extensión obviamente, para que funcione presionamos F1 o CTRL+SHIFT+P y escriben PrintCode, eso les abrirá automáticamente una pestaña en el navegador.

nota: yo lo uso para copiar los aportes de otros compañeros, después los pego vscode y los guardo en PDF. 😄

Stalin Badillo

Stalin Badillo

hace 4 años

Por si alguien (al igual que yo )no sabía que es renderizado.

El renderizado, al hablar de páginas o aplicaciones web, se refiere al proceso de mostrar en el navegador la página correspondiente.

  • En un sitio web estático, el servidor tiene simplemente archivos HTML, y se los manda al cliente cuando los pide. El navegador se encarga de hacer un parse del HTML y mostrar el resultado en pantalla. Esto que hace el navegador es el renderizado.

  • En el caso de los sitios web dinámicos, antes de enviar el archivo HTML se completa con los datos necesarios y se insertan en un template ya definido.

  • Por ejemplo, en Quora está definido en qué parte de tu navegador se va a mostrar el avatar del usuario, pero para mostrarlo el servidor necesita saber quién es el usuario, ir a buscar el avatar de ese usuario y después poner la URL de la imagen en ese lugar.

Fuente:https://es.quora.com/Qué-es-la-renderización-del-lado-del-cliente-y-el-servidor-y-cómo-está-relacionado-con-las-aplicaciones-de-una-página

William Schnaider Torres Bermon

William Schnaider Torres Bermon

hace 4 años

Un concepto clave mencionado por el profesor es HTML semantico. Les comparto esta información para aclarar dudas o profundizar un poco más.

In programming, Semantics refers to the meaning of a piece of code — for example “what effect does running that line of JavaScript have?”, or “what purpose or role does that HTML element have” (rather than “what does it look like?”.)

Enlaces de interes:

  1. https://www.w3schools.com/html/html5_semantic_elements.asp
  2. https://developer.mozilla.org/en-US/docs/Glossary/Semantics
Abigail Perez

Abigail Perez

hace 3 años
Raúl Adolfo Sánchez Rodríguez

Raúl Adolfo Sánchez Rodríguez

hace 2 años

Mi resumen:

ANDREA FERNANDA OTÁLORA FIGUEROA

ANDREA FERNANDA OTÁLORA FIGUEROA

hace 3 años

Hay dos tipos de etiquetas:

  • Etiquetas de contenido: Son las que llevan el texto, las imágenes, los vídeos o lo que se renderice en el proyecto.
  • Etiquetas contenedoras: Llevan más etiquetas en el interior que ayudan a generar la estructura de la página.
Daniel David Mármol Rivero

Daniel David Mármol Rivero

hace 4 años

Comparto con ustedes los apuntes que he realizado sobre cada etiqueta para tener un aprendizaje más profundo sobre ellas a la hora de volver a leer el código y ponerlo en práctica para mis próximas páginas web.

    <body><!--integra todo lo puede visualizar el usuario: texto, imágenes, videos y con el cual puede interactuar-->
       <!--Etiquetas contenedoras-->
        <header><!--etiqueta del header de nuestra página web-->
            <nav></nav><!-->: etiqueta que va dentro del header y activa la barra de navegación-->
        </header>
        <main><!--etiqueta para trabajar la parte principal de la pagina web (main área) y va afuera y abajo del header, debido a que indica que después del encabezado y la barra de navegación viene todo el contenido principal. -->
            <section><!--secciones que están dentro del main -->
                <article></article><!--artículos que podemos incluir en una sección y dicha sección puede tener varios artículos. -->
            </section>
            <ul><!--etiqueta que crea una lista desordenada que viene con bullets-->
                <li>Soy un item desordenado</li><!--list idem-->
            </ul>
            <ol><!--etiqueta que crea una lista ordenada y numerada-->
                <li>Soy un item ordenado</li><!--list idem-->
            </ol>
        </main><!---->
        <footer></footer><!--etiqueta para trabajar el pie de página. -->
        <div></div><!--Mala práctica para realizar la semántica de HTML-->
        <!--Etiquetas de contenido-->
        <p>Soy un texto</p><!--etiqueta de párrafo-->
        <h1>Soy un título</h1><!--etiqueta de título de forma más grande y va disminuyendo su tamaño de fuente a medida que aumenta el número.-->
        <a href="#"Soy un link></a><!--Al agregar # no reinicia la página.-->
    </body>
Carlos Ramos

Carlos Ramos

hace 2 años

Clase 8 - Indes y su estructura básica: body

¿Cuáles son los tipos de etiquetas que podemos agregar a la etiqueta <body>?

  • De contenido
  • Contenedoras.

¿Para qué nos sirven las etiquetas contenedoras?

  • Estas nos permiten encerrar las etiquetas de contenido y crear la estructura o anatomía de una página web.

¿Para qué nos sirven las etiquetas de contenido?

  • Estas nos permiten agregar el contenido que vamos a renderizar en nuestra página web, por ejemplo:
    • Textos.
    • Imágenes.
    • Videos.

¿Qué etiquetas contenedoras existen?

 <header> </header>
 <nav> </nav>
 <main> </main>
 <section> </section>
 <ul> </ul>
 <ol> </ol>
 <footer> </footer>
 <div> </div>

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

  • Esta nos permite crear el encabezado en nuestra página web.

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

  • Esta nos permite crear un menú de navegación.

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

  • Para crear el crear nuestro contenido principal de nuestra página web.

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

  • Esta nos permite crear una sección de nuestra página web.

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

  • Para crear articulos de nuestra página web.

¿Qué tipos de listas podemos crear en HTML?

  • Ordenadas
  • Desordenadas.

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

  • Para crear una lista desordenada.

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

  • Para crear listas ordenadas.

¿Cómo podemos diferenciar las listas ordenadas y desordenadas en HTML?

  • Las listas ordenadas van a venir con numeración, mientras que las listas desordenadas van a venir con viñetas o bullets.

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

  • Para crear el pie de página de nuestra página web.

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

  • Esta etiqueta nos permite crear secciones sin un peso semántico

¿Qué etiquetas de contenido de texto existen?

 <p> </p>
 <li> </li>
 <h1> </h1>
 <h2> </h2>
 <h3> </h3>
 <h4> </h4>
<h5> </h5>
 <h6> </h6>
 <a href="#"> </a>

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

  • Para crear los ítems de las listas ordenadas y/o desordenadas.

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

  • Para crear párrafos.

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

  • Para crear títulos o encabezados de texto.

¿Cómo funcionan las etiquetas h?

  • Debido a que hay 6 etiquetas h’s y todas sirven para lo mismo, lo que se debe de tener en cuenta es el número que tengan y con esto sabremos su peso semántico. Entre menor sea el número, mayor será su peso semántico. Además visualmente se verán diferentes dependiendo su peso semántico, entre menor sea su número más grande será la letra que veremos en el navegador.

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

  • Esta nos permite crear los link o hipervínculos que nos llevaran de página en página dentro de nuestra página web.

¿Qué pasa si el atributo href de la etiqueta <a> está vació?

  • La página en la que estamos se recargará cada vez que demos clic sobre el elemento.

¿Por qué debemos de trabajar con HTML semántico?

  • Porque es una mala práctica no hacerlo, por ello debemos de usar las etiquetas correspondientes al tipo de contenido que queremos hacer.

¿Es buena práctica que usemos la etiqueta <div> para crear secciones?

  • Todo depende del caso, si lo que queremos es crear una sección o contenedor que queramos manipular lo podemos hacer, pero si lo que queremos es crear secciones que son importantes para nuestra página web NO SE DEBE HACER.
Marco Antonio Leon Matias

Marco Antonio Leon Matias

hace 4 años

Lo que más grabé en mi mente fue: “Hay etiquetas contenedoras y de contenido”

Christian Juan Tambo Coaquira

Christian Juan Tambo Coaquira

hace 4 años

Hay 2 tipos de etiquetas:
De contenido.- Son las etiquetas que llevan el texto, las imágenes y todo que se pueda renderizar en el proyecto.
Contenedoras.- Llevan más etiquetas adentro y nos ayudan a llevar la estructura del proyecto.
Tenemos que utilizar un HTML semántico

<!--Todo lo que viene es HTML, en DOCTYPE la etiqueta se cierra automáticamente-->
<!DOCTYPE html>
<!-- lang es el tipo de lenguaje en la que está la página -->
<html lang="es">
 
    <!--En head va todo lo que necesita el navegador para ejecutar la página-->
    <head>
        <!--Las etiquetas meta le dan información al navegador, se cierran solas-->
            <!-- charset ayudará al navegador a entender caracteres especiales -->
        <meta charset="UTF-8">
            <!-- name ayuda al CEO, content  -->
        <meta name="description" content="Esta página te mostrará fotos de gatos">
            <!-- Autorizar a los robots en buscadores para encontrar esta página -->
        <meta name="robots" content="index, follow">
            <!-- title, título de la pestaña -->
        <title>Es mi página</title>
            <!-- Dimensiones de la página -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <!-- Carga las hojas de estilo -->
        <link rel="stylesheet" href="./css/style.css">
    </head>
 
    <!--En body va todo lo que el usuario verá - texto, imágenes, etc-->
    <body>
        <!-- Header: etiqueta para el encabezado de la página-->
        <header>
            <!-- Nav se usa para la barra de navegación-->
            <nav></nav>
        </header>
        <!-- main contenido principal-->
        <main>
            <section>
                <article>
 
                </article>
            </section>
            <!-- ul Listas ordenadas-->
            <ul>
                <li>Soy una manzana</li>
            </ul>
            <!-- ol Listas desordenadas-->
            <ol>
                <li>Soy una manzana</li>
            </ol>
        </main>
        <!-- Pie de página -->
        <footer>
 
        </footer>
        <p>
            Soy un texto
        </p>
        <h1>Soy un título</h1>
        <h2>Soy otro título</h2>
        <h3>Soy otro título más</h3>
        <!--Agregar hipervínculos-->
        <a href="">Soy un link</a>
    </body>
</html>
José Rafael Hernández Barboza

José Rafael Hernández Barboza

hace 3 años

Evitar la divitis: La divitis es una enfermedad que sufren muchos desarrolladores web, donde utilizan la etiqueta div en lugares incorrectos o la usan de manera excesiva al momento de etiquetar una página web.

Gustavo Amarista

Gustavo Amarista

hace 3 años

La estructura de las etiquetas HTML tiene el siguiente formato:

Estructura de una etiqueta HTML

Etiqueta HTML
La parte esencial de una etiqueta HTML es lo que se denomina la etiqueta de apertura. Se trata de escribir el nombre de la etiqueta en cuestión, colocándola entre los carácteres < y >. Aunque no es terminantemente obligatorio, se recomienda y considera una buena costumbre escribir las etiquetas siempre en minúsculas.

En HTML5 no se puede colocar cualquier palabra como etiqueta, sino que existen una serie específica de etiquetas, cada una con una misión y objetivo diferente. Por ejemplo, la etiqueta <strong>:

<strong>Contenido</strong>

Como se puede ver, la mayoría de las etiquetas requieren que se especifique un cierre de etiqueta para saber donde termina de actuar. Se caracteriza en que se escribe igual que la etiqueta de apertura, pero con la barra / inmediatamente después del <.

Atributo
En algunas etiquetas HTML, existen algunos atributos específicos (que pueden ser opcionales u obligatorios). Los atributos determinan cierta información sobre la etiqueta (o su modo de actuar) y generalmente van asociados a un valor determinado. Este par atributo-valor se escribe después del nombre de la etiqueta, separándola por espacio y antes del carácter > de la etiqueta de apertura:

<strong id="dato">Contenido</strong>

En este caso, la etiqueta sería strong, el atributo id, el valor de id sería dato, mientras que el contenido de la etiqueta es Contenido. Por otro lado, y al igual que las etiquetas, cada atributo tiene una misión y comportamiento concreto. Aunque los valores pueden ir rodeados por comillas simples, se recomienda escribir el valor siempre entre comillas dobles.

Existen 3 tipos de atributos dependiendo de sus valores:

Conjunto finito de valores: Son los atributos en los que puedes especificarle una serie de valores limitada. Cualquier otro valor que no sea uno de ellos, no será válido.
Valores libres: Son los atributos en los que puedes especificar un valor libremente, como una dirección URL o un texto, y no existe una serie de valores específicos para escribir.
Valores booleanos: Son los atributos que deben tener un valor verdadero (true) o un valor falso (false). En HTML5 estos atributos se escriben sin valor (solo el atributo) si son verdaderos y se omiten para indicar que son falsos.
Contenido de la etiqueta
En el interior de la etiqueta HTML (después de la etiqueta de apertura y antes de la etiqueta de cierre) se debe colocar la información que queremos que sea afectada por dicha etiqueta. En el siguiente ejemplo se ve como contiene un fragmento de texto:

<strong id=“dato” class=“clase1” lang=“es”>Contenido de texto</strong>
Ten en cuenta que una etiqueta puede tener varios pares atributo-valor, como se ve en el ejemplo anterior, pero nunca se debe repetir el mismo atributo en una misma etiqueta varias veces, ya que sobreescribiría al anterior. El orden de los atributos no importa. Más adelante explicaremos que tipos de atributos existen y para que sirven.

Sin embargo, una etiqueta puede contener desde un fragmento de texto hasta un grupo de etiquetas. Esto depende mucho de la etiqueta a utilizar, y se verá más adelante en el apartado de etiquetas. Un posible ejemplo sería el siguiente:

<div id=“pagina”>
<strong>Contenido importante</strong>
</div>
Nótese que dentro de la etiqueta <div> vemos que no sólo hay un fragmento de texto, sino que además incluye otra etiqueta, <strong> en este caso. Esto ocurre en las etiquetas de agrupación, que veremos más adelante.

Comentario HTML
Los comentarios son una práctica muy común y habitual en los desarrolladores o programadores. Se basa en introducir breves fragmentos de texto que el navegador ignora y no tendrá en cuenta a la hora de crear la página visualmente, pero que a nosotros nos sirven de ayuda para documentar algún detalle, explicar algo importante o simplemente introducir algún texto que consideramos relevante:

<!-- Esto es un comentario de ejemplo que el navegador ignorará -->
Como se puede ver, para introducir estos comentarios en el código HTML, basta con escribir los fragmentos de texto <!-- y --> entre el comentario en cuestión que queramos incluir.

Arelys Viloria

Arelys Viloria

hace 2 años

Yo después de haber escrito mis apuntes de toda la clase: 💪😌👌
Yo al ver que todos las etiquetas estaban como apuntes en la descripción del vídeo: 🤡🤡🤡

Peter Quiñones Guerrero

Peter Quiñones Guerrero

hace 4 años

**Aquí un resumen de la clase de head y body.**😁Buen día

Juan Fernando López Hernández

Juan Fernando López Hernández

hace 4 años

Hi, this is my example:
HTML Code.

CSS Code.

JS Code.

And my result.

Osvaldo Morales Saravia

Osvaldo Morales Saravia

hace 4 años

https://lenguajehtml.com/html/introduccion/tabla-periodica-html5/
Les comparto esta “tabla periódica html” de una página que explica muy bien todo sobre este lenguaje de marcado.

Manuel Eduardo Chingay Lopez

Manuel Eduardo Chingay Lopez

hace 3 años

Esta imagen representa un poco la estructura del main, section y artícle.

Anggi Vanesa Pallares Solis

Anggi Vanesa Pallares Solis

hace 3 años
Dayona Diocelyn Herrera Garcia

Dayona Diocelyn Herrera Garcia

hace 3 años

Para generar una lista en visual code colocas “ul>li*n” ese n es el número de li que deseas colocar y al dar enter se generan automaticamente las etiquetas

Juan Carlos Valencia López

Juan Carlos Valencia López

hace 4 años
LUIS FERNANDO TORO HERRERA

LUIS FERNANDO TORO HERRERA

hace 2 años


Les dejo mi resumen de la clase sobre la estructura básica de body

Rafael Alvarez Cardona

Rafael Alvarez Cardona

hace 4 años

Cuando quieras crear una lista de mas de 1 elemento puedes escribirlo de la siguiente forma:

ul>li*5
//resultado
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
Gonzalo Giampaolo

Gonzalo Giampaolo

hace 3 años

“Usar solo div es una mala práctica”

Yo inspeccionando la web de Platzi: div div div div div div

Felipe Victoria

Felipe Victoria

hace 3 años

Se acuerdan que Freddy insiste mucho con el tema de aprender inglés? - miren lo mucho que empieza a tener sentido eso a la hora de entender lo que empezamos a construir en un proyecto web 😃

Liliana Marcela Herrera Morales

Liliana Marcela Herrera Morales

hace 2 años

![](

Me sentí como aprendiendo super poderes o magia aprendiendo todo esto jejeje, creo eu disfrutar[e mucho esto 😃

Fernando Emilio Díaz López

Fernando Emilio Díaz López

hace 3 años

Comparto mi codigo HTML con comentarios hasta esta clase

<!DOCTYPE html> <!-- Significa que todas las lineas siguientes son de HTML 5 -->

<html lang="es"> <!-- Este atributo almacena todas las etiquetas y el lang, el lenguaje de la pagina -->

<head> <!-- En la etiqueta head, se incluye todo lo necesario para cargar el proyecto, es decir, las dependencias, 
        librerias, fuentes y el CSS, hay que resaltar que esto no debe ser visible para el usuario -->

    <meta charset="UTF-8"> <!-- El charset define los caracteres especiales a usar -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Esto nos ayuda para que nuestra pagina web autoajuste su tamaño, muy util en los proyectos responsive -->

    <meta name="description" content="Esta pagina es de prueba en la clase 7, para el curso definitivo de HTML y CSS">
    <!-- Nos ayuda para que los buscadores muestren una pequeña descripcion de nuestra pagina -->

    <meta name="robots" content="index, follow">
    <!-- Esto autoriza a los robots de los buscadores que indexen y muestren la pagina en sus busquedas -->

    <link rel="stylesheet" href="./css/style.css"> <!-- Enlaza nuestro HTML con CSS -->

    <title>Clase 7</title> <!--Es el titulo de la pagina en la pestaña -->
</head>
<body> <!-- Aqui se incluye todo lo que el usuario puede ver texto, imagenes etc -->

    <!-- Etiquetas contenedoras -->

    <header> <!-- Encabezado del proyecto -->
        <nav></nav> <!-- Barra de navegacion si se requiere -->
    </header>
    <main> <!-- Main area -->
        <section> <!-- Division de una seccion de la pagina -->
            <article> <!-- Uno de muchos articulos de la pagina -->

            </article>
        </section>
        <ol> <!-- Lista ordenada -->
            <li> Soy un elemento ordenado </li> <!-- Elemento de la lista ordenada -->
        </ol> 

        <ul><!-- Lista desordenada -->
            <li> Soy un elemento desordenado </li> <!-- Elemento de la lista desordenada -->
        </ul> 
    </main>
    <footer> <!-- Pie de pagina -->

    </footer>

    <!-- Etiquetas de contenido -->

    <p>Esto es un parrafo</p> <!-- Parrafos de texto -->

    <!-- Etiquetas de encabezado -->

    <h1>Soy un titulo</h1>
    <h2>Soy un titulo</h2>
    <h3>Soy un titulo</h3>
    <h4>Soy un titulo</h4>
    <h5>Soy un titulo</h5>
    <h6>Soy un titulo</h6>

    <!-- Semanticamente solo existen 6 niveles de encabezados h -->

    <a href="#">Soy un link</a> <!-- Etiqueta ancla o etiqueta link -->
    
</body>
</html> <!-- En el lenguaje HTML todo tiene un orden  -->
Marco Antonio Achury Palma

Marco Antonio Achury Palma

hace 4 años

Muy buen curso. Pero tengo una critica. Muchas palabras en spanglish tecnico, ejemplo renderizar, que además se dicen sin haber explicado el significado. Obviamente que el ingles es el idioma en que se desarrolla la tecnología pero tenemos que adaptarla sin acabar nuestro idioma y buscar térmicos que sean entendidos por los mas novatos.

Jeffer Steven Nuñez Aragon

Jeffer Steven Nuñez Aragon

hace 4 años
umoari
<header></header> este es el elemento contenedor que representa la sección del encabezado de nuestra página web.
	
<nav></nav> este es el elemento contenedor que representa la sección del menú de navegación de nuestra pagina web. Siempre va dentro de <header></header>.

<main></main> este es el elemento contenedor que representa el área del contenido principal de nuestra página.
	
<section></section> este es el elemento que representa una sección genérica de un documento.
	
<article></article> este elemento representa un contenido independiente o auto-contenido en un documento, puede ser independiente o reutilizable.
	
<footer></footer> este elemento contenedor que representa la sección final de nuestra página web.
	
<div></div> este elemento sirve para crear secciones o agrupar contenidos. A diferencia de los elementos que vimos anteriormente, div no es semántico y no expresa por sí mismo el significado de cada sección. Por eso es un buena práctica estructurar nuestra página web con HTML semántico para que podamos entender fácilmente qué sección es cuál.

<ol></ol> este elemento sirve para crear una lista ordenada, es decir con números.
	
<ul></ul> este elemento sirve para crear una lista desordenada, es decir con viñetas.
	
<li></li> este elemento se coloca dentro de <ol></ol> o <ul></ul> sirve para definir un elemento de nuestras listas.

<p>Soy un texto</p> de párrafo, este elemento define un párrafo de texto.

<h1>Soy el título más grande, o el título principal</h1>
	
<h2>Soy un título más pequeño que h1, o un subtítulo</h2>
	
<h3>Soy un título más pequeño que h2</h3>
	
<h4>Soy un título más pequeño que h3</h4>
	
<h5>Soy un título más pequeño que h4</h5>
	
<h6>Soy el título más pequeño</h6>```
Gabriel Mundaray

Gabriel Mundaray

hace 4 años

No estaba muerto, estaba de parranda, SUPER MAL de mi parte, estuve 1 semana sin entrar a platzi, ya entramos en ritmo de nuevo.

Railly Hugo

Railly Hugo

hace 4 años

Etiquetas semánticas interesantes:
-Details: Define un bloque de contenido “toggable”, que incluye un <summary> o incluso más <details>
-Summary: Vista previa del contenido “toggable”, va dentro de un <details>
-Time: Define el tiempo basado en un reloj de 24 horas. Ver más sobre strings de tiempo.
-Mark: Resalta un bloque de texto.

Xiara Matos Pimentel

Xiara Matos Pimentel

hace 2 años

Les comparto este recurso maravilloso que encontré: https://allthetags.com/

Carlos Armando Gardea Hernández

Carlos Armando Gardea Hernández

hace 2 años

Este es mi pequeño aporte, espero les sirva, ¡saludos!

<!DOCTYPE html> <!-- Etiqueta de HTML5 -->
<html lang="es-MX"> <!-- Lenguaje de la página (para las traduccinoes de los buscadores) -->
<head> <!-- Contenido lógico para el buscador de la página -->
    <meta charset="UTF-8"> <!--Normaliza todos los caracteres de la pagina para permitir caracteres especiales y 
        evita caracteres raros-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ajusta el viewport a la pantalla del dispositivo móvil 
        (responsive design, ver docs)-->
    <meta name="author" content="Carlos "> <!-- Autor de la página -->
    <meta name="creator" content=""> <!-- Creador de la página (empresa o institución)-->
    <meta name="Publisher" content=""> <!-- Publicador de la página -->
    <meta name="robot" content="index, follow"> <!-- Permite a los robots a posicionar nuestra página en las busquedas (ver docs) -->
    <meta name="description" content="Página de inicio del curso definitivo de HTML y CSS en Platzi">
    <title>Mi página 1</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body> <!-- Contenido visible por el usuario -->


    <!-- Es importante tener la semántica de HTML5 con header, main y footer (ninguno de estos puede ir dentro de otro, son para 
        separar las secciones principales de una página y son buenas prácticas en lugar de hacerlo con puros div) -->


    <header> <!-- Encabezado -->
        <nav></nav> <!-- Barra de navegación -->
    </header>
    

    <!-- Es importante tener la semántica de HTML5 con header, main y footer (ninguno de estos puede ir dentro de otro, son para 
        separar las secciones principales de una página y son buenas prácticas en lugar de hacerlo con puros div) -->


    <main> <!-- Contenido principal (puede contener múltiples sections) -->
        <section> <!-- Sección de contenido principal (puede contener múltiples articles) -->
            <article> <!-- Subseccion del contenido de las sección padre-->

            </article>
            <article>
                
            </article>
            <ul> <!-- Unordered List (Lista desordenada con puntos, guiones, etc.) -->
                <li> Soy una pera desordenada </li> <!-- List Index (Un indice o valor dentro de la lista padre [no importa si es ol o ul]) -->
            </ul> 
            <ol> <!-- Ordered List (Lista ordenada con números) -->
                <li> Soy una manzana ordenada </li>
            </ol> 
        </section>
    </main>


    <!-- Es importante tener la semántica de HTML5 con header, main y footer (ninguno de estos puede ir dentro de otro, son para 
        separar las secciones principales de una página y son buenas prácticas en lugar de hacerlo con puros div) -->


    <footer> <!-- Pie de página -->

    </footer>


    <!-- Es importante tener la semántica de HTML5 con header, main y footer (ninguno de estos puede ir dentro de otro, son para 
        separar las secciones principales de una página y son buenas prácticas en lugar de hacerlo con puros div) -->


    <div> <!-- Otro separador por secciones y este es un comodín -->

    </div>
    <h1>Soy un titulo 1</h1> <!-- Título 1 (sólo debe haber uno) -->
    <h2>Soy un titulo 2</h2> <!-- Título 2 (va después del h1) -->
    <h3>Soy un titulo 3</h3> <!-- Título 3 (va después del h2) -->
    <h4>Soy un titulo 4</h4> <!-- Título 4 (va después del h3) -->
    <h5>Soy un titulo 5</h5> <!-- Título 5 (va después del h4) -->
    <h6>Soy un titulo 6</h6> <!-- Título 6 (va después del h5) -->
    <p>Soy un párrafo</p> <!-- Párrafo con texto dentro -->
    <a href="#">Soy un link</a>
</body>
</html>
Daniel Carmona

Daniel Carmona

hace 2 años

La estructura es muy importante !!

Richard Josbranil López Ortega

Richard Josbranil López Ortega

hace 2 años

Typo en español significa error de tipografía.

Por ejemplo, al escribir inictial en vez de initial.

LESLY ABIGAIL CRUZ JIMENEZ

LESLY ABIGAIL CRUZ JIMENEZ

hace 2 años

Reto Lista de Super

Gregory Subero

Gregory Subero

hace 2 años

Guia de etiquetas contenedoras: https://www.neoguias.com/etiquetas-contenedoras-html/
❤️

Pachas Jenifer

Pachas Jenifer

hace 3 años


Victor Javier Martínez Guillén

Victor Javier Martínez Guillén

hace 4 años

si presionan Ctrl+ Enter, no importa en que parte del código estén, da enter a una línea nueva

Si solo dan enter por en medio de la línea de código:

<p>Etiqueta 
de párrafo</p>

Si dan ctrl + enter por en medio de la línea de código:


<p>Etiqueta de parrafo</p>
	"nueva linea"
Israel Castro Urieta

Israel Castro Urieta

hace 4 años

#DiNoAlDivismo

Anderson Josué Oroya Silva

Anderson Josué Oroya Silva

hace 4 años

He visto página que usan solo div y la verdad que para el SEO es un desastre. Muy buenas prácticas 😃

José M. Veintimilla

José M. Veintimilla

hace 3 años

Es recomendable solo tener un <h1> por página 😄

Luis Enrique Hernández Zamora

Luis Enrique Hernández Zamora

hace 3 años
Les dejo este validador de semantica de HTML de la W3C para que comprueben si la semantica de su estructura HTML es correcta https://validator.w3.org/#validate_by_input
Misael Gomez

Misael Gomez

hace 2 años

Un dato importante es que en cada página solo debe de haber solo un h1, para que google te tome más en cuenta

enriquerabelltalamantes

enriquerabelltalamantes

hace 4 años

SI saben ingles les recomiendo este sitio uq eexplica mucha documentacion html

Gerardo Salvador Jacobo Mejia

Gerardo Salvador Jacobo Mejia

hace 4 años

con esta clase me quedo muy claro el uso de listas y así quedo la tarea 😜

José Jacobo Capa Angamarca

José Jacobo Capa Angamarca

hace 4 años

Realmente los profesores hacen ver demasiado fácil la programación, con esta explicación me tomo poco tiempo aprender html5

Andres Mena Dorantes

Andres Mena Dorantes

hace 4 años

¡Al fin! llevaba tiempo intentando aprender Front y el porqué de las cosas.

Como no encontré información clara me dedique al back (C# y sql).
Espero este curso sea util para entender las diferencias entre <div> <span> y el z index entre otras.

Elvis Rafael Perez Gutierrez

Elvis Rafael Perez Gutierrez

hace 4 años

Etiquetas de contenido: Llevarán el texto, imágenes videos a renderizar en el proyecto: p, h,a
Etiquetas contenedoras: llevan más etiquetas adentro y nos ayudan a generar la estructura de una página: div, footer, header, main

user_deleted_1572741

user_deleted_1572741

hace 3 años

📌 <body> permite representa el contenido de un documento HTML, solo puede haber un elemento de este tipo en un documento.

Alexandra López Losada

Alexandra López Losada

hace 4 años

¿Las listas no necesitan ir dentro de una etiqueta contenedora?

DANIEL SUAREZ

DANIEL SUAREZ

hace 4 años

Hola a todos me gustaria recibir el feedback de mi código, me gustaria saber si semanticamente esta bien 😃 gracias

<main class="container">
      <section class="main-post">
        <a href="#">
          <article class="post-card">
            <figure class="figure">
              <img src="img/photo/fixed.png" alt="" width="30" height="30" />
            </figure>
            <aside class="postCard-description">
              <div class="postCard-dates">
                <p class="card-comunity"><small>Comunidad Frontend</small></p>
                <p class="card-date"><small>08 Sept 2020</small></p>
              </div>
              <h2 class="card-title">Design System</h2>
              <p class="card-description">
                En esta charla aprenderemos acerca de deisgn system con un
                experto en el tema, @rulótico nos acompaña el día de hoy..
              </p>
            </aside>
          </article>
</section>
        </a>

Tengo duda si utilice bien el aside si es asi, mi reto es dejar de utilizar div y empezar a utilizar las nuevas etiquetas que me trae html5…les dejo como es mi blog…

Jossie Steeven Quintero Giron

Jossie Steeven Quintero Giron

hace 4 años

Para probar tu pagina sin tener que estar recargando a cada rato usamos la extensión de VSCode llama Live Server

Verónica Castejón Yepez

Verónica Castejón Yepez

hace 8 meses
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-01-24%20221843-33e8862f-24bd-4cfd-b8a8-af3f5e62ee9e.jpg)![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-01-24%20221931-e6728d57-7679-440a-98d2-edb02ccab7d2.jpg)
Viviana Mora

Viviana Mora

hace 2 años

Vengo del curso de Prework y me dieron este tip, si ponen html:5 aparece parte del esqueleto con algunas etiquetas meta principales

< 
<!DOCTYPE html> 

<html lang="en"> 

<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>Soy isasistemas</title> 

</head> 

<body> 

    <article> 

        Soy Isasistemas, hola mundo. 

    </article> 

</body> 

</html> 
>
Any Yeilinet Omaña Bustamante

Any Yeilinet Omaña Bustamante

hace 2 años

Acá todas las etiquetas de body que el profe nos enseña en el vídeo ❤️

<!-- Cuerpo de la página--->

    <body>

        <header> <!--Encabezado de la web-->
            <nav><!--Barra de navegación-->
            </nav>
        </header>

        <main><!--Contenido principal-->
            
            <section> <!--Secciones-->
                
                <article> <!--Artículos-->

                </article>

            </section>

            <ul> <!--Lista desordenada, con viñeta de puntos-->
                <li> <!--Elemento de la lista-->
                    Gato 1: Gusito
                </li>

            </ul> 
            <ol></ol> <!--Lista ordenada, numerada-->
 
        </main>
            
        <footer> <!--Pie de Página de la web-->

        </footer>

        <div> <!--Es muy mala práctica desarrollar toda la web solo con div-->
        </div>

        <p></p><!--Texto-->

        <h1></h1> <!--Título o texto más grande desde h1 hasta h6.
        Mientras más grande, más pequeño el título-->

        <a href="#"></a> <!--Link-->

    </body>
OSWALDO DE JESÚS MONTES CAMARILLO

OSWALDO DE JESÚS MONTES CAMARILLO

hace 2 años

¡¡Genial!! Las bases principales.

Alexander Josueph Mendoza Rodriguez

Alexander Josueph Mendoza Rodriguez

hace 2 años

Etiquetas

Existen dos tipos de etiquetas: Etiquetas contenedoras y etiquetas de contenido.

  • Las etiquetas contenedoras llevan más etiquetas dentro y nos ayudan a organizar la estructura de la página web.
  • Las etiquetas de contenidos llevan texto, imagenes, videos y todo lo que queremos que se muestre al rederizar.

Hay una etiqueta para cada parte de las secciones de la anatomía de la web.

Siguiendo la estructura encontramos que

Encabezado - Header

<header> </header>

Barra de navegación

<nav> </nav>

Parte Principal - Main Part

<main> </main>

Nota: Va a ir siempre abajo del header.

Pie - Footer

<footer> </footer>

Ahora bien.

Dentro del main podemos crear secciones tales cómo

<section> </section>

Y dentro de las misma articulos

<article> </article>

Dentro de ellos podemos crear listas tales cómo:

  • Listas númeradas: <ol> </ol>
  • Listas de puntos: <ul> </ul>

Y dentro de cada una para crear los elementos se usa

<li> </li>

Tal que queda

<ul>
<li> Hola </li>
<li> Como estas? </li>
</ul>

El uso de las etiquetas se llama layout o maqueticación de donde existira cada uno de los contenido.

El HTML Semantico lleva todo organizado según uso. Es decir, para el header se usa la etiqueta header y para el foot se usa la etiqueta footer.

El uso de

<div> </div> para una sección que se puede usar su propia etiqueta está mal y es una mala práctica.

Etiquetas de textos

Parrafos

<p> </p>

Encabezado

<h1> </h1>

NOTA: Van del h1 al h6 y según se alejan del h1 se vuelven más pequeñas las letras.

Etiqueta de ancla - Hipervinculo

<a href=” “> </a>

Dentro de las comillas va el link y en el espaciado va el texto a exponer.

Yossimar Pabon lopez

Yossimar Pabon lopez

hace 2 años

fernando carucy

fernando carucy

hace 2 años
Alexander Reyes

Alexander Reyes

hace 4 años

En esta referencia podemos ver que nos resuelve las etiquetas semánticas respectos en HTML Secciones y esquema de un documento HTML5

sadsax x_x

sadsax x_x

hace 3 años

No se si es un aporte o no, pero, si le bajan el zoom a la pagina un poco, el video de la clase cualquier curso que esten tomando se vera un poco mas grande (obvio recomiendo bajar el zoom un POCO para poder leer los comentarios que en ocaciones ayudan a entender lo que no entendimos de la clase)

Santiago Rodriguez Chaves

Santiago Rodriguez Chaves

hace 3 años

  • En el <body> hay etiquetas de contenido y etiquetas contenedoras.

  • Hay una etiqueta para cada parte que existe en la anatomia de la pagina web ( header, main, sidebar, footer)

  • usar <div> para todas las etiquetas es una muy mala practica

  • Usar las etiquetas correctas y hacerlas funcionales para cada una de las cosas con la correcta indentacion se conoce como HTML semantico, esto es usado por desarrolladores y hace ver tu trabajo mas profesional.

  • Las etiquetas <h1> son usadas para titulos y entre mas grande el numero del h mas pequeño sera el tamaño del texto, lo aconsejables es usar hasta h3 para subtitulos y <p> para parrafos y contenido en textual en la pagina.

  • <a href="/"> es usado para tener hipervinculos dentro de la pagina.

Cristian Lionel Waitzel

Cristian Lionel Waitzel

hace 3 años

Index y su estructura básica:body

Todo lo que esté en el body lo va a poder ver el usuario. En el body hay dos tipos de etiquetas; etiquetas de contenido y etiquetas contenedoras.
Etiquetas de contenedoras: van a llevar otras etiquetas adentro, y nos van a ayudar a generar la estructura de nuestra página como vimos en la anatomía de una página web.
Etiquetas de contenido: son las etiquetas que van a llevar el texto, las imágenes, los vídeos o cualquier cosa que se vaya a poder renderizar en el proyecto.
Cabe destacar que hay una etiqueta para cada parte de la anatomía del documento html.
<header></header>
Ésta etiqueta es el encabezado de nuestro proyecto, si éste header va a llevar una etiqueta de navegación, vamos a utilizar la etiqueta “nav” y va a ir adentro de éste “header”.
<header>
<nav></nav>
</header>

<main>
Si queremos trabajar una parte principal en la página web, la etiqueta que usamos es <main></main>; va a ir afuera del <header></header>, y abajo del header; main le va a decir al navegador que después del encabezado y de la barra de navegación viene todo el contenido principal.

<section>
Existen secciones, que podemos colocar dentro de main, lo hacemos con <section></section>
Y podemos colocar artículos, dentor de section, con <article></article>
<article></article>
También podemos crear listas, hay listas desordenadas o con viñetas <ul></ul>, y listas ordenadas o enumeradas<ol></ol>, “ol” significa “order list”, “ul” “unorder list”
<ul>
Dentro de <ul> o <ol>, usamos <li></li> “list idem”, como “el elemento de esa lista”, y aquí podemos poner texto.

  <ul>
<li>Aprendiendo programación</li>
  </ul>
  <ol></ol>

Y si queremos realizar el pie de la página, usamos la etiqueta <footer></footer>
<footer> </footer>

Hay otra etiqueta que se llama <div></div>, es un comodín, que antes la usaba para crear toda la estructura, sin respetar la semántica del doc html.
<div></div>
También tenemos las etiquetas de párrafo
<p></p>
También tenemos las etiquetas que se llaman encabezados o títulos, son de las etiquetas h1 hasta la h6, van de muy importante a nada importante.
<h1>Aprendiendo a programar</h1>
Existe una etiqueta más de contenido de texto, es la etiqueta de ancla, ésta etiqueta nos ayuda a crear “hipervínculos”.
<a href=#>Soy un link</a>
Por buenas prácticas nosotros tenemos que usar HTML semántico, es decir, usar cada etiqueta correctamente para crear la estructura de la página web.

Juan Felipe Mont-Cathalo

Juan Felipe Mont-Cathalo

hace 2 años

Buen ejercicio para recordarme tantas cosas que deje en el pasado, definitivamente voy a tomar las cosas con calma y darme el tiempo de aprender sin tanta presión

Jery Rafael Ramírez Teo

Jery Rafael Ramírez Teo

hace 4 años

Tome un curso en otra plataforma online y me llama la atención que el instructor de ese curso usaba el div para crear el main o alguna section y como estudiante seguí esa practica en mis proyectos.

Pedro Mayorga

Pedro Mayorga

hace 2 años

Si les interesa este grafico resume un poco la estructura de las paginas de la que nos habla con las etiquetas.

Ulises Alejandro Mánica Caricio

Ulises Alejandro Mánica Caricio

hace 2 años

Si quieren hacer comentarios en los diferentes comandos deben presionar CTRL+ K+C y se anexara de inmediato <! - - Y aqui dentro ponen su comentario - - >

Pablo Lucas

Pablo Lucas

hace 3 años

Hola. Les comparto este repositorio que sirve de guía para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificación y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 😄.
Platzi-Test

Joaquín Escalona Mella

Joaquín Escalona Mella

hace 2 años

Index y su estructura básica: body

body es la etiqueta que identifica la parte visible de nuestro sitio web. Es muy importante usar HTML semántico y no llenar todo de <div> para que nuestro sitio sea mejor interpretado por el navegador y, por lo tanto, más accesible.

Existen dos grandes tipos de etiquetas: las contenedoras y las de contenido

<aside>
💡 Hay una etiqueta contenedora para cada parte de la Anatomía del Sitio Web (Clase pasada)

</aside>

Etiquetas comunes:

  • header: cabecera de la página
    • nav: menú de navegación
  • main: contenido principal
    • section: Representa una sección genérica de un documento. Es una agrupación temática de contenido.
      • article: Representa una composición completa o autónoma en un documento. Se puede distribuir o reutilizar de forma independiente. Podría ser una publicación en un foro, un artículo de revista, una entrada de blog, un comentario enviado por un usuario, un widget o dispositivo interactivo, o cualquier otro elemento de contenido independiente.
      • ul: lista de elementos sin enumerar.
      • ol: listas de elementos enumerarados
        • li: listar elementos de la lista
      • div: division de contenido genérico (usar solo cuando coloquemos algo que no sepamos su etiqueta semántica
      • h1 - h6: Titulos
      • p: parrafos
      • a: ancla o enlace a una url interna o externa del documento
  • footer: pie de página
Jeisson Espinosa

Jeisson Espinosa

hace 2 años

Información resumida de esta clase
#EstudiantesDePlatzi

  • Existen etiquetas de contenido y etiquetas contenedoras, en las contenedoras se encuentran etiquetas que generan la estructura del proyecto

  • <header> es la etiqueta que usamos para crear el encabezado

  • Existen etiquetas que usamos para trabajar ciertas partes de nuestro proyecto

  • <ul> o <ol> son etiquetas que usamos para crear listas ya sea organizadas o desorganizadas

  • Definitivamente, es una buena práctica, usa HTML5 semántico

  • La etiqueta <h1> indica que esto es un título y existen del <h1> al <h6>

  • Tenemos la etiqueta para indicarle que esto es un hipervínculo o un enlace a algún otro lugar

sara_saad09

sara_saad09

hace 3 años
Fer_Sanabria

Fer_Sanabria

hace 4 años

como hago que el link me lleve a una pagina?

Juan Camilo Valencia Silva

Juan Camilo Valencia Silva

hace 3 años

RESUMEN

En el body existen etiquetas de contenido y etiquetas contenedoras. Las contenedoras tendrá más etiquetas por dentro. Todo esto se conoce como HTML semántico

  • Etiquetas
    • <header> </header> Es la cabecera
      • Si esa cabecera lleva una barra de navegación tendrá una etiqueta <nav> </nav>
    • <main> </main> Es para trabajar el contenido principal
      • Dentro del aquí pueden existir secciones que son <section> </section>
        • Dentro de estas pueden existir artículos <artitle> </article>
      • Para trabajar listas hacemos uso de las etiquetas
        1. <ul> </ul> para lista desordenada
          1. Dentro de estas podemos generar un list item mediante la etiqueta <li> </li> y ahí ya se puede poner texto
        2. <ol> </ol> para lista ordenada
    • <footer> </footer> Es para trabajar el pie de la página
    • <div> </div> Sirve para dividir o seccionar contenido
    • <p> </p> Etiqueta para generar un párrafo
    • <h1> </h1> Etiqueta de encabezado usado para título. Va hasta el h6
    • <**a** *href*="#">Soy un link</**a**> Es una etiqueta de ancla. Nos sirve para los hipervínculos

CÓDIGO

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8" />
        <meta name="description" content="Esta página te mostrará fotos de gatos" />
        <meta name="robots" content="index, follow" />
        <title>Es mi página</title>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <link rel="stylesheet" href="./css/style.css">
    </head>

    <body>
        <header>
            <nav></nav>
        </header>

        <main>
            <section>
                <article>
                </article>
            </section>
            <ul>
                <li>
                    Soy una lista desordenada
                </li>
            </ul>
            <ol>
                <li>
                    Soy una lista ordeanda
                </li>
            </ol>
        </main>

        <footer>
        </footer>

        <p>Soy un párrafo</p>

        <h1>Encabezado con h1</h1>
        <h2>Encabezado con h2</h2>
        <h3>Encabezado con h3</h3>
        <h4>Encabezado con h4</h4>
        <h5>Encabezado con h5</h5>
        <h6>Encabezado con h6</h6>

        <a href="#">Soy un link</a>
    </body>
</html>
Rivery2007

Rivery2007

hace 3 años

Para agregar comentarios en un documento HTML utilicen la etiqueta <!–Comentario–>
Si usan VS Code, solo escribiendo ‘<!–’ se los autocompleta. 😃

Dario Paladines

Dario Paladines

hace 3 años

Existen dos etiquetas para crear listas

  • <ul> genera una lista pero sin un orden alguno, es decir va colocando “puntos” a cada uno
  • <ol> genera una lista en el navegador con un orden, por decir numerando c/u

Dentro de estas etiquetas debe ir la etiqueta <li> y escribir el texto

Tomas Cano

Tomas Cano

hace 3 años

Algo que tal vez les sirva puede ser el libro: CSS en 44 minutos (Está en inglés). Les dejo el link: https://tinyurl.com/4yaf4d99

Pablo Perez

Pablo Perez

hace 3 años

Las etiquetas H, no indican tamaño de texto como dice el video, todo lo que sea tamaño de texto color tipo de fuente o algun otro estilo se utiliza css, las etiquetas H, van de H1 a H6, Esto le indica al navegador la relevancia del titulo dentro de la etiqueta, por ejemplo H1 es el titulo mas importante de la pagina por lo general es bueno utilizar alguna palabra clave dentro teniendo en cuenta algo de seo, es una mala practica colocar varios h1 en una misma pagina, siguiendo con los las etiquetas H, su nivel de importancia va en el el orden que las nombra siendo H1 uno la mas importante y H6 menos importante, por lo general se utiliza h1 h2 h3, y hasta h4 quizas, rara vez utilizando h5 y h6, espero no confundir pero veo que en el video dice que determina el tamaño del titulo, y para alguien que no sabe es un concepto totalmente errado.

Abigail Perez

Abigail Perez

hace 3 años
Daniela Betancur

Daniela Betancur

hace 3 años

mis apuntes

Felipe Garcia

Felipe Garcia

hace 3 años

Las etiquetas de sección de contenido son:
-header : Es la cabecera de la pagina
-main: Contenido de la pagina
-footer: Pie pagina
-section: Es un contenedor genérico que agrupa contenido que esta relacionado
-article: Contenedor que representa contenido independiente

Luis Mendoza

Luis Mendoza

hace 3 años

Excelente información 😃 Un aporte, por si encuentran páginas que no utilizan <header>, <section> o <footer>

  • Antes del lanzamiento de HTML5 se utilizaba mucho la etiqueta <div> para maquetar, o incluso mucho antes, era muy común maquetar todo con tablas <table> 🤣.

Ya no lo hagan please 😢

Cristian Ramos

Cristian Ramos

hace 4 años
<h3>Etiquetas contenedoras en forma de lista usando lo aprendido</h3>

        <li>
            <li>header: encabezado </li>
            <li>nav : para barra de navegacion y va dentro del header</li>
            <li>main :contenido ppal </li> <!-- main va fuera y debajo del header -->
            <li>footer : pie de pagina</li>
            <li>section : </li> 
            <li>article : </li> 
            <li>ul :lista desordenada</li> 
            <li>ol :listas ordenada</li> 
            <li>va dentro de una lista, elementos de lista</li> 
            <li>div : </li>
            <li>parrafo</li> 
            <li>h1 - h6 : titulos</li>
            <li>a href = ""; : etiqueta ancla, genera ipervinculos</li> 

        </li>```
Dani-Ideas

Dani-Ideas

hace 4 años

les dejo mis notas

dimajile

dimajile

hace 4 años

Excelente curso, este si es moderno. La mayoría todavía enseñan etiquetas de HTML antiguas.

Jorge Joel Anaya Moreno

Jorge Joel Anaya Moreno

hace 4 años

Es super importante dejar de usar <div> para todo, y comenzar a usar los elementos semánticos que nos provee html5

Isaac Rodriguez Manjarrez

Isaac Rodriguez Manjarrez

hace 4 años

great!! 😄

JoaoGarduno

JoaoGarduno

hace 4 años

Etiquetas semanticas:
html
body
section
article
header
aside
nav
footer

Néstor Sánchez

Néstor Sánchez

hace 4 años

No se que pasa pero la etiqueta de cierre de head se coloreó de rojo. Es normal?, Qué debo hacer?