HTML5 Semantic Elements and the Canvas API
Tech
1
1. Semantic HTML5 Elements
HTML5 introduces semantic elements that provide meaningful structure to web documents, improving accessibility and SEO. Below demonstrates a three-column layout using these elements with three different CSS approaches.
Base HTML Structure
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout Patterns</title>
<style>
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.page-header {
height: 60px;
line-height: 60px;
text-align: center;
background-color: #cdb4db;
}
.page-footer {
height: 60px;
line-height: 60px;
text-align: center;
background-color: #bde0fe;
}
</style>
</head>
<body>
<header class="page-header">Header</header>
<div class="content-wrapper">
<aside class="sidebar-left">
<section>Left Sidebar</section>
</aside>
<main class="primary-content">Main Content Area</main>
<aside class="sidebar-right">
<article>Right Sidebar</article>
</aside>
</div>
<footer class="page-footer">Footer</footer>
</body>
</html>
Flexbox Implementation
.content-wrapper {
display: flex;
width: 100%;
height: calc(100% - 120px);
background-color: #ffafcc;
overflow: hidden;
}
.primary-content {
flex: 1 1 auto;
height: 100%;
background-color: #ff8c00;
}
.sidebar-left {
flex: 0 0 100px;
height: 100%;
background-color: #90ee90;
}
.sidebar-right {
flex: 0 0 100px;
height: 100%;
background-color: #ffa07a;
}
Float-Based Implementation
.container {
width: 100%;
height: calc(100% - 120px);
background-color: #ffafcc;
overflow: hidden;
}
.central-area {
width: 100%;
height: 100%;
background-color: #ff8c00;
}
.aside-left {
float: left;
width: 200px;
height: 100%;
background-color: #90ee90;
}
.aside-right {
float: right;
width: 200px;
height: 100%;
background-color: #ffa07a;
}
Note: When using float layouts, place the middle column last in the DOM to prevent container collapse:
<aside class="aside-left"><section>Left Content</section></aside>
<aside class="aside-right"><article>Right Content</article></aside>
<main class="central-area">Center Content</main>
CSS Grid Implementation
.grid-container {
display: grid;
grid-template-columns: 200px 1fr 200px;
width: 100%;
height: calc(100% - 120px);
background-color: #ffafcc;
}
.center-column {
background-color: #ff8c00;
}
.left-column {
background-color: #90ee90;
}
.right-column {
background-color: #ffa07a;
}
2. Flexible Attribute Syntax
HTML5 permits flexible attribute quoting styles, though consistency is recommended for maintainability.
<!-- Standard double quotation marks -->
<input type="text" value="Double quoted value">
<!-- Single quotation marks (valid but less common) -->
<input type="text" value='Single quoted value'>
<!-- Unquoted values (valid only for single tokens without spaces) -->
<input type="text" value=unquoted>
<!-- Required when values contain whitespace -->
<input type="text" value="Value containing spaces">
3. Canvas Drawing API
The <canvas> element creates a drawable bitmap region controlled exclusively through JavaScript. It functions as a container for graphics rather than a standalone drawing tool.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Graphics Demo</title>
</head>
<body>
<canvas id="drawingSurface" width="1080" height="1000"></canvas>
</body>
<script>
const canvas = document.getElementById('drawingSurface');
const painter = canvas.getContext('2d');
// Translate coordinate origin to center of canvas
painter.translate(320, 320);
// Draw concentric circles using arc(centerX, centerY, radius, startAngle, endAngle)
painter.beginPath();
painter.arc(0, 0, 120, 0, Math.PI * 2);
painter.arc(0, 0, 8, 0, Math.PI * 2);
painter.stroke();
painter.closePath();
// Rectangle rendering: filled vs stroked
painter.fillRect(120, 120, 120, 120);
painter.strokeRect(260, 120, 120, 120);
painter.fillStyle = '#ffb6c1';
painter.fillRect(120, 260, 120, 120);
painter.strokeStyle = '#dc143c';
painter.strokeRect(260, 260, 120, 120);
// Clear rectangular region
painter.clearRect(170, 170, 100, 100);
// Solid circle rendering
painter.beginPath();
painter.arc(220, 0, 120, 0, Math.PI * 2, false);
painter.fillStyle = '#ffb6c1';
painter.fill();
painter.closePath();
// Arc outline rendering
painter.beginPath();
painter.arc(440, 0, 120, 0, Math.PI * 2, false);
painter.strokeStyle = '#dc143c';
painter.stroke();
painter.closePath();
// Line segment drawing
painter.beginPath();
painter.strokeStyle = '#228b22';
painter.moveTo(550, 0);
painter.lineTo(0, 400);
painter.stroke();
// Linear gradient definition
const fade = painter.createLinearGradient(0, 0, 0, 350);
fade.addColorStop(0, '#E55D87');
fade.addColorStop(0.5, '#dddddd');
fade.addColorStop(1, '#5FC3E4');
painter.fillStyle = fade;
painter.fillRect(0, 0, 450, 350);
// Render external image onto canvas
const photo = new Image();
photo.src = './img/layout.jpeg';
painter.drawImage(photo, 120, 240);
</script>
</html>
