`,g.querySelector(`.title`).textContent=a,g.querySelector(`.subtitle`).textContent=c??r,f.insertAdjacentElement(`beforeend`,g),g.animate(b,75)},d=a=>a.toLowerCase().normalize(`NFD`).replace(/[\u0300-\u036f]/g,r),e=async(a,b=r,c=s)=>{const e=await fetch(`${b}/api/contents.json`).then(a=>a.json());return new t((f,g)=>{const h=e.filter(b=>{const c=b.type===`category`,e=d(b.title).includes(a)||d(b?.subtitle||r)?.includes(a)||d(b?.tags||r)?.includes(a);return !c&&e}).slice(n,c).map(a=>({title:a.title,subtitle:a?.subtitle||r,icon:`/assets/icons/logos.svg#${a.topic.replace(`javascript`,`js`)}`,url:b+ a.url}));return f(h)})},f=async(a,b=s)=>{const c=await fetch(`/api/youtube.json`).then(a=>a.json());return new t((e,f)=>{const g=c.filter(b=>d(b.title).includes(a)).slice(n,b).map(a=>({title:a.title,subtitle:q,icon:`https://img.youtube.com/vi/${a.id}/default.jpg`,url:`https://youtu.be/${a.id}`}));return e(g)})},g=15,h=new URL(location.href).origin,i=[`https://lenguajehtml.com`,`https://lenguajecss.com`,`https://lenguajejs.com`,`https://terminaldelinux.com`].filter(a=>a!==h);i.length{const a=document.querySelector(u),b=document.querySelector(p),h=d(a.value),j=h.length>3;if(b.innerHTML=r,!j)return;const k=document.querySelector(`dialog.search .loading`);k.classList.add(`loading`,v);const l=structuredClone(i).map(a=>e(h,a));l.push(f(h));const m=(await t.all(l)).flat(o/n).slice(n,g);k.classList.remove(v),k.classList.add(w),setTimeout(()=>k.classList.remove(w),x),m.forEach(a=>c(a))},k=document.querySelector(y),l=()=>{if(document.querySelectorAll(`dialog.search`).length>n)return;const b=document.createElement(`dialog`);b.innerHTML=`
`,b.addEventListener(z,()=>{document.body.classList.remove(A),b.close(),b.remove(),k.blur()});const c=a=>{const d=b.getBoundingClientRect();(a.clientXd.right||a.clientYd.bottom)&&(document.body.removeEventListener(B,c),b.dispatchEvent(new Event(z)))};setTimeout(()=>document.body.addEventListener(B,c),x),b.classList.add(`search`),b.querySelector(`input.query`).focus(),document.body.append(b),b.showModal(),document.body.classList.add(A),document.querySelector(u).addEventListener(`input`,a(j,400))};addEventListener(`keydown`,a=>{const {key:b,ctrlKey:c}=a;b.toLowerCase()===`k`&&c&&(a.preventDefault(),l(),document.querySelector(u).focus())});const m=document.querySelector(y);m.addEventListener(`focus`,l)

Lenguaje HTML

HTML es un lenguaje de marcado mediante el cuál se estructura la base y contenido de cualquier página web. A continuación aprenderás, no sólo los detalles principales de HTML, sino también de sus temáticas relacionadas como posicionamiento SEO, accesibilidad, usabilidad, compatibilidad entre navegadores, etc.

Soporte baseline de HTML

¿Quieres comprobar si una característica concreta está disponible en los navegadores?

Comienza a aprender

¿...o prefieres un roadmap?

Comienza a practicar

¿Ya sabes la teoría? ¡Es hora de ponerse a practicar!

html

Las etiquetas HTML &LTul> y &LTol>

Las etiquetas ol y ul sirven para crear listas de elementos en HTML. Te explico como hacerlo y sus diferencias.
html

La etiqueta HTML &LTdiv>

Descubre todo sobre la etiqueta HTML div. Agrupaciones y divisiones de secciones de código en capas o grupos relacionados. Formas de uso y ejemplos.
svg

Estilos CSS y Javascript

En un documento SVG, al igual que en un documento HTML, podemos utilizar etiquetas &LTstyle> y &LTscript> para añadir estilos CSS y código Javascript. Te lo explico.
svg

Agrupaciones

La etiqueta &LTg> de SVG nos permite agrupar varias etiquetas para aplicar características en conjunto o para reutilizar estructuras.
svg

Trazos (stroke)

Mediante el atributo stroke de SVG podemos indicar trazos en las diferentes figuras o formas creadas, con un color, grosor, estilo, opacidad, etc...
svg

Trayectos con curvas

La etiqueta &LTpath> de SVG también permite crear trayectos en forma de curva y no solo lineales. En este artículo veremos las opciones disponibles para crearlas.
html

La etiqueta HTML &LTkbd> y &LTsamp>

Existen ciertas etiquetas HTML para representar visualmente la entrada o salida de datos por parte de un usuario. Veamos que podemos hacer con ellas.
svg

Flechas (markers)

Los elementos &LTmarker> nos permiten crear flechas o marcadores en el inicio, final o uniones de los trayectos o trazos de ciertas formas. Te explico como funciona.
svg

¿Qué es SVG?

Los ficheros SVG son imágenes de gráficos vectoriales creadas a partir de marcado de código, muy similar al código HTML.

svg

Círculos y elipses

SVG incorpora varias etiquetas para crear círculos y ellipses u óvalos de una forma muy sencilla. Los explicamos en este artículo.
html

La etiqueta HTML &LTh1> ... &LTh6>

Mediante las etiquetas &LTh1>, &LTh2>, &LTh3>, &LTh4>, &LTh5> y &LTh6> puedes establecer titulares con diferentes grados de importancia. Explicamos como funcionan.
html

La etiqueta HTML &LTbr> y &LTwbr>

Los saltos de línea son elementos invisibles de un documento que representan el salto a una nueva línea. Profundicemos en ellos.
svg

Elemento o etiqueta SVG

El elemento SVG es la etiqueta padre contenedora que contiene a toda la imagen vectorial. Siempre debe ser la etiqueta raíz.
html

La etiqueta HTML &LTarticle>

Una de las etiquetas semánticas de sección más importantes es la etiqueta &amplt;article&ampgt;. Te explico como funciona.
html

El atributo contenteditable

Mediante el atributo contenteditable o la propiedad Javascript designMode se puede convertir un documento estático en uno editable. Te explico como.
html

La etiqueta HTML &LTstrong>

La etiqueta strong nos permite marcar un fragmento de texto como importante, sin embargo la etiqueta b lo marca sólo como palabra clave.
html

Etiquetas semánticas de texto

Existen una serie de etiquetas que sirven para separar en fragmentos de textos con semánticas diferentes. Vamos a profundizar en ello.
svg

Transformaciones SVG

En SVG puedes realizar transformaciones SVG, que son muy similares a las de CSS, pero con algunas diferencias.
svg

Rellenos (fill)

Los atributos fill nos permiten indicar como será el relleno de una forma o elemento, ya sea color, opacidad u otros aspectos.

Videos

¿Prefieres contenido de video? ¡Echa un vistazo a mi canal!

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev