HTML Page Structure

An HTML page is made up of several parts that work together to create the overall structure and content of the page. Here are the basic components of an HTML page structure:

<!DOCTYPE html> declaration: This is the very first line of an HTML document, and it tells the browser which version of HTML the document is written in. The latest version of HTML is HTML5, so the declaration for a HTML5 document is <!DOCTYPE html>.
<html> element: This is the root element of an HTML document, and it contains all the other elements on the page. The <html> element has two main parts: the <head> section and the <body> section.
<head> section: This section contains metadata about the document, such as the page title, links to stylesheets, and other information that is not displayed on the page itself.
<title> element: This element is inside the <head> section and defines the title of the document. This title is displayed in the browser’s title bar and is also used by search engines to identify the page.
<body> section: This section contains the visible content of the page, such as text, images, and other media. The body section is where you define the structure of the page and organize the content using HTML tags.
HTML tags: HTML tags are used to define the structure and content of the page. Some common tags include <header>, <nav>, <section>, <article>, <footer>, <p>, <ul>, and <li>. These tags are used to create headings, paragraphs, lists, and other structural elements on the page.

Here’s an example of a basic HTML page structure:

<!DOCTYPE html>
<html>
<head>
	<title>My Website</title>
</head>
<body>
	<header>
		<h1>Welcome to My Website</h1>
	</header>
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
	<main>
		<section>
			<h2>About Me</h2>
			<p>My name is Jane, and I'm a web developer from California.</p>
		</section>
		<section>
			<h2>My Projects</h2>
			<ul>
				<li><a href="#">Project 1</a></li>
				<li><a href="#">Project 2</a></li>
				<li><a href="#">Project 3</a></li>
			</ul>
		</section>
	</main>
	<footer>
		<p>© 2023 My Website. All rights reserved.</p>
	</footer>
</body>
</html>

In this example, the HTML page structure includes a header, navigation, main content, and footer sections, each with their own HTML tags and content. By using HTML tags to structure the content of the page, we can create a well-organized and easily navigable website.

Leave a Reply Cancel reply