Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

Les recomiendo mucho acompañar los contenidos vistos aquí en Platzi con actividades de Free Code Camp, ahí tendrán problemas prácticos casi en el orden que va el curso y ademas también podrán tener una certifiacion al terminar. Piénsenlo al final de este curso tendrían el diploma de Platzi y el de Free code camp

Les dejo el link: https://www.freecodecamp.org/

Algo que me funciona a mi es saber el significado exacto de cada término. Esta técnica me hace mucho más fácil recordar cada etiqueta o comando o lo que sea, por ejemplo:
p = paragraph
br = break
h1 = head one
ul = unordered list
Etcétera.
Todo, absolutamente todo tiene una razón de ser. Cuando investigas el porqué de las cosas, es mucho más fácil, recordar y aprender.

Dejo el link al apunte que hice para quien pueda servirle de complemento: Apunte del Curso de Frontend Developer

Aparte de los tributos como :

class="mi-clase" 
id="mi-id"

Podemos crear atributos personalizados, acompañados de la palabra “data”.

<ul data-nombrePersonalizado="valor del atributo">
</ul>

El atributo ALT es muy útil para el SEO pues le dices al buscador de que trata la imagen.

Muy buen curso, recomiendo el curso gratis de Programación Básica para que te sientas muchísimo mas cómodo con estos conceptos!

No puedo concentrarme si ella me habla <love> her</love>

Considero que para el buen aprendizaje de las etiquetas es necesario saber su significado y no solo identificarlas por lo que hacen por ejemplo:

<ul></ul>

es para una lista desordenada por sus siglas unordered list, al igual que

<ol></ol>

es para una lista ordenada por sus siglas ordered list

Elemento

Es un objeto que el navegador puede entender, está formado por:

*Etiquetas

Marcan el inicio y el final de un objeto, por lo que hay una etiqueta de apertura <h1> y una de cierre </h1>, la etiqueta de cierre siempre debe llevar /.

*Contenido

Puede ser texto u otros elementos.

*Atributos

Son características que le podemos dar al objeto, siempre van en la etiqueta de apertura y tienen un valor:

<h1 class= ”Saludo”>

Siendo class el atributo y “Saludo” el valor.

Elemento vacío 

Son objetos que únicamente tienen atributos y no necesitan de etiqueta de cierre, por ejemplo:

<img src=” puppy.png” alt=” imagen de mi perro” >

Anidamiento

