👨‍💻
Coding Library
  • 👨‍💻Coding Library
  • 👾Linux
    • Basic Commands
    • Other commands
      • Ls
      • Mv
      • Chmod
      • Ln
      • Cat
      • Wc
      • Grep
      • Sed
      • Find
    • Sistema de ficheros
      • Inodos
  • 📦Git
    • Page 3
  • 🖊️Vim
    • Vim Basics
      • Gramatica de Vim
      • Moviendote por un archivo
    • Todo y mas
  • 🏛️C
    • Estructuras de datos
      • Listas Enlazadas
      • Colas
      • Pilas
      • Arboles
    • Valgrind
    • Operadores de bits
    • Procesos e Hilos
      • Fork
      • Wait
      • Waitpid
      • Semáforos
      • Estructura sigaction
      • Signals
    • MiniLibX
      • Ventanas (windows)
      • Imprimir Pixels
      • Imagenes
      • Colores
      • Eventos
      • Loops (bucles)
      • Leer imagenes
    • Readline
    • Funciones
      • opendir
      • access
    • Network Programming
      • Structs
      • Llamadas al sistema
      • Synchronous I/O Multiplexing
        • kqueue
  • 🌃C++
    • Clases
      • Herencia
      • Shallow and deeps copies
      • Clases abstractas y Interfaces
      • Reasignar operadores
    • Punteros y referencias
    • Manejo de ficheros
    • Punteros a funciones
    • Excepciones
    • Casting
    • Templates
    • Templated Containers
      • Iterators
      • std::vector
      • std::list
      • std::map
  • 🧠Pyhton
    • Sintaxis basica
    • Scripts
    • Tipos de datos
      • Listas
      • Set
      • Diccionarios
      • Generadores
    • Estructuras de control
      • Iterar con For
      • Iterar con zip
      • Iterar con enumerate
    • Map, Filter and Reduce
    • Funciones
    • Clases
      • Metodos
      • Herencia
    • Formateo con {} y format()
    • Decoradores
  • 📦JAVA
    • Conceptos basicos
    • Programacion estructurada
    • Clases predefinidas
    • POO
      • Clases
      • Herencia
      • Polimorfismo
      • Abstraccion
      • Encapsulacion
    • ArrayList
    • Excepciones
  • ⚒️HTML
    • HTML Basics
    • Elementos de bloque
      • Titulos y parrafos
      • Header, Main y Footer
      • Section, article y aside
    • Elementos en línea
    • Atributos
    • Enlaces <a>
    • Listas
    • Tablas
    • Formularios
      • Input
      • Select y datalist
      • GET y POST
    • Contenido embebido
      • Imagenes
      • Audio y video
      • Iframe
  • 🎨CSS
    • Introduccion
    • Selectores
    • Como funciona CSS
    • Box Model
    • Desbordamiento y Colapso de margenes
    • Display
    • Position
    • Medidas absolutas y relativas
  • 🟡JavaScript
    • Promesas
    • Async/Await
  • 📲Svelte
    • Componentes
    • Reactividad
    • Directivas
    • Eventos
  • 🖥️Sistemas
    • Particiones
  • 🕸️Redes
    • IP Adress
    • Subnet Mask
  • 🕷️Web Scrapping
    • Scrapy
      • Spiders
        • CrawlerSpider
      • Process data
      • Save data
        • CSV y JSON
        • SQLite
    • Splash
    • Selenium
Powered by GitBook
On this page
  • Header
  • Main
  • Footer
  • Ejemplo
  1. HTML
  2. Elementos de bloque

Header, Main y Footer

Estructurando el <body>

PreviousTitulos y parrafosNextSection, article y aside

Last updated 2 years ago

Para organizar las paginas web de una manera mas sencilla se utilizan las siguiente secciones:

Header

El elemento de HTML Header <header> representa un grupo de ayudas introductorias o de navegación. Puede contener algunos elementos de encabezado, así como también un logo, un formulario de búsqueda, un nombre de autor y otros componentes. Este apartado normelmente se utiliza para colocar los menus de nevegacion

Main

El elemento HTML <main> representa el contenido principal del de un documento o aplicación. El área principal del contenido consiste en el contenido que está directamente relacionado, o se expande sobre el tema central de un documento o la funcionalidad central de una aplicación.

El contenido del main debe ser único al documento, excluyendo cualquier contenido que se repita a través de un conjunto de documentos como barras laterales, enlaces de navegación, información de derechos de autor, logos del sitio y formularios de búsqueda (a menos, claro, que la función principal del documento sea un formulario de búsqueda).

Nota: no debe haber más de un elemento <main> en un documento, y este no debe ser descendiente de un elemento <article>, <aside>, <footer>, <header>, o <nav>.

Footer

El Elemento HTML Footer <footer> representa un pie de página para el contenido de sección más cercano o el elemento raíz de sección. Un pie de página típicamente contiene información acerca de el autor de la sección, datos de derechos de autor o enlaces a documentos relacionados.

Ejemplo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mi pagina de prueba</title>
  </head>
  <body>
    <header> Inicio Novelas Peliculas Contactos </header>
    <main>
      <h1> Harry Potter </h1>
      <h2> Sinopsis </h2>
        <p> El elemento de HTML Header header 
        representa un grupo de ayudas introductorias o de navegación. </p>
      <h2> Personajes </h2>
        <p> Perosonaje1 Personaje2 Personaje3 </p>
    </main>
    <footer>
      Piscine Discovery 2022-2023
    </footer>
  </body>
</html>
⚒️
<body>