<main class="esquema-seciones-html">
      <cabecera>
        <h3>&lt;head>&lt;/head></h3>
        <ul>
          <li>&lt;meta></li>
          <li>&lt;title></li>
          <li>&lt;link></li>
          <li>&lt;script></li>
          <li></li>
        </ul>
      </cabecera>
      <header><h1>&lt;header>&lt;/header></h1></header>
      <nav><h3>&lt;nav>&lt;/nav></h3></nav>
      <section>
        <article>
          <h3>&lt;article>&lt;article></h3>
          <p>&lt;p>&lt;/p></p>
        </article>
        <hr>
            <article>
          <h3>&lt;article>&lt;article></h3>
          <p>&lt;p>&lt;/p></p>
        </article>
        <hr>
            <article>
          <h3>&lt;article>&lt;article></h3>
          <p>&lt;p>&lt;/p></p>
        </article>
        <hr>
            <article>
          <h3>&lt;article>&lt;article></h3>
          <p>&lt;p>&lt;/p></p>
        </article>
        <hr>
            <article>
          <h3>&lt;article>&lt;article></h3>
          <p>&lt;p>&lt;/p></p>
        </article>
        <hr>
            <article>
          <h3>&lt;article>&lt;article></h3>
          <p>&lt;p>&lt;/p></p>
        </article>
        <hr>
            <article>
          <h3>&lt;article>&lt;article></h3>
          <p>&lt;p>&lt;/p></p>
        </article>
        <hr>
      </section>
      <asside><h3>&lt;asside>&lt;/asside></h3></asside>
      <footer><h3>&lt;footer>&lt;footer></h3></footer>
</main>
main[class="esquema-seciones-html"]{
  
  height:450px;
  width:90%;
  display:grid;
  
  grid-template-columns: 10% 1fr 10%;
  grid-template-rows: 
    20%
    10% 
    1fr 
    15%;
 text-align:center;
  grid-gap: 5px;
  border: 5px solid crimson;
  
  
}
main[class="esquema-seciones-html"] cabecera{
  background:magenta;
  border : 3px solid black;
  grid-column: span 3; /*ocuma tres espacios*/
  text-aligen:top;
  display:flex;
  flex-flow: row wrap;
  
  
}
main[class="esquema-seciones-html"] ul {
  list-style:none;
   display:flex;
  flex-flow:   wrap;
  justify-content: center;
  
}
main[class="esquema-seciones-html"] ul li{
  margin-left: 3em;
  font-size:1.5em;
  font-weight:blod;
  color: lightblue;
}
main[class="esquema-seciones-html"] header{ 
  background: brown;
  grid-column: span 3; /*ocuma tres espacios*/
  text-align:center;
  border : 3px solid black;
  
  display: flex;
  flex-flow:column;
 justify-content:center;
  
}
main[class="esquema-seciones-html"] nav {
  background: deepskyblue;
  border : 3px solid black;
  
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  
  display: flex;
  flex-flow:column;
 justify-content:center;
}
main[class="esquema-seciones-html"] section {
  background: cyan;
  overflow-y:scroll; /*genera un contenedor con scroll que no desborda en el eje de y*/
  border : 3px solid black;
  

}
main[class="esquema-seciones-html"] asside{
  background: yellow;
  border : 3px solid black;
  font-size:1em;
  
  /*texto en vertical*/
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  
  display: flex;
  flex-flow:column;
 justify-content:center;
}
main[class="esquema-seciones-html"] footer{
  background: darkgrey;
  grid-column:span 3;
  border : 3px solid black;
    display: flex;
  flex-flow:column;
 justify-content:center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.