HTML5 Beginner Notes & Tag Reference
Introduction to HTML
HTML (HyperText Markup Language) is the language used to create webpages. It tells the
browser how to display text, images, links, tables, forms, and more.
Basic HTML page structure looks like this:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first webpage.</p>
</body>
</html>
Tips for Beginners
1. Always start with <!DOCTYPE html> at the top.
2. Use <html>, <head>, and <body> in every page.
3. Close every tag properly like </p> for <p>.
4. Save file as .html and open in a browser to test.
5. Practice small examples daily.
Basic Structure
Tag Purpose (Simple Example
Explanation)
<html> Tells the browser that <html> ... </html>
everything inside is an
HTML page. Always the first
and last tag.
<head> Stores page info like title, <head><title>My
CSS, or scripts. Not shown Page</title></head>
on the page itself.
<title> Sets the page title in the <title>My First Page</title>
browser tab.
<body> Holds everything that will <body>Hello
be visible on the page. World</body>
Text Formatting
Tag Purpose (Simple Example
Explanation)
<h1> - <h6> Headings or titles. <h1> is <h1>Main Heading</h1>
biggest, <h6> is smallest.
<p> Creates a paragraph of text. <p>This is a
paragraph.</p>
<br> Breaks the line and moves Hello<br>World
text to next line.
<hr> Draws a horizontal line <hr>
across the page.
<b> Makes text bold. <b>Bold</b>
<i> Makes text italic. <i>Italic</i>
<u> Underlines text. <u>Underline</u>
<strong> Shows important text (like <strong>Important</
bold). strong>
<em> Emphasizes text (like italic). <em>Note</em>
Lists
Tag Purpose (Simple Example
Explanation)
<ul> Makes an unordered <ul><li>Item</li></ul>
(bulleted) list.
<ol> Makes an ordered <ol><li>Item</li></ol>
(numbered) list.
<li> Represents a single item <li>Apple</li>
inside a list.
Links & Media
Tag Purpose (Simple Example
Explanation)
<a> Creates a hyperlink <a
(clickable link). href="[Link]
Google</a>
<img> Displays an image. <img src="[Link]"
alt="Photo">
Tables
Tag Purpose (Simple Example
Explanation)
<table> Creates a table. <table>...</table>
<tr> Defines a row in a table. <tr>...</tr>
<td> Defines a cell in a row <td>Data</td>
(data).
<th> Defines a header cell <th>Heading</th>
(bold/centered).
Forms
Tag Purpose (Simple Example
Explanation)
<form> Form container that holds <form>...</form>
input elements.
<input> Single-line input field. <input type="text">
<textarea> Multi-line input area. <textarea>...</textarea>
<button> Clickable button. <button>Click Me</button>
<select> Dropdown menu. <select><option>1</
option></select>