Cuando un objeto contiene uno o mas objetos estamos hablando de anidamiento, un ejemplo sería tener un cuadro (objeto principal) y dentro del cuadro poner muchas imágenes para hacer un collage (los objetos que van dentro del del objeto principal.

En verdad siempre escuchaba que el atributo “alt” para imágenes siempre era para en casuísticas donde una persona ciega deseaba saber su significado. Pero nadie explicaba sobre los lectores de pantalla.

Cuando se va a anidar elementos, hay que saber que por cuestiones de semantica no podemos anidar algunos, por ejemplo no podemos anidar un parrafo dentro de otro…

<p>
	Parrafo 1
	<p>Parrafo 2</p>
</p>

• Anatomía de un elemento HTML: Atributos, anidamiento y elementos vacíos.

• Títulos: H1, H2, H3, H4, H5 y H6
  Todos los elementos de HTML tienen una etiqueta de apertura y otra de clausura que tiene un slash, que justamente indica su cierre.
  Atributos se componen del nombre del atributo, un símbolo = y el valor del atributo. Siempre van adentro de la etiqueta de apertura.

• Anidamiento
  Se entiende el anidamiento a base de la identación de los elementos. Existen elementos que existen por definición dentro de otros elementos, como por ejemplo ul que contiene elementos li.
  Una correcta anidación será clave para un renderizado correcto de nuestra página web. Un elemento mal anidado podría tener como consecuencia que el componente no se renderice por el render tree.

• Elementos vacíos
  Img que lleva como atributos src y alt

El atributo alt será utilizado por lectores de pantalla para describir a los usuarios la imagen que deberían de ver si pudiesen ver. Este es un atributo que debe usarse si queremos hacer de nuestro sitio un sitio amigable con la diversidad.

Muy buena explicación, para complementar:

• Elementos HTML Mozilla
• HTML en la W3S

Yo los conocía como signos de “mayor y menor que” 😃 pero paréntesis angulares suena interesante 😄

Les comparto mis notas de la clase en EVERNOTE https://www.evernote.com/l/AhAYrDKgpXFNy6xvQhHci9M4LYw1kMWdwCc/

Las etiquetas HTML siempre llevarán etiquetas de cierre y pueden anidarse, pero existen casos especiales en las que las etiquetas no llevan etiqueta de cierre, como fue el ejemplo de la imagen, usualmente para esas etiquetas suelen autocerrarse de esta forma:

<img src="#" alt="#" />

PD. Por buenas prácticas siempre se le debe poner un alt a las imágenes

Atributo ALT
Los motores de búsqueda utilizan este atributo para identificar el contenido de la imagen, ya que los archivos de imagen generalmente no pueden ser leídos por los crawlers de los motores de búsqueda.

Pico parenntesis!!

<h1 class="descripción">Aquí va un título</h1>
<p>El "<h1>" es la etiqueta de apertura</p>
<p>Y el "</h1>" es la etiqueta de cierre</p>
<p>"class" es un atributo</p>
<p>"descripción" es el valor del atributo</p>
<img src="Aquí va el url de la imagen" alt="Aquí va una descripción de la imagen por si no carga"
<p>"atl" también sirve para las personas ciegas</p>

Excelente pedagogía tiene la profesora. Explica muy bien.

Esto será útil saberlo cuando tenga problemas de código con React xd

**Anidamiento: **Es una práctica común colocar varios <div> dentro de otro <div> . Esto generalmente se conoce como elementos “anidados” y permite dividir los elementos en subsecciones o ayudar a los desarrolladores con el estilo CSS.

**Atributos: ** son palabras especiales utilizadas dentro de la etiqueta de apertura, para controlar el comportamiento del elemento.

Elemento vacío: es un elemento de HTML, SVG, o MathML que no puede tener nodos secundarios (es decir, elementos anidados o nodos de texto).

Screen Readers: son un software que permite la utilización del sistema operativo y las distintas aplicaciones mediante el empleo de un sintetizador de voz que “lee y explica” lo que se visualiza en la pantalla, lo que supone una ayuda para las personas con graves problemas de visión o completamente ciegas.

SIEMPRE TIENEN QUE CERRAR LA ETIQUETA
<img />
es una buena pratica.

dos paginas bastante utiles para este curso

https://www.w3schools.com/

https://www.freecodecamp.org/

https://jmacalupur.github.io/cursoFrontendDeveloper/

Poco a poco vamos a ir mejorando esta página web donde estarán los apuntes de las clases del curso, a medida que vamos aprendiendo.

En el desarrollo de páginas web es escencial que nuestra página sea lo mas fluida posible así nuestros visitantes no se van a abrumar por su cantidad excesiva de contenido y lentitud de la misma

las etiquetas de html son mas para temas semanticos y de seo, ya que todo lo que escribamos en html se puede modificar con css

Recuerden que VSC ya trae reinstalado Zend Coding y esto nos ayuda mucho ya que al teclear en un archivo html !+tab nos da la estructura básica de HTML.

no son signos de mayor y menor que… o solo es en matemáticas…

Las etiquetas en HTML se definen por un nombre que especifica (no en todos los casos) el tipo de contenido que representa rodeado por lo símbolos < y > por ejemplo la etiqueta

<p>nos indica que su contenido es un parrafo</p>
<ul><!--nos indica que el contenido es una lista sin ordenar--></ul>
<html><!-- nos indica que el contenido es código HTML--></html>

Algunas etiquetas de html se declaran en pares (etiqueta de apertura y etiqueta de cierre) como
las descritas en la parte de arriba y otras se declaran individualmente ya que no requieren un contenido:

<br><!--Este elemento se usa para insertar saltos de línea.-->
<link><!--Se usa para enlazar CSS externos con el documento actual.-->
<base><!--Define la URL base para las URLs relativas en la página.-->

Los atributos se declaran siempre dentro de la etiqueta de
apertura y pueden tener una estructura clave valor o solo valor como en el
siguiente ejemplo:

<!DOCTYPE html> <!–etiqueta con atributo de solo valor–>
<html lang=“es”><!–etiqueta con atributo clave y valor–>

En lo personal me gusta más el termino de corchetes angulares

Los atributos siempre van en la etiqueta de apertura.
-Class sirve para identificar el elemento y de esa forma poder darle formato con CSS.
Se escribe de la siguiente forma: [nombre del atributo] + [=] + [“valor de atributo entre comillas”]
-src: url o enlace de donde se encuentra el recurso a usar.

• alt: texto alternativo y descriptivo de la imagen. También es importante para propósitos de SEO.

Una vida ignorando para que servia el alt ya que solamente lo colocaba por obligación, gracias por la info ❤️

ELEMENTOS VACIOS
img src =“Hero.png” alt=“Cabecera principal”

con tan hermosa docente, quien no no le va a gustar atender a clases jajaja, saludos

Que sucede si ingreso un texto fuera de una etiqueta? Como lo interpreta el navegador?

El atributo alt en la etiqueta de imagen es muy importante no olvidarlo, ya que los motores de búsqueda indexan más las páginas que tienen semántica. Una correcta estructura HTML garantiza en buena medida un buen SEO.

Cuando accedemos a una página web nuestro navegador solicita al servidor un documento de texto, el cual está escrito en HTML (Hyper Text Markup Language).
.
.
¿Qué es HTML?
.
Es un lenguaje basado en etiquetas, mediante las cuales permite hacer referencia a todo tipo de información.
.

• Es el lenguaje con el que se describe y estructura la información que se muestra en internet.

.
.

¿Qué es una etiqueta en HTML y cómo se estructura?
.
En HTML existen una serie de etiquetas preestablecidas que tendremos que usar según se requiera en base a sus características.
.
En general, la estructura de las etiquetas es la siguiente.

<etiqueta>contenido</etiqueta>

• También es posible anidar etiquetas, como se muestra a continuación.

<p>Dentro de este texto, esta <strong>palabra</strong> es más importante que el resto.</p> 

Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

Cuando hablamos de elemento html nos referimos al conjunto de etiqueta de apertura, contenido y etiqueta de cierre.

Atributos
Aquí lo tenemos visto como ‘class’ este es super importante porque con class podemos darle un identificador al elemento y con este podemos en CSS decirle que estilos tendrá, estos atributos siempre van a ir en la etiqueta de apertura, no pueden ir ni en el contenido ni en la etiqueta de cierre.

Clase es uno de los atributos, también tenemos una cantidad de atributos diferentes después de este class seguirá un igual y luego el valor que tendra que ir entre comillas y este será justamente el valor que tomara CSS para añadirle los estilos

Los elementos vacíos, estos nos necesitan un contenido sino unos atributos especiales para poder renderizar o pintar una imagen, uno de estos atributos importantes es source o src que seguido tendrá un igual y entre comillas la dirección donde se encuentra ubicada la imagen seguido tenemos otro atributo llamado alt, este es muy importante por si la imagen no se puede renderizar para que el usuario vea algo en el navegador, esto también sirve para personas que con ciegas y deben utilizar screen readers o lectores de pantalla.

Otra podria ser
https://www.frontendmentor.io/challenges
contiene retos.

Saludos

Se nota que domina el tema!!!

Me gustan mucho las ilustraciones.

Les comparto con gusto esta hoja de apoyo para todas las etiquetas de HTML que les serán de ayuda para el curso 👉 link

En la explicación de debajo del video las comillas de las etiquetas, atributos etc… estan duplicadas.
<etiqueta atributo="“valor del atributo”">. Por ejemplo: <h1 class="“saludo”">.
src="“puppy.png”" alt="“mi mascota”">.

Me encanta que siempre que vengo a la sección de aportes de verdad encuentro excelentes recomendaciones e información adicional. ¡Gracias!

Nunca pares de aprender en platzi con Estefany

Elementos vacios??

usar class nos ayuda definir valores globales y id nos ayuda definir valores únicos

y se quedo Picoparentesis

Picoparentesis

siempre es importante repasar la base

#enamorado

<ul> significa Unordered List, osea Lista Desordenada

amigos!, les. recomiendo EL GRAN LIBRO DE HTML5 Y CSS, esmuy completó: http://www.mediafire.com/file/b419hzsnht9phur/EGLH5C3JS.rar/file

Resumen Clase#6

Con class le damos un identificador al elemento y con este identificador podemos en css indicarle que estilos va a tener.
Estos atributos deben ir en la etiqueta de apertura, no deben ir ni en el contenido ni en la etiqueta de cierre.
Anidamiento:
hay etiquetas que están dentro de otras etiquetas.
En la imagen anterior tenemos un titulo que es cosas que debo hacer hoy.
Una etiqueta llamada <ul> que significa lista desordenada y dentro de ella vamos a tener ítems que son leer media hora, reunirme con mi líder, etc.
Estos código están dentro del body y con eso podemos concluir que tenemos un anidamiento de etiquetas, es una parte fundamental ya que esto tiene que ver con el tiempo a ejecutarse.

El alt es muy importante por si sucede algo con la imagen y no se puede renderizar y el usuario puede ver algo en el navegador en caso de que no cargue la imagen entonces saldría el texto que dice mi mascota y el usuario ya sabrá que ahí en ese lugar iba mi mascota.
También es muy funcional para las personas ciegas y que tiene que usar scrent riders o lectores de pantalla, su función es leer la etiqueta alt y le dice al usuario mi mascota.

Les comparto la documentación que estoy creando a lo largo de este curso sobre HTML y CSS, al final del curso esto será un página webson estilos e interacción espero que a alguien le sirva

//Index.html (como se procesa nuestro codigo)

<!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>HTML for everyone</title>
    </head>
    <body>
        <main>
            <div id="title_container">
                <h1 id="main_title">Documentación HTML y CSS, siempre es bueno reforzar las bases</h1>
            </div>
        </main>

        <section id="html_section">

                <h2 id="html_title">Recordemos HTML</h2>

                <p id="html_def">HTML por sus siglas en inglés significa "Hyper Text Markup Language", traducido al español: <br> 
                "Lenguaje de Marcado de Hipertexto", nos va a permitir estructurar el contenido de nuestras aplicaciones web</p>
                
                <div id="html_process_container">
                    <h3 id="html_process_title">Pero, ¿cuál es el proceso que sigue el navegador para que nosotros veamos el contenido?</h3>
                    
                    <ol id="html_process_list">
                        <!-- Referenciar a explicaciones detalladas de lo que es cada proceso -->
                        <li id="html_process_item">Procesamiento del <a href="./anatonmíahtml.html">HTML</a> para crear el DOM</li>
                        <li>Procesa CSS para construir el CSSOM</li>
                        <li>El DOM se une con el CSSOM para crear el Render Tree</li>
                        <li>Se aplican los estilos CSS en el Render Tree</li>
                        <li>Se "pintan" los nodos en la pantalla para que tú puedas ver sel contenido de la página</li>
                    </ol>
                    
                </div>

                <div>
                    <h3>¿Quieres conocer más sobre HTML?</h3>
                    <a>Visita la sección de HTML</a>
                </div>

        </section>
        
        <section id="css_section">
            <div id="css_def_container">
                <h2 id="css_title">¿Qué es CSS?</h2>
                
                <!-- Añadir referencia visual -->
                <p id="css_def">Por sus siglas en inglés significa "Cascade Style Sheet", signifca en español: <br>
                "Hojs de Estilo en Cascada", recibe su nombre por la forma en la que se escribe; hacia abajo, como una cascada.</p>

            </div>
        </section>
                
        <div>

        </div>
    </body>
</html>

//Anatonmia.html

<!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>Estructura</title>
</head>
<body>
    <main>
        <h1>Conoce la estructura de los elementos HTML y empieza a escribir código</h1>

        <p>Un elemento HTML se compone de: <br></p>
        
        <ul>
            <li>Etiqueta <strong>&lt;&gt;</strong> de apertura  y <strong>&lt;/&gt;</strong> de cierre</li>
            <li>El contenido de la etiqueta: <stron>&lt;&gt;<strong>Contenido</strong>&lt;/&gt;</stron></li>
        </ul>
        
        <p>En los ejemplos anteriores, no viene especificado el nombre de las etiquetas</p> 
        <p>Cada etiqueta debe tener un nombre que corresponde al elemento HTML, para el ejemplo anterior puede ser:</p>
        <p><strong>&lt;h1&gt;Contenido&lt;/h1&gt;</strong></p>
        
        <div>
            <p><em>Existen etiquetas que se abren y cierran a sí mismas, para conocerlas explora la sección de etiquetas</em></p>
        </div>
    </main>

    <div>
        <div>
            <h2>Conoce todas las etiquetas HTML que existen</h2>
            <a href="./etiquetas.html">Ver etiquetas</a>
        </div>
    </div>

    <section>
        <h2>Atributos de etiquetas HTML</h2>
        <div>
            <p>Los atributos son caracteristicas que podemos añadirle a nuestro elemento HTML</p>
            <p>Algunos de estos atributos son completamente necesarios como en el caso de la etiqieta &lt;img&gt;
                que requiere un atributo "src" para poder cargar una imágen y pintarla en nuestras pantallas
            </p>
        </div>

        <a href="./etiquetas.html">Conoce todas las etiquetas HTML y sus atributos</a>
    </section>
</body>
</html>

Anidamiento

Cuando hay elementos dentro de otro elemento, esta es la base para crear aplicaciones correctamente.

<ul>
	<li>Elemento uno</li>
	<li>Elemento dos</li>
</ul>

Un Elemento HTML se compone por

• Etiqueta de apertura
• Contenido
• Etiqueta de Cierre

Dejo mis apuntes de esta sección 😛

Anatomía de un elemento HTML:

<h1>Hola</h1>
h1: Etiqueta de apertura
Hola: Contenido
</h1> Etiqueta de cierre
<h1>Hola</h1>: Elemento

<h1 class=“saludo”>
class: atributo
"saludo": valor
<h1 class=“saludo”>: Etiqueta de apertura

Hay atributos vacios y compuestos.
los compuestos tienen el nombre del atributo y el valor del atributo.
los vacios solo tienen el nombre del atributo.

Uno puede crear atributos en HTML y hay diferentes razones para usarlos, pondre screenshot de las partes importantes y tambien dejare el LINK
.

.

.

Hablando de las etiquetas de cierre, en HTML 5 es opcional. Esta forma de trabajar, si bien es más rápida de escribir y es interpretada correctamente por cualquier motor de renderizado modernos, puede ser confusa para algunos desarrolladores, especialmente de cara al mantenimiento de código de terceros. Por lo que, en general, se sigue recomendando cerrar las etiquetas.
.

Las etiquetas vacias tienen varias cosas a tener en cuenta dependiendo de lo que se esta suando
.

En esta pagina pueden ver una lista de elementos vacios de HTML y como funciona cada uno. LINK

HTML define 91 etiquetas que los diseñadores pueden utilizar para marcar los diferentes elementos que componen una página:

a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var.

< : le llamo: Signo mayor o abrir etiqueta

: Signo menor o cerrar etiqueta

<!-- Anatomía de un elemento HTML  -->

<!--Tag de apertura--><h1> 
<!--    Contenido     -->Hola
<!--   Tag de cierre  --></h1>
<!-- El tag de cierre se diferencia del de apertura por su slash ('/')-->

<!--Atributos-->
<h1 class="Saludos"/> <!--'class' sirve como un identificador de nuestro elemento-->

<!--Anidamiento-->
<body>
   <main>
    	<ul>
    	   <li>Sample text</li>
    	   <li>Sample text</li>
    	</ul>
    <main>
</body>
<!--Se refiere a cuando hay etiquetas dentro de otras-->

<!--Elementos vacíos-->
<img src="1230053823.jpg" alt="mi mascota"> <!--Estos no necesitan contenido (texto leíble en nuestra página), si no atributos especiales-->

Esta anatomía es de suma importancia para el inicio de un buen desarrollo ya que son las bases solidas de una buena programación e indentación del código ya que esto te llevara a resolver problemas de manera mas rápidos y eficientes a la hora de producción.

En HTML tenemos dos cosas importantisimas:

• Atributos: Son palabras reservadas que se utilizan dentro de la etiqueta de apertura, y controlan el comportamiento de nuestro HTML

• Valor: Son palabras que van entre comillas para identificar etiquetas para trabajar con otros recursos como CSS o JS

Para el ejemplo de la clase de anidamiento
UL = unordened list
ol = ordened list
Li = list item

Para mi fue mejor aprenderlo con nombre, ya que si creaba una lista y decia, “Ahora tengo que colocarle items”, automaticamente se me venia a la mente list item <li>

Buena explicación.

*Anatomia de un elemento HTML


Open    Contenido   Closed
 tag        |        tag
  |         |         |
<h1>      Hola      </h1>
(--------Elemento--------)

*Atributos

Estos siempre van en la etiqueta de apertura


    Atributo     Valor
       |           |      
<h1  class   =  "saludo">
(--------Open Tag--------)

*Anidamiento

Elementos que van dentro de otros
Esta es la base para constuir aplicaciones optimizadas que rendereicen de forma eficiente

Example:

<h1>Cosas que debo hacer</h1>
<ul>
    <li>Limpiar</li>
    <li>Alimentar</li>
    <li>Aprender</li>
    <li>Entrenar</li>
    <li>Amar</li>
    <li>Meditar</li>
    <li>Descansar</li>
</ul>

*Elementos Vacios

Son tags que no necesitan llevar contenido ni etiqueta de cierre

Example:

<img src="chupapy.png" alt="mi hijo">

El atributo alt siver para darle un nombre que describa el contenido de la imagen, esto ayuda a personas ciegas que usan lectores con audio quienes les dicen a ellos que hay en la pagina y estos lectores leeran lo que escribamos en el atributo alt.

Les comparto la imagen de anidamiento ya que en el video no se ve muy bien.
en la primera clase esta el pdf con las diapositivas!

Una practica muy buena y que recomiendo es utilizar CSS en una pagina externa. Por ejemplo si le quieres dar unos mismos atributos CSS a 3 pagina HTML te servirá la externa y si no es lo que quieres en la misma pagina HTML puedes escribir esos atributos de CSS.

La etiqueta ALT tiene gran importancia en temas de SEO para posicionamiento ayuda mucho, también cuando la imagen por alguna razón no se puede renderizar. Como su etiqueta lo indica es un texto alternativo que describe lo que lleva la imagen. Por ejemplo: Foto de un cepillo para gatos.

Muy buena opción sobre como trabajar la etiqueta ALT, considerando lo que menciono la profesora respecto a “quienes ven y puedan trabajar nuestro código” importantísimo este punto a considerar al crear nuestras aplicaciones incluso para evitar retrabajos cuando ya lo tenemos en producción.

Etiquetas mayor y menor que😅

Para los que no notaron, en la clase 1, esta el pdf de todos los apuntes de cada clase.

Interesante lo de la etiqueta alt, nunca había pensado en ese uso práctico que menciono la profesora.

Gran clase!

No sabía la importancia del alt

Algun otro ejemplo de una etiqueta vacia, aparte de <img>? 🤔🤔🤔

La estructura de nuestro código html, se basa en que cada elemento posee, una etiqueta de inicio, otra de final, un contenido entre ellas, y sus atributos; a este conjunto de características, les llamamos elementos.

Muy bueno!

Buena clase 😄

Excelente…

Vi un comentario donde recomiendan una página con ejercicios para practicar. Aquí dejo otra: https://www.frontendmentor.io/

en caso de que alguien lo necesite, este es el repositorio de este proyecto creado por la profesora: https://github.com/teffcode/Platzi-Frontend-Dev

Gracias por la información.

Anatomía de un Elemento HTML

(Elemento)

<h1 class=(Atributo)"saludo"(Valor) >(Etiqueta de apertura)

`Hola(Contenido)`

</h1>(Estiqueta de Cierre)