Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Aprenda HTML - Hoja de Trucos de HTML Semántico - Codecademia

    Cargado por

    Nazareth Perrone
    10 vistas2 páginas
    Hoja de Trucos de HTML Semántico

    Título original

    Aprenda HTML_ Hoja de Trucos de HTML Semántico _ Codecademia

    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
    Hoja de Trucos de HTML Semántico

    Copyright:

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

    Aprenda HTML - Hoja de Trucos de HTML Semántico - Codecademia

    Cargado por

    Nazareth Perrone
    Hoja de Trucos de HTML Semántico

    Copyright:

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

    Cheatsheets / Aprende HTML

    HTML semántico
    HTML semántico
    El HTML semántico introduce significado al código que
    escribimos. Antes del HTML semántico, los elementos no <!--Non Semantic HTML-->

    tenían ningún significado en cuanto a lo que hace o qué <div id="footer">


    contenido incluye. Un elemento como <div> se usó

    <p>this is a footer</p>
    como un elemento de uso general para crear cosas,

    </div>
    desde encabezados hasta pies de página y artículos. Con

    Semantic HTML nos presentaron elementos que les dicen

    <!--Semantic HTML-->
    a los desarrolladores y navegadores exactamente qué

    <footer>
    hace y qué contenido debe incluir.

    <p>this is a footer</p>

    </footer>

    Colocación de elementos
    El HTML semántico introduce elementos que pueden
    decirles a los desarrolladores exactamente qué hace el
    elemento o dónde se coloca en función del nombre de
    ese elemento. Algunos de estos elementos son <header> ,
    <nav> , <main> y <footer> . <header> describe el
    contenido en la parte superior de la página <body> .
    Puede incluir un logotipo, enlaces de navegación o una
    barra de búsqueda. <nav> encapsula los enlaces de
    navegación de la página. A menudo se coloca dentro de la
    <header> o <footer> . <main> encapsula el contenido
    principal de una página entre el encabezado/navegación
    y las áreas de pie de página. <footer> incluye el
    contenido del pie de página de la página en la parte
    inferior del archivo <body> .

    Medios de incrustación
    Semantic HTML introduces us to <video> , <audio> and
    <embed> . <video> allows us to add videos to our <!--Video Tag-->

    website. <audio> allows us to implement audio into our <video src="4kvideo.mp4">video not
    website. <embed> can be used to implement any type of supported</video>
    media. These elements are universal in that they all use

    the src attribute to link the source of the content.

    <!--Audio Tag-->
    <video> and <audio> requires a closing tag while

    <audio src="koreanhiphop.mp3"></audio>
    <embed> is a self-closing tag.

    <!--Embed tag-->

    <embed src="babyyoda.gif"/>

    <figure> and <figcaption>


    The <figure> element is used to encapsulate media such
    as an image, diagram. or code snippet. The <figcaption> <figure>
    element is used to describe the media encapsulated <img src="qwerty.jpg">
    within the <figure> element. Developers will normally <figcaption>The image shows the layout of
    use <figcaption> within the <figure> element to group a qwerty keyboard.</figcaption>
    the media and description. This way, if a developer
    </figure>
    decides to change the position of the media, the
    description will follow along with it.

    <section> and <article>


    <section> defines elements in a document, such as
    chapters, headings, or any other area of the document <section>

    with the same theme. <article> holds content that   <!--defines theme-->
    makes sense on its own such as articles, blogs, and

      <h2>Top Sports league in America</h2>


    comments. Generally developers will use <section> to

    <!--writes independent content relating to


    define a theme for the webpage and use <article> to
    that theme-->
    write independent content for that theme. This does not

      <article>
    mean that <article> has to be used with <section> .

        <p>One of the top sports league is the


    nba.</p>

      </article>

    </section>

    <aside> Aside Element


    The <aside> element is used to mark additional
    information that can enhance another element but isn’t <article>

    required in order to understand the main content. <!--Main Content-->


    Usually, this information would be in a sidebar or a

    </article>
    location where it doesn’t obstruct the main piece of

    <aside>
    content. An example of this would be an article that

    <!--Additional information-->
    discusses how to take care of a dog and next to the

    </aside>
    article an ad would appear advertising a dog grooming

    product.

    También podría gustarte