EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Lenguaje de marcas HTML
            Lenguaje de marcas HTML
            01/09/2019
            Etiquetas html de contenido y texto
            Etiquetas html de contenido y texto
            03/09/2019

            HTML5, estructura básica y elementos semánticos

            Estructura HTML

            HTML5, estructura básica y elementos semánticos

            Tabla de contenidos

            • 2.1. Elementos semánticos HTML5
            • 2.2. Estructura básica de un documento HTML5
              • 2.2.1. Elementos raíz
              • 2.2.2. Metadatos
              • 2.2.3. Scripting
              • 2.2.4. Secciones
              • 2.2.5. Comentarios

            2.1. 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.

            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 figura 2.1, 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.2. Estructura básica de un documento HTML5

            Teniendo en cuenta el esquema básico mostrado en la figura 2.1, podríamos partir del siguiente código HTML para estudiar su estructura y comenzar con el desarrollo de las prácticas que se presentan en este manual.

            • Editor de código fuente recomendado: Visual Studio Code.
            • Multiplica tu velocidad en Visual Studio Code utilizando Emmet para dar formato a tus documentos HTML.
            • Chuleta Emmet: docs.emmet.io/cheat-sheet/
            <!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">    
            </head>  
            <body>    
                <header>
                    <h1>Título de la WEB</h1>      
                </header>    
                <nav>
                    <a href="#">IR SECCIÓN 2</a>
                    <a href="#">IR SECCIÓN 3</a>
                </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>

            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.1. Elementos raíz

            ElementoDescripción
            <!DOCTYPE html>Indica que el documento está bajo el estándar de HTML5.
            <html>Representa la raíz de un documento HTML. Es una buena práctica indicar el idioma mediante el atributo lang. 

            2.2.2. Metadatos

            ElementoDescripción
            <head>En su interior se incluye la colección de metadatos sobre el documento y los enlaces a scripts y hojas de estilo.
            <title>Representa el título del documento. Se muestra en la barra superior del navegador o en las pestañas de página.
            <link>Utilizada para enlazar documentos externos, por ejemplo CSS. Se debe incluir dentro del <head>.
            <meta>Define los metadatos que no pueden ser definidos usando otro elemento HTML. 
            <style>Usada para escribir CSS interno.

            2.2.3. Scripting

            ElementoDescripción
            <script>Define un script interno o un enlace hacia un script externo de JavaScript.
            <noscript>Representa un contenido alternativo a mostrar cuando el navegador no soporta scripting.

            2.2.4. Secciones

            ElementoDescripción
            <body>Representa el contenido principal de un documento HTML. Sólo puede existir un elemento <body> en el documento.
            <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.
            ¿Cerramos siempre las etiquetas HTML?

            2.2.5. Comentarios

            Los comentarios se escriben entre los caracteres que se muestran en el siguiente ejemplo:

            <!-- Esto es un comentario dentro de un documento HTML -->
            <!--
             /$$   /$$ /$$$$$$$$ /$$      /$$ /$$      
            | $$  | $$|__  $$__/| $$$    /$$$| $$      
            | $$  | $$   | $$   | $$$$  /$$$$| $$      
            | $$$$$$$$   | $$   | $$ $$/$$ $$| $$      
            | $$__  $$   | $$   | $$  $$$| $$| $$      
            | $$  | $$   | $$   | $$\  $ | $$| $$      
            | $$  | $$   | $$   | $$ \/  | $$| $$$$$$$$
            |__/  |__/   |__/   |__/     |__/|________/
             -->                                         
            <!--¿Te están entrando ganas de hacer ASCII Art con tu marca? Puedes hacerlo en: http://patorjk.com/software/taag/#p=display&f=Big%20Money-ne&t=ENIUN -->

            Comprueba tu aprendizaje

            ¿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...

            Compartir

            UD2. 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. Marcos o frames, una tecnología obsoleta
            • 12. Etiquetas HTML para acceso directo en Android e iPhone
            • 13. Metaetiquetas o metatags para redes sociales
            • 14. Cómo usar Github y SourceTree para publicar contenido
            • 15. Repositorio Git en Visual Studio Code
            • 16. Resumen HTML
            • 17. Referencias y recursos HTML

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            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



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results