Семантика сайту

Загальний вигляд нашого односторінкового сайту

HTML-дерево нашого сайту

А так виглядає семантика нашого сайту

І, наостанок, приклад CSS-файлу для такої розмітки

body {
     background: #FFF;
     color: #000;
     font-family: Arial, sans-serif;
     font-size: 14px;
     width: 100%;
     height: 100%;
}
h1,.nav1{
 text-align: center; 
}
h1 {
margin: 0;
}
.container1 {
     background: #FFD700;
     margin: auto;
     width: 90%;
     height: auto;
padding: 0.1px 0;
}
header {
     background: #FFE4E1;
     margin: 5px;
     width: auto;
     height: auto;
 }
.nav1 ul {
display: block;
list-style-type: none
}
.nav1 ul li {
display: inline;
}
.nav1 ul li a{
padding: 5px 15px 5px 15px;
text-decoration: none;
}
.nav1 ul li a:link,
.nav1 ul li a:visited,
.nav1 ul li a:active {
background-color: #660033;
color: #cccccc;
}
.nav1 ul li a:hover {
background-color: #ffffff;
color: #cc0000;
}
.img1{
 margin-left: 10px;
 padding: 15px ;
 shape-outside: circle(50%);
 float: left;
 border-radius: 50%;   
}
.img2{
 float: left;
 padding-right: 10px; 
}
.shapka{
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.goog{
     text-align: right;
     padding-right: 10px;
 }
.container2{
display: grid;
grid-template-columns: 25% 75%;
overflow: auto;
}
main, footer, .sidebar{

 padding: 10px;
 margin: 5px;
 width: auto;
 height: auto;
}
main{
     background: #E6E6FA;
}
.sidebar{
     background: #B0E0E6;
}
footer {
    background: #EEE8AA;
}
.text{
text-align: justify;
}