Skip to content

Aarya2024/html-cheatsheet

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 

Repository files navigation

html-cheatsheet

Complete HTML Reference

For a comprehensive reference on HTML elements, attributes, and usage examples, visit the Mozilla Developer Network (MDN) HTML Element Reference.

HTML Boilerplate

<!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>

HTML Elements

Headings

<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>

Paragraph

<p>This is a paragraph.</p>

Links

<a href="https://www.example.com">This is a link</a>

Images

<img src="image.jpg" alt="Description of image">

Lists

Unordered List

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

Ordered List

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>

Tables

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

Forms

<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>

Buttons

<button type="button">Click Me!</button>

Divisions and Spans

Division

<div>This is a division element.</div>

Span

<span>This is a span element.</span>

Semantic Elements

<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>

HTML Attributes

id Attribute

<p id="unique-paragraph">This paragraph has a unique id.</p>

class Attribute

<p class="common-class">This paragraph has a class.</p>
<p class="common-class another-class">This paragraph has multiple classes.</p>

name Attribute

<input type="text" name="username" placeholder="Enter your username">
<input type="email" name="email" placeholder="Enter your email">

title Attribute

<p title="Tooltip text">Hover over this paragraph to see the tooltip.</p>

alt Attribute

<img src="image.jpg" alt="Description of the image">

href Attribute

<a href="https://www.example.com">This is a link</a>

src Attribute

<img src="image.jpg" alt="Description of the image">
<script src="script.js"></script>

placeholder Attribute

<input type="text" placeholder="Enter your name">

value Attribute

<input type="text" value="Initial value">
<input type="submit" value="Submit">

disabled Attribute

<input type="text" disabled>
<button disabled>Disabled Button</button>

checked Attribute

<input type="checkbox" checked>
<input type="radio" name="option" checked>

Form Elements and Input Types

Form Elements

<form>

<form action="/submit" method="post">
    <!-- Form elements go here -->
</form>

<textarea>

<textarea id="message" name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

<select> and <option>

<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>

<button type="button">Click Me!</button>
<button type="submit">Submit</button>

<fieldset> and <legend>

<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>

<label for="username">Username:</label>
<input type="text" id="username" name="username">

Input Types

Text Input

<input type="text" id="username" name="username" placeholder="Enter your username">

Password Input

<input type="password" id="password" name="password" placeholder="Enter your password">

Email Input

<input type="email" id="email" name="email" placeholder="Enter your email">

Number Input

<input type="number" id="quantity" name="quantity" min="1" max="10">

Date Input

<input type="date" id="birthday" name="birthday">

Checkbox

<input type="checkbox" id="subscribe" name="subscribe" value="newsletter">
<label for="subscribe">Subscribe to newsletter</label>

Radio Button

<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>

File Input

<input type="file" id="myfile" name="myfile">

Submit Button

<input type="submit" value="Submit">

Reset Button

<input type="reset" value="Reset">

Button

<input type="button" value="Click Me!">

Example Form with Various Input Types

<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 Entity Codes

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:

  • &lt; represents <
  • &gt; represents >
  • &amp; represents &
  • &quot; represents "
  • &euro; represents €

For a complete reference, visit the HTML Named Character References page.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published