Code

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Page Title</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<header>
			<a class="site-logo" href="index.html">Site Name</a>
			<nav>
				<a href="index.html">Home</a>
			</nav>
		</header>

		<main>
			<h1>Page Title</h1>
		</main>

		<footer>
			<p>Footer Content</p>
		</footer>

		<script src="scripts.js"></script>
	</body>
</html>

Description

  • <!DOCTYPE html> tells the browser that the file uses modern HTML.
  • <html lang="en"> contains the entire webpage. The lang attribute tells browsers and screen readers that the page is written in English.
  • <head> contains information and files the browser needs before displaying the page.
  • <meta charset="UTF-8"> helps the browser display letters, symbols, and punctuation correctly.
  • The viewport <meta> tag helps the page display at the correct width on phones and other small screens.
  • <title> sets the text shown in the browser tab. Search engines may also use it as the title of the page in search results.
  • <link rel="stylesheet" href="style.css"> connects the HTML file to the CSS file stored in the same folder.
  • <body> contains the visible structure and content of the webpage.
  • <header> contains the top area of the page, including the site name and navigation.
  • <a class="site-logo" href="index.html"> creates a text-based site logo that links back to the homepage.
  • <nav> groups the main navigation links. The starter file includes a Home link to index.html.
  • <main> contains the primary content of the page.
  • <h1> is the main heading visible on the page.
  • <footer> contains information shown at the bottom of the page.
  • <script src="scripts.js"></script> connects the page to the JavaScript file stored in the same folder. It is placed near the end of the <body> so the page content is available before the script runs.

AI Tutor