Every web page begins with a basic structure. At minimum, you need HTML to describe the content and CSS to style it.
You first want to add a <!DOCTYPE> with the 'html'; attribute.
<!DOCTYPE html>
Next, you want to add an <html> element and add a 'lang' attribute set to 'en' for english.
<html lang="en">
After that inside the <head>, you want to add a <link> attribute then you want to use a 'rel' attribute with the value of 'stylesheet'.
<head><link rel="stylesheet"></head>
Then you want to use the 'href' attribute with the value of 'styles.css'.
<link rel="stylesheet" href="styles.css">
To make your website responsive, include a viewport meta tag inside the <head> section. This tells browsers how to scale content on mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Without this, your page might look zoomed out on phones or tablets.
The <head> contains information about your page that isn’t shown directly on the screen. It often includes:
<title>– sets the browser tab text.<meta charset="UTF-8">– defines character encoding.<link>– connects stylesheets or icons.
A <head> section goes after <doctype>, <html>, and <link>. <Meta> is used within the head section.
The <body> is where visible page content lives. Text, headings, links, images, and layouts all go here.
<body><h1>Hello World!</h1><p>This is a paragraph inside the body.</p></body>
A <body> section goes after and under the <head> section not before it.
The <main> element should contain the primary content of the page. It helps with accessibility and search engine optimization.
<main><section><h2>Introduction</h2><p>This is the main content area.</p></section></main>
Use <section>, <article>, and <aside> inside <main> to organize your content meaningfully.
A <main> section goes within a <body> section not before it.