[{"@context":"https:\/\/schema.org\/","@type":"BlogPosting","@id":"https:\/\/xn--adrimadiseo-beb.com\/html\/elementos-basicos-aprender-html\/#BlogPosting","mainEntityOfPage":"https:\/\/xn--adrimadiseo-beb.com\/html\/elementos-basicos-aprender-html\/","headline":"Elementos b\u00e1sicos: aprender HTML","name":"Elementos b\u00e1sicos: aprender HTML","description":"Los elementos b\u00e1sicos de una p\u00e1gina HTML son: Un encabezado de texto, indicado con el &lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, &lt;h6&gt; etiquetas. Un p\u00e1rrafo, denotado ... <a title=\"Elementos b\u00e1sicos: aprender HTML\" class=\"read-more\" href=\"https:\/\/xn--adrimadiseo-beb.com\/html\/elementos-basicos-aprender-html\/\" aria-label=\"M\u00e1s en Elementos b\u00e1sicos: aprender HTML\">Leer m\u00e1s<\/a>","datePublished":"2021-06-20","dateModified":"2021-06-20","author":{"@type":"Person","@id":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/#Person","name":"adrimadise\u00f1o","url":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/","image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"adrimadise\u00f1o.com","logo":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","width":450,"height":90}},"image":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/learn-html.org_.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/learn-html.org_.png","height":200,"width":200},"url":"https:\/\/xn--adrimadiseo-beb.com\/html\/elementos-basicos-aprender-html\/","about":["Html"],"wordCount":551,"articleBody":"Los elementos b\u00e1sicos de una p\u00e1gina HTML son:Un encabezado de texto, indicado con el &lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, &lt;h6&gt; etiquetas.Un p\u00e1rrafo, denotado con el &lt;p&gt; etiqueta.Una regla horizontal, denotada con la &lt;hr&gt; etiqueta.Un enlace, indicado con el &lt;a&gt; (ancla) etiqueta.Una lista, denotada con el &lt;ul&gt; (lista desordenada), &lt;ol&gt; (lista ordenada) y &lt;li&gt; (elemento de lista) etiquetas.Una imagen, denotada con el &lt;img&gt; etiquetaUn divisor, denotado usando el &lt;div&gt; etiquetaUn intervalo de texto, denotado mediante el &lt;span&gt; etiquetaLas pr\u00f3ximas p\u00e1ginas ofrecer\u00e1n una descripci\u00f3n general de estos elementos HTML b\u00e1sicos.Cada elemento tambi\u00e9n puede tener atributos; cada elemento tiene un conjunto diferente de atributos relevantes para el elemento.  Hay algunos elementos globales, los m\u00e1s comunes son:id  &#8211; Denota el ID \u00fanico de un elemento en una p\u00e1gina.  Se utiliza para localizar elementos mediante enlaces, JavaScript y m\u00e1s.class  &#8211; Denota la clase CSS de un elemento.  Explicado en el tutorial Conceptos b\u00e1sicos de CSS.style  &#8211; Denota los estilos CSS que se aplicar\u00e1n a un elemento.  Explicado en el tutorial Conceptos b\u00e1sicos de CSS.data-x  atributos: un prefijo general para los atributos que almacenan informaci\u00f3n sin procesar con fines program\u00e1ticos.  Explicado en detalle en la secci\u00f3n Atributos de datos.Encabezados y p\u00e1rrafos de textoHay seis tipos diferentes de encabezado de texto entre los que puede elegir, h1 es el encabezado superior con el texto m\u00e1s grande y h6 es el encabezado m\u00e1s interno con el texto m\u00e1s peque\u00f1o.  En general, debe tener solo una etiqueta h1 con una p\u00e1gina, ya que debe ser la descripci\u00f3n principal de la p\u00e1gina HTML.Como vimos en el \u00faltimo ejemplo, un p\u00e1rrafo es un bloque de texto separado del resto del texto que lo rodea.Veamos un ejemplo del &lt;h1&gt;, &lt;h2&gt; y &lt;p&gt; etiquetas en acci\u00f3n:&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;    &lt;\/head&gt;    &lt;body&gt;        &lt;h1&gt;My First Page&lt;\/h1&gt;        &lt;p&gt;This is my first page.&lt;\/p&gt;        &lt;h2&gt;A secondary header.&lt;\/h2&gt;        &lt;p&gt;Some more text.&lt;\/p&gt;    &lt;\/body&gt;&lt;\/html&gt;Reglas horizontalesUna regla horizontal &lt;hr&gt; La etiqueta act\u00faa como un simple separador entre las secciones de la p\u00e1gina.&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;    &lt;\/head&gt;    &lt;body&gt;        &lt;h1&gt;My First Page&lt;\/h1&gt;        &lt;p&gt;This is my first page.&lt;\/p&gt;        &lt;hr&gt;        &lt;p&gt;This is the footer - all rights are reserved to me.&lt;\/p&gt;    &lt;\/body&gt;&lt;\/html&gt;EjercicioAgregar un HTML &lt;h1&gt; etiqueta con el texto &#8220;\u00a1Soy el m\u00e1s importante!&#8221;Agregar un HTML &lt;h2&gt; etiqueta con el texto &#8220;\u00a1Soy menos importante!&#8221;Agregar un HTML &lt;h6&gt; etiqueta con el texto &#8220;\u00a1Soy el menos importante!&#8221;                                                                                                                                                                                                                                                                                                                                                                    4.6        \/        5        (        225                    votos                )    "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Html","item":"https:\/\/xn--adrimadiseo-beb.com\/html\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"Elementos b\u00e1sicos: aprender HTML","item":"https:\/\/xn--adrimadiseo-beb.com\/html\/elementos-basicos-aprender-html\/#breadcrumbitem"}]}]