EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Tutoriales
  • Blog
✕
            Sin resultados Ver todos los resultados

            HTML5, estructura básica y elementos semánticos

            Estructura HTML

            HTML5, estructura básica y elementos semánticos

            2. Elementos semánticos HTML5

            Una de las principales ventajas de HTML5 es la inclusión de elementos semánticos, o marcados semánticos, que nos ayudan a definir las distintas divisiones de una página web.

            Contenidos del artículo

            • 2. Elementos semánticos HTML5
            • 2.1. Estructura básica de un documento HTML5
            • 2.2. Elementos semánticos

            En las versiones anteriores a HTML5 se solía utilizar la etiqueta <div> para realizar las divisiones de una página web, pero actualmente es recomendado utilizar los elementos semánticos ya que describen claramente su propósito.

            Como se puede observar en el esquema de la siguiente figura, mediante marcadores semánticos se puede diferenciar claramente el contenido que referencia cada etiqueta.

            estructura etiquetas html
            Figura. 2.1. Esquema básico de un documento HTML5

            2.1. Estructura básica de un documento HTML5

            Teniendo en cuenta el esquema básico mostrado en la figura anterior, podríamos partir del siguiente código HTML para estudiar su estructura y comenzar a entender los elementos estructurales y semánticos que se estudian a continuación.

            <!DOCTYPE html>
            <html lang="es">  
            <head>    
                <title>Título de la WEB</title>    
                <meta charset="UTF-8">
                <meta name="title" content="Título de la WEB">
                <meta name="description" content="Descripción de la WEB">    
                <link href="estilos.css" rel="stylesheet">
                <style>
                    header{background-color:yellow;} /* Código CSS */
                </style> 
                <script src="script.js"></script>  
                <script type="text/javascript">
                    /* Código JS */
                </script> 
            </head>  
            <body>    
                <header>
                    <h1>Título de la WEB</h1>      
                </header>    
                <nav>
                    <ul>
                        <li><a href="#">Inicio</a></li>
                        <li><a href="#">Servicios</a></li>
                        <li><a href="#">Contacto</a></li>
                   </ul>
                </nav>
                <section>      
                    <article>
                        <h2>CONTENIDO PRINCIPAL</h2>
                        <p>Este es el contenido principal de mi web.</p>      
                    </article>      
                </section>
                <aside>
                    <h3>Testimonios</h3>
                    <p>Me gusta mucho esta página.</p>
                </aside>
                <footer>
                    <h4>Redes sociales</h4>
                    <a href="#">Facebook</a>
                    <a href="#">Tiwtter</a>
                </footer>
            </body>  
            </html>


            Ejemplo en CodePen

            0

            En los siguientes puntos se detalla de forma resumida los elementos que componen la estructura básica que se ha planteado en el punto anterior y otros componentes que puede contener una página web.

            2.2. Elementos semánticos

            ElementoDescripción
            <section>Define secciones de una web.
            <nav>Especifica una sección que contiene un menú de navegación.
            <article>Determina secciones de contenido.
            <aside>Define la barra lateral de una página web. 
            <h1> <h2> <h3> <h4> <h5> <h6>Describe el tema de la sección. Disponemos de seis niveles: de h1 a h6, siendo <h1> la cabecera de mayor importancia. Sólo puede existir una etiqueta <h1> en el documento.
            <header>Determina la cabecera de una web o de un elemento.
            <footer>Define el pie de página. También se puede utilizar para definir el pie de otros elementos.
            <address>Especifica una sección que contiene información de contacto.
            <main>Determina el contenido principal del documento. Solo puede existir un elemento <main> en el documento.
            Tabla 2.1. Elementos semánticos

            Las etiquetas <body> <h1> y <main> solo se pueden utilizar una vez por documento HTML, el resto de etiquetas de contenido se pueden usar siempre que sea necesario.

            Ejercicio propuesto

            Test

            ¿Cómo indicamos que el documento está bajo el estándar HTML5?

            ¡Bien! ¡Has fallado!

            ¿Para qué se utiliza la etiqueta title?

            ¡Bien! ¡Has fallado!

            ¿Cuántas etiquetas article pueden indicarse en un documento?

            ¡Bien! ¡Has fallado!

            ¿Dónde se suelen incluir los enlaces legales y los derechos de autoría?

            ¡Bien! ¡Has fallado!

            HTML. HTML5
            ¡Muy bien!
            Sigue repasando...

            En la sección siguiente estudiaremos las etiquetas de contenido y texto.

            Navegación de entradas

            ← Lenguaje de marcas HTML
            Etiquetas html de contenido y texto →

            Tutorial HTML

            • 1. Lenguaje de marcas HTML
            • 2. Estructura y elementos semánticos
            • 3. Contenido y texto
            • 4. Formularios
            • 5. Tablas de contenido
            • 6. Contenido incrustado
            • 7. Elementos de ordenación
            • 8. Marcadores en HTML
            • 9. Factores HTML clave para el SEO
            • 10. Test de verificación HTML y herramientas útiles
            • 11. Metainformación en HTML
            • 12. Configuración metaetiqueta viewport, web responsive
            • 13. Resumen HTML
            • 14. Ejercicios resueltos HTML

            Tutoriales

            • Diseño de Interfaces
            • Usabilidad web
            • Accesibilidad web
            • HTML
            • XML
            • CSS Nivel Inicial
            • CSS Nivel Intermedio
            • CSS Nivel Avanzado
            • Bootstrap 5
            • Ver más tutoriales

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            TUTORIALES

            • Contenidos por bloques
            • Diseño de Interfaces Web
            • Lenguajes de Marcas y Sistemas de Gestión de Información

            SÍGUENOS

                 

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          Sin resultados Ver todos los resultados