OVERVIEW
HTML or HyperText Markup Language is the cornerstone of every web page. It is responsible for building the basic structure of the content that renders on a website, including images, texts, and videos. In HTML, the text is embedded using tags. After that, the web browser interprets the tags and finally displays them.
Web developers often need a quick reference list of common HTML tags, syntax, and attributes. This is where the HTML Cheat Sheet comes in.
This HTML Cheat Sheet gives you a quick list of commonly used HTML tags, syntax, and attributes for the web development process.
Let’s begin!
DOCUMENT SUMMARY
An HTML document contains hypertext markup language. An HTML document contains two sections: head and body. The head contains the information about the HTML document like title, HTML version, metadata etc, whereas the body contains the stuff you want to display on the web page.
Definition: Indicates that the webpage is HTML-based. One can view it on the first and last lines of the webpage. It's primarily used to indicate that the page is written in HTML5, the most current version of the language. This tag, often known as the root element, serves as a parent tag for all other tags on the page.
Syntax:
<!DOCTYPE >
<html lang="en">
<head>
<title>...</title>
</head>
<body>...</body>
</html>
Definition: Specifies the web page's metadata. It holds details like the name of the webpage, its JS and CSS dependencies, font use, etc.
Syntax:
<!DOCTYPE >
<html lang="en">
<head>...</head>
</html>
Definition: Every web page open in the browser will have this displayed in the title bar. Search engines use this tag to retrieve the webpage's subject, which is useful when ranking relevant search results.
Syntax:
<title> Learning Hub on HTML Cheat Sheet</title>
Definition: This tag contains everything the user can view on a webpage. It's a container for the entire web page's stuff.
Syntax:
<!DOCTYPE >
<html lang="en">
<head>
<title>Learning Hub</title>
</head>
<body>HTML Cheat Sheet</body>
</html>
DOCUMENT INFORMATION
HTML allows users to create structured documents by defining structural semantics for text elements like headings, paragraphs, lists, links, styling, and so on.
Definition: Specify your website's base URL. It also enables linking to internal website links cleaner.
Syntax:
<base href="https://www.lambdatest.com/learning-hub/">
Definition: Provides metadata (information about data) about a web page.
Syntax:
<meta charset="utf-8">
Definition: Link to scripts outside of the webpage and to add a favicon to a website. Most commonly used in CSS.
Syntax:
<link rel="stylesheet" href="styles.css">
Definition: A style tag can be used to complement or replace an external style sheet. It specifies how the webpage will look.
Syntax:
<style>
h1 {color:blue;}
p {color:black;}
</style>
Definition: It adds code snippets, usually in JavaScript, to make the webpage dynamic. This can also be used to link to an external script.
Syntax:
<script src="file.js"></script>
DOCUMENT STRUCTURE
HTML 5 uses a specific combination of elements and content to specify a page. Each property documentation page has the same structure, including a declaration at the top indicating that the page is an HTML 5 document, a document header, and a document body.
Definition: Provides six different options for writing a heading. <h1> has the biggest font size, while <h6> has the smallest.
Syntax:
<h1>Learning Hub</h1>
<h2>Learning Hub</h2>
<h3>Learning Hub</h3>
<h4>Learning Hub</h4>
<h5>Learning Hub</h5>
<h6>Learning Hub</h6>
Definition: The <div> tag specifies a division or block in a web page.
Syntax:
<div>
<p>The division tag starts here!</p>
</div>
Definition: An inline container marks up a piece of text or a section of a document. Inline elements, such as images, icons, and emoticons, can be injected without affecting the page's formatting.
Syntax:
<p>Learning Hub by <span style="color:blue">LambdaTest</span></p>
Definition:
Specifies a paragraph. This tag contains plain text.
Definition: Appends a single line break for web pages.
Syntax:
<p>Learning Hub<br> On <br>HTML Cheat Sheet.</p>
Definition: Draws a horizontal bar to denote the end of a section to define a conceptual break in a web page.
Syntax:
<h1>Learning Hub</h1>
<p>HTML Cheat Sheet</p>
<hr>
<p>Learn the fundamentals of HTML while polishing your HTML skills.</p>
TEXT FORMATTING
HTML text formatting is the method for enhancing text to strengthen its aesthetic value. HTML provides a variety of formatting tags in order to make the text more alluring to users.
Definition: Bold the text to emphasize its importance.
Syntax:
<strong>HTML Cheat Sheet!</strong>
Definition: Specifies the text in bold.
Syntax:
<p>Learning Hub On <b>HTML Cheat Sheet!</b></p>
Definition: Specifies the emphasized text in italic.
Syntax:
<p>Learning Hub On <em>HTML Cheat Sheet!</em></p>
Definition: Specifies the text in italic.
Syntax:
<p>Learning Hub On <i>HTML Cheat Sheet!</i></p>
Definition: Cites an author of a quotation or specifies the title of a creative work.
Syntax:
<p><cite>The Catcher in the Rye</cite> by J. D. Salinger.</p>
Definition: This specifies the text that has been removed from a page. Removed text is normally marked by a line in the browser.
Syntax:
<p>My favorite book is <del>Word Power Made Easy</del> <ins>Philosophy of Life</ins>!</p>
Definition: This specifies the text that has been inserted into a page. Inserted text is normally marked by a line in the browser.
Syntax:
<p>My favorite book is <del>Word Power Made Easy</del> <ins>Philosophy of Life</ins>!</p>
Definition: Indicates a quote presented from the external source.
Syntax:
<blockquote cite="https://wwwlambdatest.com"><p>This is a quote taken from LambdaTest</p></blockquote>
Definition: Specifies a brief quotation.
Syntax:
<p>LambdaTest mission is to:
Definition: Defines a shorthand or acronym.
Syntax:
The <abbr title="JavaScript">JS</abbr> first appeared in 1995.
Definition: Specifies the contact details for a document or article written by authors.
Syntax:
<address>
Written by Salman Khan</a>.<br>
Visit us at:<br>
https://www.lambdatest.com<br>
San Francisco, CA<br>
USA
</address>
Definition: It defines a phrase that will be explained in the document.
Syntax:
<p>
<dfn>HTML</dfn> is the standard markup language for developing web pages.
</p>
Definition: Defines code snippets within a paragraph.
Syntax:
<p>
The <code>background-color</code> specifies the background color of an element.
</p>
Definition: Specifies a subscript text i.e smaller font slightly below the normal font's midpoint.
Syntax:
<p>
This is <sub>subscript</sub> text.
</p>
Definition: Specifies a subscript text i.e smaller font slightly above the normal font's midpoint.
Syntax:
<p>
This is <sup>superscript</sup> text.
</p>
Definition: Specifies a smaller text
Syntax:
<p>
<small>Cross Browser Testing Cloud Built With Love For Testers</small>
</p>
LINK
In HTML, links are used to connect web pages or HTML documents. These are commonly referred to as hyperlinks, and allow users to navigate between web pages through certain text, images, phrases, etc.
Definition: Provides a hyperlink, which is used to connect two pages.
Syntax:
<a href="https://www.lambdatest.com">Visit LambdaTest!</a>
Definition: Specifies a hyperlink for linking to an email address.
Syntax:
<a href="mailto:abc@example.com">Send</a>
Definition: Specifies a hyperlink for linking to a phone number.
Syntax:
<a href="tel:+433377901">433377901</a>
Definition: Specifies a hyperlink for quick navigation to other sections of a page.
Syntax:
<a href="#section3">Go to Section 3</a>
IMAGES
HTML Images enhance the document's visual appeal and user engagement. The image can be styled and customized using CSS properties as per the developer's requirement.
Definition: Inserts an image on a web page.
Syntax:
<img src="logo1.jpg" alt="test_now" width="500" height="600">
Read: A Complete Guide On How to Make Responsive Images With CSS, HTML, WordPress & More!
LISTS
HTML lists are used to create lists of information. Lists can hold a variety of content, like paragraphs or images. Lists are often organized into three types: ordered (numbered), unordered (bulleted), and description lists.
Definition: An ordered list arranges items in the order they appear. It is also called a numbered list. An ordered list, or <ol> list, is created using the <ol> element and each list item starts with the <li> element. The items can be listed in any order.
Syntax:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Definition: An unordered list is a collection of things that don't have a set order. The HTML <ul> tag allows you to display items where there is no particular order that needs to be followed. The elements can be displayed majorly in four types of bulleted lists: Disc, circle, square or none.
Syntax:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Definition: An HTML <li> element represents a single item in an ordered or unordered list.
Syntax:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Definition: An HTML <dl> element is used for creating description lists.
Syntax:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Definition: The HTML <dt> element is used to indicate the definition of a term in a description or definition list. It should appear inside a <dl> element.
Syntax:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Definition: Description data is an element that contains data describing a definition term. This data can be either inline or block level.
Syntax:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
FORMS
HTML forms on web pages enable users to enter data sent by the browser to a server for processing.
Definition: The <form> HTML element is used to collect input data from the user. It provides facilities for entering text, number, email, password and other forms of input.
Syntax:
<form>
<!--form elements-->
</form>
Definition: The action attribute of the form element specifies a URL to a different web page. The second web page receives form data submitted by a user visiting a first web page.
Syntax:
<form action="www.lambdatest.com/learning-hub/html-cheat-sheet">
Definition: The HTML Attribute method is used to specify the HTTP method used to send data when submitting a form by specifying either POST or GET.
Syntax:
<form method="get|post">
Definition: The enctype attribute is used to specify how the form-data should be encoded when submitting it to the server. It dictates the data encoding scheme to be used when a form is submitted via the POST method.
Syntax:
<form enctype = "value">
Definition: The autocomplete attribute allows you to specify whether or not an input field should have autocomplete enabled. If a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
Syntax:
<form autocomplete="on|off">
Definition: The novalidate attribute is a boolean attribute used with HTML forms. When present, it specifies that the form's input should not be validated when submitted.
Syntax:
<form novalidate>">
Definition: The accept-charset attribute is used to specify the character encodings that are to be used for form submissions. The default value is "UNKNOWN", which indicates that the encoding equals the encoding of the document containing the <form> element.
Syntax:
<form accept-charset = "character_set">
Definition: The HTML target attribute can be used to specify where a linked document is to open.
Syntax:
<element target="_blank|_self|_parent|_top|framename">
Definition: The <fieldset> tag is used to group related form elements together. The <fieldset> tag draws a box around the related form elements.
Syntax:
<fieldset>Contents</fieldset>
Definition: The <label> tag in HTML is used to define the text that appears next to an element that the user should select. The <label> tag improves the usability of your website by giving a label to a control such as a checkbox, button, input box, meter, output box, progress bar, or text area.
Syntax:
<label> form content... </label>
Definition: The legend element defines the title for a <fieldset> element's child contents. The fieldset element is the parent element to the legend element.
Syntax:
<legend> HTML Cheat Sheet </legend>
Definition: The input element is used to declare an input control within a <form> element that allows users to input data. An input field can be of various types depending on the type attribute.
Syntax:
<input type = "value" .... />
INPUT TYPE ATTRIBUTES
The HTML input type attribute specifies the type of input element to display. The default type is text.
Definition: The HTML attribute type specifies the type of button for <button> elements and is also used in the <input> element to specify the type of input to display. The attribute is also used for embedding elements like link, object, script, source, and style to specify the Internet Media Type.
Syntax:
<element type="value">
Definition: The name attribute of the HTML element names the element and can be used to reference the element in a JavaScript. For a form, the name attribute is used as a reference when the data is submitted.
Syntax:
<form name="name">
Definition: The value attribute defines the initial (default) value of an <input> element. The value attribute is used differently for different input types. For "button", "reset", and "submit" it defines the text on the button. For "text", "password", and "hidden" it defines the initial (default) value of the input field.
Syntax:
<input value = "value">
Definition: The HTML size attribute is used to specify the initial width of an input field and the number of visible rows in a <select> menu.
Syntax:
<input size = "value">
Definition: The maxlength attribute of the <input> element specifies the maximum number of characters entered into an <input> element.
Syntax:
<input maxlength="number">
Definition: The HTML requires attributes to specify that the input element must be filled out before submitting the form. This attribute works with other input types like radio, checkbox, number, text, etc.
Syntax:
<input required>
Definition: The width attribute is used by the browser to determine the width of an element.
Syntax:
<input width="pixels">
Definition: The placeholder attribute specifies a hint that describes the expected value of an input field.
Syntax:
<input placeholder="HTML Cheat Sheet">
Definition: The pattern attribute of the <input> element specifies a regular expression against which the input field's value is checked during form submission.
Syntax:
<input pattern="regexp">
Definition: The min attribute sets the minimum value that is acceptable for user input in an <input> element.
Syntax:
<input min="number|date">
Definition: The max attribute sets the maximum value that is acceptable for user input in an <input> element.
Syntax:
<input max="number|date">
Definition: The autofocus attribute specifies that an <input> element should automatically receive focus when the page loads.
Syntax:
<input autofocus>
Definition: The disabled attribute can be set to prevent a user from using the <input> element until some other condition has been met (like selecting a checkbox, etc.).
Syntax:
<input disabled>
Definition: The <textarea> tag is often used in HTML forms to collect user inputs such as comments or reviews.
Syntax:
<textarea> ... </textarea>
Definition: The <select> tag in HTML specifies a drop-down list. The <select> tag contains <option> tags that represent the options of the drop-down list.
Syntax:
<select>
<option>
</option>
...
</select>
SELECT ATTRIBUTES
The "selected" attribute in HTML can be used to specify which option should appear by default when the page loads.
Definition: The name attribute of the <select> element specifies the name of a drop-down list.
Syntax:
<select name="HTML Cheat Sheet">
Definition: The size attribute of the drop-down list element specifies the number of visible options in a drop-down list.
Syntax:
<select size="number">
Definition: The multiple attribute is a boolean property that when present allows users to select multiple elements at once.
Syntax:
<select multiple>
Definition: The required boolean attribute specifies that the user must select a value before submitting the form.
Syntax:
<select required>
Definition: The autofocus attribute indicates that a drop-down list should automatically get focus when the page loads.
Syntax:
<select autofocus>
Definition: The <option> element defines an option in a select list. The <option> element goes inside a <select>, <optgroup>, or <datalist> element.
Syntax:
<option selected>value</option>
OPTION ATTRIBUTES
The value attribute specifies the data sent to the server when a form is submitted. The content between the opening and closing option tags determines what is displayed in the drop-down list.
Definition: The value attribute is used in an HTML <option> tag to define the value of an option element.
Syntax:
<option value = "value">
Definition: The selected option tag specifies whether an option should be pre-selected when the page loads.
Syntax:
<option selected>
Definition: The <button> HTML tag defines a clickable button. The <button> tag is also used to submit the form.
Syntax:
<button option = "button">
TABLES
HTML Tables organize data in a logical manner so the user can quickly interpret it. It enables web developers to allocate data into rows and columns and is widely used for research and data analysis purposes.
Definition: Specifies a HTML table.
Syntax:
<table>
<tr>
<th>Month</th>
<th>Spends</th>
</tr>
<tr>
<td>May</td>
<td>$150</td>
</tr>
</table>
Definition: Specifies a table caption.
Syntax:
<table>
<caption>Monthly Spends</caption>
<tr>
<th>Month</th>
<th>Spends</th>
</tr>
<tr>
<td>May</td>
<td>$150</td>
</tr>
</table>
Definition: Aggregate header content in an HTML table.
Syntax:
<table>
<thead>
<tr>
<th>Month</th>
<th>Spends</th>
</tr>
</thead>
<tbody>
<tr>
<td>May</td>
<td>$150</td>
</tr>
</tbody>
</table>
Definition: Aggregate header content in an HTML table.
Syntax:
<table>
<thead>
<tr>
<th>Month</th>
<th>Spends</th>
</tr>
</thead>
<tbody>
<tr>
<td>May</td>
<td>$150</td>
</tr>
</tbody>
</table>
Definition: In an HTML table, group footer content.
Syntax:
<table>
<thead>
<tr>
<th>Month</th>
<th>Spends</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</tfoot>
</tbody>
</table>
Definition: Specifies a row in an HTML table.
Syntax:
<table>
<tr>
<th>Month</th>
<th>Spends</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Definition: Creates a header cell inside an HTML table.
Syntax:
<table>
<tr>
<th>Month</th>
<th>Spends</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Definition: In an HTML table, define a standard data cell.
Syntax:
<table>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$250</td>
</tr>
</table>
Definition: In an HTML table, define a standard data cell.
Syntax:
<table>
<colgroup>
<col span="3" style="background-color:blue">
<col style="background-color:red">
</colgroup>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$250</td>
</tr>
</table>
Definition: Provides column attributes for each column inside a <colgroup> element.
Syntax:
<table>
<colgroup>
<col span="3" style="background-color:blue">
<col style="background-color:red">
</colgroup>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$250</td>
</tr>
</table>
OBJECTS AND iFRAMES
The iFrame tag is used in HTML to display content from other domains or subdomains, while the HTML Object tag can display audio, video, images, PDFs, and Flash on web pages.
Definition: Specifies a container for an external location.
Syntax:
<object data="img.jpg" width="350" height="210"></object>
Definition: Defines an inline frame.
Syntax:
<iframe src="https://www.lambdatest.com" title="LambdaTest - A Cross Browser Testing Cloud"></iframe>
Definition: Specifies parameter for an object.
Syntax:
<object data="air.wav">
<param name="autoplay" value="true">
</object>
Definition: Embeds external resources like images, videos, web pages, etc.
Syntax:
<embed type="image/jpg" src="image.jpg" width="350" height="200">
A number of new tags were added to HTML5 that are supported by all major browsers. The tags are associated with a variety of aspects, including graphics, media, and forms.
Definition: Specifies a header of the webpage.
Syntax:
<article>
<header>
<h1>Learning Hub</h1>
<param name="autoplay" value="true">
<p>HTML Cheat Sheet</p>
</header>
</article>
Definition: Specifies a footer of the webpage.
Syntax:
<footer>
<p>Author: Salman Khan</p>
<p><a href="mailto:salman@abc.com">salman@abc.com</a></p>
</footer>
Definition: Specifies the main content of the document.
Syntax:
<main>
<h1>Test Automation Framework</h1>
<p>Let's talk about Selenium</p>
<article>
<h2>Selenium</h2>
<p>Selenium is an open-source tool for web automation testing.</p>
</article>
</main>
Definition: Specifies the main content of the document.
Syntax:
<article>
<h2>Selenium</h2>
<p>Selenium is an open-source tool for web automation testing.</p>
</article>
Definition: Defining some content apart from its placement.
Syntax:
<aside>
<h4>Selenium</h4>
<p>Selenium is an open-source tool for web automation testing.</p>
</aside>
Definition:Describes a section in a document.
Syntax:
<section>
<h4>Selenium</h4>
</section>
Definition: Specifies additional information that the user might open and close as needed.
Syntax:
<details>
<p>Selenium is an open-source tool for web automation testing.</p>
</details>
Definition: Provides a viewable heading for the <details> element. One can click to see or hide the details.
Syntax:
<details>
<summary>Selenium</summary>
</details>
Definition: Creates a dialogue box or subwindow.
Syntax:
<dialog open>Learning Hub - HTML Cheat Sheet</dialog>
* This feature is not enabled by default, but it can be configured in about:config by enabling set dom.dialog.element.enabled to true.
Definition: Defines figures like illustrations, charts, images, code listings, etc.
Syntax:
<figure>
<img src="image1.jpg" alt="My_Page" style="width:100%">
</figure>
Definition: Defines a caption for figures.
Syntax:
<figure>
<figcaption>Fig.1 - My Page,Selenium.</figcaption>
</figure>
Definition: Defines a text to mark or highlight.
Syntax:
<p>Do not forget to <mark>subscribe</mark> our channel.</p>
Definition: Defines a collection of navigation links.
Syntax:
<nav>
<a href="/selenium">What is Selenium?</a> |
<a href="/cross-browser-testing">Cross Browser Testing</a> |
</nav>
Definition: Defines a numeric value or a fractional value within a known range.
Syntax:
<meter id="my_score" value="2" min="0" max="10">6 out of 10</meter>
Definition: Indicates a task's completion status.
Syntax:
<progress id="audio" value="52" max="100"> 52% </progress>
Definition: Put parenthesis around a ruby text to make it visible to browsers that don't support ruby annotations.
Syntax:
<ruby>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
Definition: East Asian typography character details are presented.
Syntax:
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
Definition: Defines a ruby annotation.
Syntax:
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
Definition: Specifies a certain time or datetime.
Syntax:
<p>Open from <time>11:00</time> to <time>19:00</time> all weekdays.</p>
Definition: Specifies a certain time or datetime.
Syntax:
<p>LambdaTest is a test execution platform where you can perform browser and app testing <wbr> across a wide range of real browsers and operating systems.</p>
COLLECTIVE CHARACTER OBJECTS
In HTML, character objects are used to display reserved characters.
Reviewer's Profile
Harshit Paul
Harshit is currently the Director of Product Marketing at LambdaTest. His professional experience spans over 7 years, with more than 5 years of experience with LambdaTest as a product specialist and 2 years at Wipro Technologies as a certified Salesforce developer. During his career, he has been actively contributing blogs, webinars as a subject expert around Selenium, browser compatibility, automation testing, DevOps, continuous testing, and more.