Structure & Basic Tags
<!DOCTYPE html> → Declares the type of document (HTML5). It tells the browser: “This is
an HTML page.”
<html> → The root element. Everything on the webpage sits inside this tag.
<html>
<head></head>
<body></body>
</html>
<head> → Contains information about the page (not shown to users), like the title, metadata,
styles, and links to scripts or CSS.
<head>
<title>My Page</title>
</head>
<title> → Sets the title of the page (shown in the browser tab or search engine results).
<title>Welcome Page</title>
<body> → Contains everything the user sees: text, images, buttons, links, etc.
<body>
<p>Hello World!</p>
</body>
Text & Content
<h1> to <h6> → Headings, from the most important (<h1>) to least (<h6>). Used for titles
and subheadings . <h1>Main Title</h1>
<h3>Subtitle</h3>
<p> → Paragraph of text. Creates spacing before and after the block of text. <p>This is a
paragraph of text.</p>
<hr> → Horizontal rule (a line across the page, often used to separate content).
<br> → Line break (forces text to go to a new line without starting a new paragraph).
Hello<br>World → Displays:
Hello
World
<span> → Inline container (used to style or mark part of text without breaking it into a new
block). <p>This is <span style="color:red">red</span> text.</p>
<div> → Block-level container (used to group sections of content, like a box). <div
style="border:1px solid black">Box content</div> It will display on the page as a box with a thin
black border around the words “Box content”.
Formatting
<b> / <strong> → Bold text (<strong> also adds meaning: "this text is important").
<b>Bold</b> and <strong>Important</strong>
<i> / <em> → Italic text (<em> adds emphasis in meaning).
<i>Italic</i> and <em>Emphasized</em>
<u> → Underlined text. <u>Underlined</u>
<mark> → Highlights text (like using a marker). <mark>Highlighted text</mark>
<small> → Makes text smaller. <small>Smaller text</small>
<sup> → Superscript (e.g., 10<sup>2</sup> = 100).
<sub> → Subscript (e.g., H<sub>2</sub>O).
Links & Media
<a> → Anchor tag. Creates hyperlinks to other pages, files, or locations within the same page.
<a href="https://www.google.com">Visit Google</a>
<img> → Displays an image. Needs src (source) and usually alt (description for
accessibility). <img src="cat.jpg" alt="Cute cat">
<audio> → Embeds audio files (like MP3s) with play controls.
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
<video> → Embeds videos with controls.
<video controls width="300">
<source src="movie.mp4" type="video/mp4">
</video>
<source> → Defines media sources for <audio> and <video>.
<iframe> → Embeds another webpage inside the current page (like YouTube videos or
Google Maps). <iframe src="https://www.wikipedia.org" width="400"
height="200"></iframe>
Lists
<li> → List item (used inside <ul> or <ol>).
<ul> → Unordered list (bullets).
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
<ol> → Ordered list (numbers/letters).
<ol>
<li>First</li>
<li>Second</li>
</ol>
<dl> → Definition list.
<dt> → Term (word being defined).
<dd> → Definition (explanation of the word)
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
Tables
<table> → Creates a table.
<tr> → Table row.
<td> → Table data (a cell).
<th> → Table header cell (bold, centered by default).
<thead> → Groups the header rows of the table.
<tbody> → Groups the main body rows.
<tfoot> → Groups the footer rows.
<caption> → Title/description for the table.
<table border="1">
<caption>Student Grades</caption> <tr>
<th>Name</th>
<th>Grade</th>
</tr>
<tr>
<td>Alice</td>
<td>90</td>
</tr>
<tr>
<td>Bob</td>
<td>85</td>
</tr>
</table>
Forms & Input
<form> → Creates a form for user input.
<input> → Single-line input (text, number, password, checkbox, etc., depending on type).
<textarea> → Multi-line text input.
<button> → Clickable button.
<select> → Dropdown menu.
<option> → Options inside a dropdown.
<label> → Label for an input field (improves accessibility).
<fieldset> → Groups related form fields.
<legend> → Caption for a fieldset.
<form>
<label for="name">Name:</label>
<input type="text" id="name"><br><br>
<label for="msg">Message:</label>
<textarea id="msg"></textarea><br><br>
<label>Choose:</label>
<select>
<option>Option 1</option>
<option>Option 2</option>
</select><br><br>
<button type="submit">Submit</button>
</form>
Semantic HTML (for better structure & SEO)
<header> → Header section (intro or top navigation).
<nav> → Navigation menu links.
<main> → Main content of the page.
<article> → Self-contained piece of content (like a blog post).
<section> → A section of related content.
<aside> → Sidebar or secondary content.
<footer> → Footer section (bottom of the page).
<figure> → Used to group an image and its caption.
<figcaption> → Caption for the <figure>.
<header>
<h1>Website Title</h1>
</header>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a>
</nav>
<main>
<article>
<h2>Blog Post</h2>
<p>This is an article inside the main content.</p>
</article>
</main>
<aside>
<p>Sidebar: links or ads here</p>
</aside>
<footer>
<p>© 2025 My Website</p>
</footer>
Scripting & Styles
<style> → Write CSS directly inside HTML
<style>
p { color: blue; }
</style>
<link> → Link to an external CSS file.
<link rel="stylesheet" href="styles.css">
<script> → Embed JavaScript code.
<script>
alert("Hello World!");
</script>
<noscript> → Content shown if the browser doesn’t support JavaScript.
<noscript>Your browser does not support JavaScript.</noscript>
