HTML5 Semantic Elements

Starter HTML5 Web Page Using the Semantic Elements

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Some Title Here</title>
	<link rel="stylesheet" type="text/css" href="yourstylesheet.css" />
  </head>
  <body>
	<header>

	</header>
	<nav>

	</nav>
	<aside>
				
	</aside>
	<main>
				
	</main>
	<footer>

	</footer>
	</div>
  </body>
</html>

Web Page – home.htm

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Home Page</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="container">
		<header>
			<h1>HOME PAGE</h1>
		</header>
		<nav>
			<strong><em class="currentpage">Home</em>
			&nbsp;&nbsp;
			<a href="service.htm">Services</a>
			&nbsp;&nbsp;
			<a href="terms.htm">Terms</a>
			&nbsp;&nbsp;
			<a href="contact.htm">Contact Us</a>
			&nbsp;&nbsp;
			<a href="about.htm">About Us</a></strong>
		</nav>
		<div id="content">
			<aside>
				Side Bar will be in this area Side Bar will be in this area Side Bar will be in this area Side Bar will be in this area Side Bar will be in this area
			</aside>
			<main>
				<p class="red">Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area</p>
				
				<p class="red">Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area</p>
			</main>
			<div class="clearfloat">&nbsp;</div>
		</div>
		<footer>
			<p class="red">This page made with information from <a href="https://www.w3schools.com/html/html_links.asp" target="_blank">W3Schools.com</a>.</p>
		</footer>
	</div>
  </body>
</html>

CSS – style.css


body {
 text-align: center;
}
div {
	margin: 0px;
    padding-top: 1%;	
}
header {
 min-height: 200px;
 border-top: 1px dotted gray;

}
header h1 {
 color:rgb(112,32,209);
 font-size:74px;
}
nav {
 border-top: 1px dotted gray;
 border-bottom-style: solid;
 border-bottom-color: red;
 border-bottom-width: 1px;
 height: 50px;
 font-size: 20px;

}
#content {
 min-height:200px;

}
#content div {
 min-height: 200px;	
}
aside {
 float: left;
 width:23%;
 margin: 20px;

}
main {
 border-left: 1px dotted gray;
 float: right;
 width:70%;

}
footer {
 border-top: 1px dotted gray;
 background-color: #bfcbff;
 vertical-align:bottom;
 min-height: 100px;

}
table, th, td {
 border: 1px dotted gray;
 border-collapse: collapse;
}
.red {
 color: red;
}
.currentpage {
 color: gray;
}
.clearfloat {
 clear: both;
 min-height: 0px !important; 
 height: 0px;
}