# Web page's semantic elements

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>

<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;
overflow: hidden;
background-color: navy;
}

nav a
{
float: left;
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
}

nav a:hover
{
background-color: hsl(240, 100%, 35%);
}

nav a.active
{
color: navy;
background-color: white;
}

.column
{
float: left;
}

#sidenav
{
width: 20%;
}

#sidenav ul
{
list-style-type: none;
margin: 0;
}

#sidenav li a
{
margin-bottom: 4px;
display: block;
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
{
}

footer
{
background-color: #eee;
color: #aaa;
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>

<body>
<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>

<nav>
<a href="#Expertise">EXPERTISE</a>
<a href="#Careers">CAREERS</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>

<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 = "Sitemap.html">Sitemap</a>
<br />
</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.

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.

# Character encoding

As a good practice, the character encoding should be included in the head section of the document before the title element:

<meta charset="utf-8">
<title>SigmaCubes - Home</title>


In order for all browsers to recognize a declaration, it must be

• Within the <head> element,
• Before any elements that contain text, such as the <title> element, AND
• Within the first 512 bytes of your document, including DOCTYPE and whitespace

From Google Code Archive doctype-mirror - MetaCharsetAttribute.wiki

# Semantics

Semantics are always highly opinion-based. It depends heavily on the actual content and context. This makes it hard to review the part inside main. The structure seems fine, but whether an article with nested section elements is the best fit, depends on the actual content.

The usage of aside is good, using it for a secondary navigation within the page.

## nav-element

I would say, you could use a list in the nav-element as well, like you did in the aside-element:

<nav>
<ul>
<li>
</li>
</ul>
</nav>


This is also recommended by the Web Accessibility initiate:

Convey the menu structure, typically by using a list. Such structural information allows assistive technologies to announce the number of items in the menu and provide corresponding navigation functionality.

From w3.org Web Accessibility Tutorials: Menu Structure

Same goes for the anchor elements in the footer.

## hr-elements

You're using hr-elements at the bottom of sections, which is not necessary:

The hr element represents a paragraph-level thematic break.

From W3C hr

Use CSS and border-bottom here.

## br-elements

Don't use br-elements to create distance between elements. Use CSS instead.

The HTML <br> element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

From MDN <br>: The Line Break element

# alt-attributes

You use these alt-attributes on two images on the header:

alt="[Company logo]"
alt="[Company Office]"


First of all, you don't need to wrap the text into []. Screen readers will read parentheses, brackets etc. so this can get annoying.

A logo don't need to have the word logo in its alt-attribute. The company name is just fine:

It is common practice on the web to have the main site logo also link to the site home page. Because this is fairly standard practice, providing alternative text for the image, such as your company name (alt="Acme Company), will usually suffice. Identifying the logo as actually being a logo (alt="Acme Company Logo") is not typically necessary. The content and function is not "logo".

From WebAIM Alternative Text: Logos

The alternative text company office is probably not descriptive enough or the image can have an empty alt-attribute, if it's just a decorative image.

# Style

Try to be consistent:

<a href="#WhatWeDo">What we do</a>
<a href = "Sitemap.html">Sitemap</a>


… or:

<br>
<br />


Try to avoid ids in selectors in CSS. See CSSLint Disallow IDs in selectors .

With just a couple of elements this might be readable:

nav li, #sidenav, main


But at some point, it might get confusing. List the selectors like that:

nav li,
#sidenav,
main

• the review points raised by you are excellent. Thanks. Sep 25, 2018 at 11:48