I request a review of the following web page, especially on the use of semantic elements:
https://jsfiddle.net/SSteven/qt9d2sfw/
The HTML5 code is:
<!DOCTYPE html>
<html>
<head>
<title>Semantic page</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
*
{
box-sizing: border-box;
}
body
{
margin: 0;
}
.clearfix::after
{
content: "";
clear: both;
display: table;
}
.img-container
{
float: left;
width: 50%; /* 2 boxes */
padding: 10px; /* space between the images */
}
nav
{
margin: 0;
padding: 0;
overflow: hidden;
background-color: navy;
}
nav a
{
float: left;
display: inline-block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
nav a:hover
{
background-color: hsl(240, 100%, 35%);
}
nav a.active
{
color: navy;
background-color: white;
}
.column
{
float: left;
padding: 15px;
}
#sidenav
{
width: 20%;
}
#sidenav ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#sidenav li a
{
margin-bottom: 4px;
display: block;
padding: 8px;
background-color: hsl(209, 70%, 90%);
text-decoration: none;
color: #444;
}
#sidenav li a:hover
{
background-color: hsl(240, 100%, 80%);
color: white;
}
#sidenav li a.active
{
background-color: #008CBA;
color: white;
}
main
{
width: 80%;
}
table, th, td
{
border: 1px solid grey;
border-collapse: collapse;
}
th, td
{
padding: 10px;
}
footer
{
background-color: #eee;
color: #aaa;
padding: 10px 0 5px 0;
text-align: center;
}
/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px)
{
nav li, #sidenav, main
{
/* The width is 100%, when the viewport is 800px or smaller */
width: 100%;
}
}
</style>
</head>
<body>
<header class="clearfix">
<div class="img-container">
<img src="http://www.company.com/Images/Logo.jpg"
alt="[Company logo]"
style="width: 100%;">
</div>
<div class="img-container">
<img src="http://www.company.com/Images/Office.jpg"
alt="[Company Office]"
style="width: 100%;">
</div>
</header>
<nav>
<a href="#AboutUs" class="active">ABOUT US</a>
<a href="#Expertise">EXPERTISE</a>
<a href="#Careers">CAREERS</a>
<a href="#ContactUs">CONTACT US</a>
</nav>
<div class="clearfix">
<aside class="column"
id="sidenav">
<ul>
<li><a href="#WhatWeDo">What we do</a></li>
<li><a href="#WhyUs">Why Us?</a></li>
<li><a href="#Technologies">Technologies</a></li>
</ul>
</aside>
<main class="column">
<article>
<h1>ABOUT THE COMPANY</h1>
<section id="WhatWeDo">
<h2>What we do</h2>
<p>
blah blah blah ...
</p>
<br><hr>
</section>
<section id="WhyUs">
<h2>Why Us?</h2>
<p>More blah ...</p>
<br><hr>
</section>
<section id="Technologies">
<h2>Technologies</h2>
<p>Still more blah ...</p>
</section>
</article>
</main>
</div>
<footer>
<a href = "Terms.html">Terms</a> |
<a href = "Privacy.html">Privacy Policy</a> |
<a href = "TrademarksCopyrights.html">Trademarks & Copyrights</a> |
<a href = "Sitemap.html">Sitemap</a>
<br />
All rights reserved.
</footer>
</body>
Specifically:
1) At the top, 2 images are supposed to be displayed. (Currently, their alt text is displayed.) I have treated this as the <header>. I have used "float: left" to display both images horizontally.
2) The top menu has been displayed in an <nav> element, which has been styled along with its sub-elements.
3) The "side menu" has been included in an <aside> element.
4) The <main> element contains an <article> element, which has the main content.
Both the "side menu" and the <main> element are floated horizontally.
5) Finally, there is a <footer> element.
Basically, I'd like to ask:
1) Is the use of the semantic elements appropriate?
2) Is their styling done correctly or is there a better way?
3) I have indented the HTML code. Does this conform to a best practice for markup languages?
4) Review of the CSS code is also requested. I have indented it.
