For a comprehensive reference on HTML elements, attributes, and usage examples, visit the Mozilla Developer Network (MDN) HTML Element Reference.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Description of the page">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Your Name">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
</body>
</html>
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>
<p>This is a paragraph.</p>
<a href="https://www.example.com">This is a link</a>
<img src="image.jpg" alt="Description of image">
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
<button type="button">Click Me!</button>
<div>This is a division element.</div>
<span>This is a span element.</span>
<header>This is a header.</header>
<nav>This is a navigation bar.</nav>
<main>This is the main content area.</main>
<article>This is an article.</article>
<section>This is a section.</section>
<aside>This is a sidebar.</aside>
<footer>This is a footer.</footer>
<p id="unique-paragraph">This paragraph has a unique id.</p>
<p class="common-class">This paragraph has a class.</p>
<p class="common-class another-class">This paragraph has multiple classes.</p>
<input type="text" name="username" placeholder="Enter your username">
<input type="email" name="email" placeholder="Enter your email">
<p title="Tooltip text">Hover over this paragraph to see the tooltip.</p>
<img src="image.jpg" alt="Description of the image">
<a href="https://www.example.com">This is a link</a>
<img src="image.jpg" alt="Description of the image">
<script src="script.js"></script>
<input type="text" placeholder="Enter your name">
<input type="text" value="Initial value">
<input type="submit" value="Submit">
<input type="text" disabled>
<button disabled>Disabled Button</button>
<input type="checkbox" checked>
<input type="radio" name="option" checked>
<form action="/submit" method="post">
<!-- Form elements go here -->
</form>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<button type="button">Click Me!</button>
<button type="submit">Submit</button>
<fieldset>
<legend>Personal Information</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
</fieldset>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="text" id="username" name="username" placeholder="Enter your username">
<input type="password" id="password" name="password" placeholder="Enter your password">
<input type="email" id="email" name="email" placeholder="Enter your email">
<input type="number" id="quantity" name="quantity" min="1" max="10">
<input type="date" id="birthday" name="birthday">
<input type="checkbox" id="subscribe" name="subscribe" value="newsletter">
<label for="subscribe">Subscribe to newsletter</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="file" id="myfile" name="myfile">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="button" value="Click Me!">
<form action="/submit" method="post">
<fieldset>
<legend>Personal Information</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" placeholder="Enter your first name">
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" placeholder="Enter your last name">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email">
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>
<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="newsletter">
<label for="myfile">Upload a file:</label
>
<input type="file" id="myfile" name="myfile">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>
HTML allows you to represent special characters and symbols using entity codes. For a comprehensive list of named character references, refer to the HTML Named Character References specification.
This specification provides a detailed list of entity codes for characters like <
, >
, &
, quotation marks, special symbols, and more. Using entity codes ensures that characters display correctly across different browsers and devices.
For example:
<
represents<
>
represents>
&
represents&
"
represents"
€
represents €
For a complete reference, visit the HTML Named Character References page.