Access the ultimate HTML Cheat Sheet for quick reference and easy mastery of HTML coding. Whether you’re a beginner learning the basics or an experienced developer in need of a handy resource, this cheat sheet is your go-to guide. From essential tags and attributes to advanced elements, everything you need to know about HTML is neatly summarized in one place. Simplify your coding journey and create stunning web pages effortlessly with this comprehensive HTML Cheat Sheet.
HTML, which stands for HyperText Markup Language, is a standardized system used for creating web pages. It provides the structure of a web page by using “tags” to mark up different parts of the content, such as headings, paragraphs, images, links, and more. These tags define how the content is displayed and interacted with by web browsers.
Table of Contents
Why do we use HTML?
HTML is like a set of instructions for your web browser. It helps format text and images on web pages so they show up correctly. Without HTML, web browsers wouldn’t know how to display text or load images.
HTML also provides a basic structure for web pages, kind of like the bones of a body. Then, Cascading Style Sheets (CSS) come in to change how the web pages look, like adding different colors or fonts, just like skin changes how a body looks.
Basic HTML Skeleton:
<html>
<head>
<title>CodingStella</title>
</head>
<body>
<!-- Body contents here -->
</body>
</html>
Concept and Syntax of HTML:
An HTML document is like a plain text file that creates web pages. In this file, we use elements, which are special instructions enclosed in angle brackets (< >). For example, <image> and <p> are some of these instructions. Some of them, like <image> and <br>, don’t need a closing tag because they don’t contain text. We can also add extra information called “attributes” to these instructions, which help the web browser understand how to display them.
The structure of an HTML element is illustrated in the image above. HTML files are saved with the .htm or .html extension, provided by a web server, and can be viewed in any web browser.
Explore a list of HTML projects here.
Learn HTML: Basics to Advanced Concepts
1. Root Element in HTML
- In HTML, the main or top element of a webpage is called <html>. It’s like the starting point, and all other parts of the webpage are connected to it. Every HTML file begins and ends with this element. Here’s how it looks in a basic HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Head contents here -->
</head>
<body>
<!-- Body contents here -->
</body>
</html>
The structure of an HTML document is shown below:
2. HTML Meta Tag
<head>: This is like the backstage of a webpage where important details, like the title, scripts, and style sheets, are stored. These details aren’t shown on the webpage itself.<link>: Think of this as a bridge connecting the webpage to other resources like stylesheets or icons, making the webpage look good and function well.<meta>: It’s like adding extra information about the webpage that doesn’t fit neatly into other categories, like keywords or character encoding.<style>: This is where you define how the webpage looks, like choosing colors and fonts.<title>: It’s like giving a name to the webpage that shows up at the top of the browser, and it’s what you see when you bookmark a page.
An example showing the usage of all the above elements is given below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Cheatsheet </title>
<link rel="stylesheet" href="styles.css">
<style>
h1 {colour:blue;}
p {colour:red;}
</style>
</head>
</html>
3. HTML Elements: Sectioning the Root
<body>: This is where all the visible content of a webpage goes. There’s only one<body>in an HTML document.- Attributes you can use with body :
bgcolour: Sets the background color using a color name or a hex value.text: Sets the color of the text using a color name or a hex value.link: Sets the color of links using a color name or a hex value.vlink: Sets the color of visited links using a color name or a hex value.alink: Sets the color of active links when clicked using a color name or a hex value.
An example illustrating the use of the body element is given below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Cheatsheet</title>
<link rel="stylesheet" href="styles.css">
<style>
h1 { color: blue; }
p { color: red; }
</style>
</head>
<body style="background-color: red;">
<p>This is an HTML cheatsheet by @coding.stella.</p>
</body>
</html>
- HTML Comments: Even though you can’t see them on the webpage, HTML comments are helpful for documenting your code. You can add comments by putting your text between
<!--and-->. The following syntax shows how to add comments to your HTML source:
<!-- We can write our comments over here -->
4. HTML Elements: Sectioning the Content
<address>: This is where you put contact information, like an address or email. For example:
<address>
Written by <a href="mailto:your@example.com">@coding.stella</a>.<br>
Connect with us:<br>
<a href="https://www.codingstella.com">Stella Army</a><br>
Mumbai<br>
India
</address>
<article>: This is used for a self-contained piece of content, like a blog post. For example:
<article> <h2>HTML Cheatsheet</h2> <p>HTML is an important markup language for web development</p> </article>
<aside>: This section has content related to the main part of the page but not directly part of it. For example:
<aside>
<h4>Check out CodingStella</h4>
<p>Visit <a href="https://www.codingstella.com">CodingStella</a> for more coding resources and tutorials.</p>
</aside>
<header>: This part includes introductory content like headings and sometimes a logo. For example:
<header> <h1>Header over here</h1> <p>Content by Stella</p> </header>
<footer>: This is like the bottom part of the page, often containing information about the author or copyright details. For example:
<footer>
<p>Author: codingstella</p>
<p><a href="mailto:your@example.com">your@example.com</a></p>
</footer>
<main>: This is where the main content of the webpage goes. For example:
<main> <h1>The Heading tag</h1> </main>
<h1>to<h6>: These are different levels of headings,<h1>being the most important. For example:
<h1>The Heading tag</h1> <h2>The Subheading tag</h2>
<nav>: This is for navigation links like menus or tables of contents. For example:
<nav> <a href="/oop/">Learn OOPs</a> | <a href="/c++/">Learn C++</a> | <a href="/os/">Learn Operating System</a> | </nav>
<section>: This marks a standalone section within a webpage. For example:
<section>
<h4>Check out CodingStella</h4>
<p>Visit <a href="https://www.codingstella.com">CodingStella</a> for more coding resources and tutorials.</p>
</section>
These elements help organize and structure the content of a webpage in a meaningful way.
5. HTML Elements: Adding Text Content
<blockquote>: This is used for extended quotations and can include a citation. For example:
<blockquote cite="https://www.brainyquote.com/quotes/steve_jobs_416068">
Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work.
</blockquote>
<div>: This is a generic container for content and doesn’t affect how things look unless you style it with CSS. For example:
<div> <p>This is a paragraph inside a div element</p> </div>
<p>: This represents a paragraph of text. For example:
<p>This is a paragraph</p>
<pre>: This displays text exactly as it appears in the HTML source, preserving spaces and line breaks. For example:
<pre> This message is displayed in a fixed-width font with preserved spaces and line breaks. </pre>
<dd>,<dl>,<dt>: These are used together to create description lists, where each term (<dt>) is followed by its definition (<dd>). For example:
<dl>
<dt>Coffee</dt>
<dd>Dark aromatic beverage</dd>
<dt>Juice</dt>
<dd>Refreshing fruity drink</dd>
</dl>
<hr>: This creates a horizontal line, often used as a separator between sections. For example:
<hr>
<ol>,<ul>,<li>: These are used to create ordered and unordered lists with list items. For example:
<div>
<p>List of animals</p>
<ul>
<li>Lion</li>
<li>Elephant</li>
<li>Giraffe</li>
</ul>
<p>List of birds</p>
<ul>
<li>Eagle</li>
<li>Owl</li>
<li>Hummingbird</li>
</ul>
</div>
<figure>,<figcaption>: These are used together to group content like images with optional captions. For example:
<figure>
<img src="/pictures/tiger-1080-720.jpeg" alt="Tiger in the wild">
<figcaption>Picture of a tiger in its natural habitat</figcaption>
</figure>
These elements help structure and present text content on a webpage.
6. HTML Elements: Adding Image and Multimedia
<img>: This element is used to add images to a webpage. For example:
<img class="fit-picture" src="/pictures/apple-660-480.jpeg" alt="This is a picture of an apple">
<audio>: This element embeds sound content into a webpage. It can have one or more audio sources specified by thesrcproperty orsourceelement. For example:
<figure>
<figcaption>Roaring of a lion:</figcaption>
<audio controls src="/audio/demo/lion-roaring.mp3">
Your browser does not support the <code>Audio</code> element.
</audio>
</figure>
<video>: This element inserts a media player into the document for video playback. It’s used to display videos on a webpage. For example:
<video controls width="360" src="/videos/demos/teachHTML.mp4"> Seems like your browser is not supporting the feature of embedded videos. </video>
<track>: This element is used within<audio>and<video>elements to set timed text tracks, such as subtitles. It’s used for handling text-based data. For example:
<video controls width="360" src="/videos/demos/teachHTML.mp4">
<track default kind="captions" srclang="en" src="/videos/demos/teachHTML.vtt"/>
Seems like your browser is not supporting the feature of embedded videos.
</video>
These elements help include multimedia content like images, audio, and video in webpages.
7. HTML Elements: Adding Inline Text Semantics
<a>: This creates a hyperlink to web pages, files, email addresses, or anything else with a URL. For example:
<a href="https://www.facebook.com">Welcome to Facebook</a>
<em>: This emphasizes text by making it italic. It’s often used for highlighting important words. For example:
<p>We <em>need to</em> run faster!</p>
<code>: This is used to display computer code. It’s often styled differently to stand out. For example:
<audio controls src="/audio/demo/lion-roaring.mp3"> Your browser is not supporting the <code>Audio</code> element. </audio>
<abbr>: This represents an abbreviation or acronym, with an optional title for an expansion or description. For example:
<p> The <abbr title="Indian Space Research Organisation">ISRO</abbr> is headquartered in Bengaluru, India.</p>
<br>: This creates a line break in text, useful for creating new lines in poems or addresses. For example:
<p>Hi, Welcome to<br> Interviewbit. We help you master <br>data structure and algorithms</p>
<mark>: This highlights or marks text for citation or notation. It’s often visually distinct. For example:
<p>Please bring the <mark>Homework Copy</mark> tomorrow.</p>
<span>: This is a general container for inline content that doesn’t represent anything by default. It’s often used for styling or grouping elements. For example:
<p>My father has a <span style="color:red">red </span> suit.</p>
<cite>: This represents a reference to a creative work, like a book or painting. For example:
<p><cite>Mona Lisa</cite> Painting by Leonardo da Vinci </p>
<small>: This represents side comments or small print. It typically renders text in a smaller font size. For example:
<p><small>A very small piece of text.</small></p>
<time>: This represents a specific time period. It’s often used for displaying dates and times. For example:
<p>The library can be visited from <time>9:00</time> to <time>19:00</time> from Monday to Friday.</p>
<strong>: This indicates strong importance, seriousness, or urgency in text. It’s often displayed in bold. For example:
<strong>Strong texts in HTML are important content!</strong>
These elements help add emphasis, styling, and meaning to text content on a webpage.
8. HTML Elements: Adding Scripting
<script>: This element is used to include or refer to executable code, typically JavaScript. For example:
<!-- HTML4 --> <script type="text/javascript" src="javascript.js"></script> <!-- HTML5 --> <script src="javascript.js"></script>
This element is used to add interactivity and functionality to webpages by embedding or referring to JavaScript code.
9. HTML Elements: Interactive Elements
<details>: This creates a disclosure widget that can be toggled open or closed to show or hide additional information.<summary>: This specifies a summary or caption for the disclosure box of the<details>element.
Example:
<details> <summary>Summary of the topic</summary> HTML (Hypertext Markup Language) is the standard markup language for creating web pages and web applications </details>
In this example, clicking on “Summary of the topic” will toggle the visibility of the text “Java is an Object Oriented Programming Language.” This is useful for displaying additional information that can be hidden or revealed as needed.
10. HTML Elements: Demarcating Edits
<del>: This element represents text that has been deleted or removed from a document.<ins>: This element represents text that has been added or inserted into a document.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>Example of using the del element and ins element</h1>
<p>His favorite fruit is <del>apple</del> <ins>pineapple</ins>!</p>
</body>
</html>
In this example, the text “green” is marked as deleted (<del>) and replaced with the text “magenta,” which is marked as inserted (<ins>). This can be useful for showing revisions or changes made to a document.
11. HTML Elements: Tables
<table>: This element is used to display tabular data, organized into rows and columns.<caption>: This element specifies a title or caption for the table, and it’s usually placed as the first child of the<table>element.<thead>: This element contains a series of rows that represent the column headers of the table.<tbody>: This element contains a collection of rows that make up the main body of the table.<td>: This element designates a data-filled table cell within the table’s body.<tr>: This element defines a row of cells within the table.<th>: This element designates a header cell within the table, typically used for column headers. It can also specify the scope and header attributes to define the group’s nature.<tfoot>: This element contains a series of rows that summarize the table’s columns, typically placed after the<tbody>.
Example:
<table>
<caption>Details about Tables in HTML</caption>
<thead>
<tr>
<th rowspan="5">HTML table's header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Body of the table</td>
<td>Table has 5 rows</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer of the table</td>
</tr>
</tfoot>
</table>
In this example, we have a table with a caption, a header, a body, and a footer. The table contains rows and cells, with some cells spanning multiple rows using the rowspan attribute.
12. HTML Elements: Forms
<form>: This creates a section with interactive controls, allowing users to submit information to a web server.
Example:
<form action="" method="get" class="demoForm">
<div class="demoForm">
<label for="name">Please input your name:</label>
<input type="text" name="name" id="name" required>
</div>
<div class="demoForm">
<label for="email">Please input your email id:</label>
<input type="email" name="email" id="email" required>
</div>
<div class="demoForm">
<input type="submit" value="Submit!">
</div>
</form>
<button>: This specifies a clickable button, commonly used in forms or other parts of a document where a button is needed.
Example:
<button type="button" onclick="alert('This is a button click!')">Click Me!</button>
<datalist>: It includes a series of<option>components, providing values for other controls.
Example:
<form action="/submit" method="post">
<label for="city">Select your favorite city:</label>
<select id="city" name="city">
<option value="New York">New York</option>
<option value="Paris">Paris</option>
<option value="Tokyo">Tokyo</option>
<option value="Sydney">Sydney</option>
<option value="Cape Town">Cape Town</option>
</select>
<button type="submit">Submit</button>
</form>
<input>: This creates interactive controls for web-based forms to accept user input.<progress>: This shows a progress indicator, often displayed as a progress bar.
Example:
<label for="fileDownload">Progress of the download:</label> <progress id="fileDownload" value="75" max="80">75%</progress>
<select>,<optgroup>,<option>: These elements are used to create dropdown menus with selectable options.
Example:
<label for="city">Select your favorite city:</label>
<select name="city" id="city">
<optgroup label="Asian Cities">
<option value="tokyo">Tokyo</option>
<option value="bangkok">Bangkok</option>
</optgroup>
<optgroup label="European Cities">
<option value="paris">Paris</option>
<option value="rome">Rome</option>
</optgroup>
</select>
<label>,<legend>,<fieldset>: These are used to create labels, legends, and fieldsets to organize and structure form elements.
Example:
<form action="">
<fieldset>
<legend>Personal Information:</legend>
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname">
<!-- Additional form fields go here -->
<input type="submit" value="Submit">
</fieldset>
</form>
<textarea>: This allows users to submit a large amount of free-form text, such as comments or feedback.
Example:
<textarea id="CodingStella" name="CodingStella" rows="4" cols="50"> CodingStella provides a comprehensive platform for learning and mastering coding skills, offering a wide range of tutorials and resources for various programming languages and topics. </textarea>
Conclusion
In conclusion, the “HTML Cheat Sheet | Mastering HTML: Your Go-To Cheat Sheet” is an invaluable resource for both beginners and experienced developers alike. Whether you’re just starting to learn HTML or looking for a quick reference guide, this cheat sheet has you covered.
With its concise and comprehensive layout, mastering HTML becomes more accessible, allowing you to create stunning web pages with ease. So, bookmark this cheat sheet, and let it be your go-to companion on your journey to HTML mastery!
