HTML Structure

Canvas follows a simple coding structure that is easy to understand and implement. Make sure that you follow some of the Important Rules to avoid unexpected errors:

Always enclose all the Content inside the #wrapper <div>.
Never use nested .container <div>s. Close the Previous .container <div> and then open a New <div>. Otherwise, it will cause Formatting Issues.
Validate your HTML Codes for errors on https://validator.w3.org/. Follow these rules:
1. Check and Fix Unclosed HTML Tags.
2. Check and Fix Duplicate IDs.
3. Ignore Google Fonts, type Attribute unnecessary or not needed related errors.

Code Example

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>

	<!-- Stylesheets & Title
	============================================= -->
	...

</head>
<body>

	<!-- The Main Wrapper
	============================================= -->
	<div id="wrapper">

		<!-- Header
		============================================= -->
		<header id="header">

			...

		</header>

		<!-- Site Content
		============================================= -->
		<section id="content">
			<div class="content-wrap">
				<div class="container">

					...

				</div>
			</div>
		</section>

		<!-- Footer
		============================================= -->
		<footer id="footer" class="dark">
			<div class="container">

				...

			</div>

			<!-- Copyrights
			============================================= -->
			<div id="copyrights">
				<div class="container">

					...

				</div>
			</div>

		</footer>

	</div>

	<!-- Scripts
	============================================= -->

</body>
</html>

Layout Settings

This Theme Supports both Boxed & Wide Layouts. Adding the class .stretched to the <body> will turn your website into a Wide Layout:

<body class="stretched">

Last Modified: June 3, 2020

Need Help?