Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Cheatsheet HTML

    Cargado por

    Misael Nicolas
    9 vistas20 páginas
    Este documento proporciona una guía rápida de las etiquetas HTML más comunes. Explica brevemente el propósito de etiquetas como <a> para enlaces, <img> para imágenes, <p> para párrafos, etiquetas de encabezados desde <h1> hasta <h6>, etiquetas para formato de texto como <b> y <i>, y etiquetas para estructurar contenido como <header>, <footer>, <nav>, <article>, <aside>, entre otras. Además, indica si cada etiqueta es de bloque o en lí

    Descripción original:

    Título original

    cheatsheet-html

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Este documento proporciona una guía rápida de las etiquetas HTML más comunes. Explica brevemente el propósito de etiquetas como <a> para enlaces, <img> para imágenes, <p> para párrafos, etiquetas de encabezados desde <h1> hasta <h6>, etiquetas para formato de texto como <b> y <i>, y etiquetas para estructurar contenido como <header>, <footer>, <nav>, <article>, <aside>, entre otras. Además, indica si cada etiqueta es de bloque o en lí

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    9 vistas20 páginas

    Cheatsheet HTML

    Cargado por

    Misael Nicolas
    Este documento proporciona una guía rápida de las etiquetas HTML más comunes. Explica brevemente el propósito de etiquetas como <a> para enlaces, <img> para imágenes, <p> para párrafos, etiquetas de encabezados desde <h1> hasta <h6>, etiquetas para formato de texto como <b> y <i>, y etiquetas para estructurar contenido como <header>, <footer>, <nav>, <article>, <aside>, entre otras. Además, indica si cada etiqueta es de bloque o en lí

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 20

    HTML

    Cheatsheet

    a Enlace a una URL. Tiene un parámetro href para poder pasar la URL. block inline self-closing

    <a href="codingpotions.com">Coding Potions</a>

    abbr Abreviación, suele incluir un parámtro title para incluir toda la descripción. block inline self-closing

    <abbr title="Hypertext Markup Language">HTML</abbr>

    address Información de contacto. block inline self-closing

    <address>Visitanos en calle de ejemplo, 10, Madrid (España)</adress>

    area Indica un área interactiva dentro de un mapa. block inline self-closing

    <map name="workmap"><area shape="rect" coords="34,44,270,350" alt="Computer"></area>


    article Indica una sección independiente que puede existir en cualquer contexto. Dentro puede tener header, footer, etc. block inline self-closing

    <article><header><h2>Artículo 1</h2></header><p>Descripción</p></article>

    Sección del contenido relaccionada al contenido principal. Normalmente se usa para definir sidebars o barras de
    aside block inline self-closing
    navegación laterales.

    <article><header><h2>Artículo 1</h2></header><p>Descripción</p></article>

    audio Sirve para meter una fuente de audio que provenga de una URL. La URL se pasa mediente una etiqueta src. block inline self-closing

    <audio src="ejemplo.mp3" controls></audio>

    b Convierte un texto en negrita. block inline self-closing

    Hello <b>World</b>

    Aisla una parte del texto para poder voltearlo. Se suele usar cuando se inserta una palabra en un lenguaje que se lee de
    bdi block inline self-closing
    derecha a izquerda dentro de una frase que se lee al revés.
    Hello <bdi>World</bdi>

    Igual que el tag HTML bdi solo que en lugar de asilar para poder decidir cómo tratar cada parte, direcamente se da la
    bdo block inline self-closing
    vuelta

    Hello <bdo>World</bd0>

    blockquote Define una cita a la que puedes asignar una fuente pasando una URL. block inline self-closing

    <blockquote cite="https://en.wikiquote.org/wiki/Marie_Curie">Be less curious about people and more curious about ideas.</blockquote>

    body Contenido de toda la web. Solo puede haber in body en la web y tiene que ser el padre de las demás etiquetas. block inline self-closing

    <html><head></head><body></body></html>

    br Salto de línea dentro del texto block inline self-closing

    Salto de <br>línea</br>
    button Botón clickable en la web block inline self-closing

    <button>Botón</button>

    canvas Lienzo en la web para poder pintar gráficos avanzados block inline self-closing

    <canvas>Contenido para navegadores no soportados</canvas>

    caption Define el título de una tabla block inline self-closing

    <table><caption>Título de la tabla</caption></table>

    cite Indica la fuente de un contenido creativo que no pertenece a la web block inline self-closing

    Fuente: <cite>codingpotions.com</cite>

    code Para meter código de cualquier lenguaje de programación block inline self-closing

    <code>npm install</code>
    Para definir columnas dentro de las tablas. Esta etiqueta va dentro de la etiqueta <colgroup>. Útil para aplicar estilos a
    col columnas.
    block inline self-closing

    <table><col style="background-color: red;"><tr><td>1</td><td>2</td></tr></table>

    colgroup Elemento padre de la etiqueta <col>. Define el conjunto de columnas de las tablas block inline self-closing

    <table><colgroup><col style="background-color: red;"></colgroup><tr><td>1</td><td>2</td></tr></table>

    data Muestra un valor técnico o númerico en contenido entendible por las personas block inline self-closing

    data value="21053">Cherry Tomato</data>

    datalist Define las posibles opciones para el autocompletado de las etiquetas <input> block inline self-closing

    <input list="countries" placeholder="Type a country"><datalist id="countries"><option value="Argentina"></datalist>

    ddº Descripción de cada item dentro de una lista de definiciones <dl> block inline self-closing
    <dl><dt>Coffee</dt><dd>Black hot drink</dd></dl>

    del Indica que cierto texto ha sido borrado de la web. Los navegadores lo mostrará tachado. block inline self-closing

    Hello <del>world!</del>

    details Define un contenido que puede ser ampliado haciendo click sobre el elemento. block inline self-closing

    <details><summary>Leer más</summary><p>Este contenido solo se muestra si ha sido ampliado por el usuario</p></details>

    dfn Especifica que un contenido va a ser explicado o aclarado dentro del propio contenido más adelante block inline self-closing

    <p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

    div La etiqueta más común de todas las webs. Bloque genérico de contenido. block inline self-closing

    <div>Contenido</div>
    dl La etiqueta padre de las listas de definiciones. Dentro contiene las etiquetas <dt> y <dd> block inline self-closing

    <dl><dt>Coffee</dt><dd>Black hot drink</dd></dl>

    dt Cada término a definir dentro de las listas de definiciones <dl> block inline self-closing

    <dl><dt>Coffee</dt><dd>Black hot drink</dd></dl>

    em Para enfatizar un texto. Usualmente los navegadores lo renderizan como texto en cursiva. block inline self-closing

    Hello <em>world!</em>

    embed Contendio de otra url embebido en la web block inline self-closing

    <embed src="https://www.youtube.com/embed/kmk43_2dtn0" width="640" height="480">

    fieldset Para separar grupo de controles dentro de los formularios block inline self-closing

    <form><fieldset><input type="email></fieldset></form>
    figcaption Para definir partes dentro de una etiqueta <figure> block inline self-closing

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

    figure Para definir elementos auto-contenidos, usualmente imágenes o figuras block inline self-closing

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

    footer Define el pie de página de un elemento o contenido block inline self-closing

    <footer>Pie de página</footer>

    form Para definir formularios con controles block inline self-closing

    <form><fieldset><input type="email></fieldset></form>

    h1 Encabezado de primer nivel, usualmente solo hay uno por página block inline self-closing
    <h1>Encabezado H1</h1>

    h2 Encabezado de segundo nivel. block inline self-closing

    <h1>Encabezado H2</h1>

    h3 Encabezado de tercer nivel block inline self-closing

    <h1>Encabezado H3</h1>

    h4 Encabezado de cuarto nivel block inline self-closing

    <h1>Encabezado H4</h1>

    h5 Encabezado de quinto nivel block inline self-closing

    <h1>Encabezado H5</h1>
    h6 Encabezado de sexto nivel block inline self-closing

    <h1>Encabezado H6</h1>

    header Define el header de una página o de una sección block inline self-closing

    <header>Contenido del header</header>

    hr Suele representarse como una línea horizontal para separar el contenido block inline self-closing

    <hr>

    i Covierte un texto en cursiva block inline self-closing

    Texto en <i>cursiva</i>

    iframe Sirve para insertar una página web completa dentro de otra. Normalmente se usa para insertar vídeos block inline self-closing

    <iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>


    img Para insertar imágenes dentro de la web block inline self-closing

    <img src="example.jpg" alt="Descripción de la imagen" width="500" height="600">

    input Define un cuadro de texto para que los usuarios puedan escribir block inline self-closing

    <input type="text">

    ins Define texto insertado desde otra fuente block inline self-closing

    <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

    kbd Define una combinación de teclado a mostrar al usuario block inline self-closing

    Pulsa <kbd>Cmd</kbd>

    label Define el título de un control dentro de un formulario block inline self-closing


    <label for="#example">Label text</label><input type="text" id="example">

    legend Define la leyenda para un elemento <fieldset> block inline self-closing

    <fieldset><legend>Información Personal</legend><label for="nombre">Nombre:</label></fieldset>

    li Define cada item de una lista <ul> o <ol> block inline self-closing

    <ul><li>Item</li></ul>

    main Contenido principal de la web block inline self-closing

    <main>Main content</main>

    map Para definir un mapa con imagen y elementos clickables block inline self-closing

    <map name="workmap"><area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"><area shape="rect" coords="290,172,333,250" alt="Phone" href="phone
    mark Define un texto resaltado block inline self-closing

    Texto <mark>resaltado</mark>

    meter Define un medidor horizontal block inline self-closing

    <meter value="0.7">Progress</meter>

    nav Para definir la navegación de la web block inline self-closing

    <nav><a href="/">Homepaghe</a></nav>

    object Define un contenedor para un objeto externo a la web block inline self-closing

    <object data="video.mp4" width="400" height="300"></object>

    optgroup Define un conjunto de opciones. Dentro tiene etiquetas <option> block inline self-closing

    <select><optgroup label="South America"><option>Uruguay</option><option>Brazil</option><option>Argentina</option></optgroup>


    option Cada una de las opciones a escoger por el usuario dentro de los <select> block inline self-closing

    <select name="country"><option value="Argentina">Argentina</option><option value="Bolivia">Bolivia</option>

    output El resultado de una operación matemática realizada por el usuario block inline self-closing

    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)"><input type="range" id="a" value="50">+<input type="number" id="b" value="25">=<output name="x" for="a b

    p Para definir párrafos block inline self-closing

    <p>Párrafos</p>

    pre Sirve para preservar el formato del texto contenido. Se suele incluir junto a las etiqueta <code> block inline self-closing

    <pre><code>Párrafos</code></pre>

    progress Define una barra de progreso block inline self-closing


    <progress value="0.7">Progress</progress>

    q Define una cita corta block inline self-closing

    He looks around and says <q cite="https://en.wikiquote.org/wiki/The_Terminator">I ll be back</q>.

    s Define texto tachado block inline self-closing

    Texto <s>tachado</s>

    section Define una sección de contenido dentro de una página block inline self-closing

    <section>Sección 1</section>

    select Define un dropdown para que el usuario pueda seleccionar un item. Cada una de las opciones se define con <option> block inline self-closing

    <section>Sección 1</section>
    small Define contenido menos importate. Usualmente representado como elementos más pequeños block inline self-closing

    Texto <small>menos inportante</small>

    source Define la fuente del contenido de laas imágenes, vídeos y audios block inline self-closing

    <video controls width="250" height="200" muted> <source src="/media/examples/flower.webm" type="video/webm"> <source src="/media/examples/flower.mp4" type="video/mp

    span No representa ningún contenido semántico, igual que los divs pero inline block inline self-closing

    <span>Contenido</span>

    strong Representa un elemento dentro del contenido que es muy importante block inline self-closing

    <strong>Contenido importante</strong>

    sub Subíndices block inline self-closing

    CO<sub>2</sub>.
    summary Define el título del elemento <details>. Es el que se muestra antes de que el usuario lo expanda block inline self-closing

    <details><summary>Read more</summary><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p></details>

    sup Superíndices block inline self-closing

    The "power of two" is 2<sup>n</sup> where n is an integer.

    table Tablas block inline self-closing

    <table><thead><tr><th>Name</th> <th>Instrument</th> </tr></thead><tfoot><tr><th>Name</th> <th>Instrument</th> </tr></tfoot><tbody><tr><td>John Lennon</td> <td>Rhyth

    tbody Para definir el contenido principal dentro de las tablas block inline self-closing

    <table><thead><tr><th>Name</th> <th>Instrument</th> </tr></thead><tfoot><tr><th>Name</th> <th>Instrument</th> </tr></tfoot><tbody><tr><td>John Lennon</td> <td>Rhyth

    td Cada una de las columnas de las tablas block inline self-closing


    td Cada una de las columnas de las tablas block inline self-closing

    <table><thead><tr><th>Name</th> <th>Instrument</th> </tr></thead><tfoot><tr><th>Name</th> <th>Instrument</th> </tr></tfoot><tbody><tr><td>John Lennon</td> <td>Rhyth

    textarea Cuadro de texta multilínea para que los usuarios puedan escribir más contenido block inline self-closing

    <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>

    tfoot El footer de las tablas block inline self-closing

    <table><thead><tr><th>Name</th> <th>Instrument</th> </tr></thead><tfoot><tr><th>Name</th> <th>Instrument</th> </tr></tfoot><tbody><tr><td>John Lennon</td> <td>Rhyth

    th Define el header de cada una de las columnas de las tablas block inline self-closing

    <table><thead><tr><th>Name</th> <th>Instrument</th> </tr></thead><tfoot><tr><th>Name</th> <th>Instrument</th> </tr></tfoot><tbody><tr><td>John Lennon</td> <td>Rhyth

    theader El header de toda la tabla. Contiene los <th> de cada una de las columnas block inline self-closing

    <table><thead><tr><th>Name</th> <th>Instrument</th> </tr></thead><tfoot><tr><th>Name</th> <th>Instrument</th> </tr></tfoot><tbody><tr><td>John Lennon</td> <td>Rhyth


    time Define el tiempo en formato 24h block inline self-closing

    The game starts at <time datetime="2017-04-29T19:00">19:00</time>.

    tr Cada una de las filas de las tablas. block inline self-closing

    <table><thead><tr><th>Name</th> <th>Instrument</th> </tr></thead><tfoot><tr><th>Name</th> <th>Instrument</th> </tr></tfoot><tbody><tr><td>John Lennon</td> <td>Rhyth

    u Hace que un elemento se ponga subrayado block inline self-closing

    Hello <u>World</u>

    var Define una variable de una operación matemática block inline self-closing

    The value of <var>x</var> is 12.

    video Para meter un video o clip dentro de la página block inline self-closing
    video Para meter un video o clip dentro de la página block inline self-closing

    <video src="/assets/HTML 5 Video.mp4" controls></video>

    También podría gustarte