HTML Cheat Sheet: Essential Elements & Quick References
rajlaxmi meshram
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Title Here</title>
</head>
<body>
<!-- Your content here -->
</body>
</html>
Basic Tags
<html>: Root element.<head>: Contains metadata like title, links to CSS, etc.<body>: Contains the visible content.<title>: Title of the document.<meta>: Metadata like charset, viewport settings, etc.
Text Formatting
<h1>to<h6>: Headings.<p>: Paragraph.<br>: Line break.<hr>: Horizontal rule (line).<strong>: Bold text.<em>: Italic text.<u>: Underlined text.<small>: Smaller text.<mark>: Highlighted text.<blockquote>: Block quote.<pre>: Preformatted text (preserves whitespace).
Links and Media
<a href="url">: Hyperlink.<img src="url" alt="description">: Image.<video>: Video content.<audio>: Audio content.<iframe src="url">: Inline frame (embed content like YouTube videos).
Lists
<ul>: Unordered list.<li>: List item.
<ol>: Ordered list.<li>: List item.
<dl>: Definition list.<dt>: Term.<dd>: Description.
Forms
<form action="url" method="post/get">: Form element.<input type="text">: Single-line text input.<textarea>: Multi-line text input.<button>: Clickable button.<select>: Dropdown menu.<option>: Option in the dropdown.
<label for="id">: Label for a form element.<input type="checkbox">: Checkbox.<input type="radio">: Radio button.<input type="submit">: Submit button.
Tables
<table>: Table element.<tr>: Table row.<td>: Table data (cell).<th>: Table header (bold and centered).<thead>: Header group.<tbody>: Body group.<tfoot>: Footer group.<caption>: Table caption.
Semantic HTML
<header>: Defines a header for a document or section.<nav>: Defines a set of navigation links.<section>: Defines a section in a document.<article>: Defines an independent, self-contained content.<aside>: Defines content aside from the content it is placed in.<footer>: Defines a footer for a document or section.<main>: Defines the main content of the document.<figure>: Specifies self-contained content, like illustrations.<figcaption>: Caption for a<figure>element.
Attributes
id: Unique identifier.class: Class name for CSS styling.src: Source URL for images, videos, etc.alt: Alternate text for images.href: Hyperlink reference.style: Inline CSS styling.title: Tooltip text.target="_blank": Open link in a new tab/window.disabled: Disables an input element.readonly: Makes an input field read-only.required: Specifies that an input field must be filled out.
HTML Entities
<:<(Less than sign).>:>(Greater than sign).&:&(Ampersand).":"(Double quote).':'(Single quote).©: © (Copyright symbol). : Non-breaking space.
Comments
<!-- Comment here -->: Adds comments in the code.
Subscribe to my newsletter
Read articles from rajlaxmi meshram directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
rajlaxmi meshram
rajlaxmi meshram
As a graduate student with a B.E. degree in Information Technology Engineering, I have specialized in Full Stack Development and Design. My goal is to excel in software development, both frontend and backend, and I am eager to work in a competitive environment to enhance my indispensable skill-set, essential for success in any industry. I am determined to put forth abundant effort to achieve my aspirations and soar high in my career.