If your HTML book was published before 2014, it likely teaches HTML4 or XHTML and lacks information about semantic tags, media queries, or responsive design. HTML5 simplified and standardized much of the web — use modern guides published after 2015 for best results.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
<header>Header content</header>
<nav>Navigation links</nav>
<main>
<article>Main content</article>
<aside>Sidebar info</aside>
</main>
<footer>Footer information</footer>
</body>
</html>HTML5 works beautifully with CSS3 to support responsive web design. Use percentages instead of fixed pixels to allow content to resize based on the screen. Also, use media queries to apply different styles on different screen sizes.
<html>: Root element<head>: Metadata container<title>: Page title<meta>: Defines metadata like charset<link>: Link to external resources<style>: Embedded CSS<script>: JavaScript code<body>: Page content<header>: Top section of page or article<nav>: Navigation links<main>: Primary page content<article>: Self-contained content block<section>: Thematic grouping of content<aside>: Sidebar or callout content<footer>: Bottom of page or article<h1> to <h6>: Headings<p>: Paragraph<a>: Link to another page or resource<img>: Image
<img src="pic.jpg" alt="My Picture" style="width:100%; max-width:400px;">
<ul>: Unordered list<ol>: Ordered list<li>: List item<table>: Data table<tr>: Table row<td>: Table cell<form>: User input form<input>: Input field<button>: Clickable button<label>: Input label<canvas>: Drawing surface for JavaScript graphicsThe <canvas> tag lets JavaScript draw shapes, images, and text. You define the size in HTML and draw using JS.
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 150, 100);
</script>