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. Sure! Here's a short message you can use for your GitHub repo:
Welcome to our cheatsheet repository! We encourage contributions from everyone. Whether you want to add new tips, improve existing ones, or fix any errors, your help is appreciated.
Feel free to fork this repo, make your changes, and submit a pull request. Let's make this cheatsheet better together!
Happy coding!