HTML Cheat Sheet: A Quick Reference Guide for HTML Developers
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.
<html> … </html>
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>
<html lang="en">
<head>
<title>...</title>
</head>
<body>...</body>
</html>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<head> … </head>
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>
<html lang="en">
<head>...</head>
</html>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<title> … </title>
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
Dive into Javascript for Automation Testing to enhance your testing skills!
<body> … </body>
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>
<html lang="en">
<head>
<title>Learning Hub</title>
</head>
<body>HTML Cheat Sheet</body>
</html>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported |
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.
<base/>
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/">
Attributes:
- href: Specifies the page’s base URL for all relative URLs.
- target: Specifies the page’s default target for all hyperlinks and forms.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<meta/>
Definition: Provides metadata (information about data) about a web page.
Syntax:
<meta charset="utf-8">
Attributes
- charset: Character encoding of the HTML document is specified here.
- content: This attribute specifies the value for the http-equiv or name attribute.
- http-equiv: Provides an HTTP header with the content attribute’s information and value.
- name: Provides the metadata with a name.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<link/>
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">
Attributes
- href: The location of the referenced document is specified.
- hreflang: The language of the text in the linked document is specified.
- media: The device on which the linked document will be shown is specified.
- rel: Required. The relationship between the current document and the linked document is specified here.
- sizes: The size of the referenced resource is specified here. Only applies to rel=”icon”.
- type: The media type of the referenced document is specified.
- referrerpolicy: When fetching the resource, this specifies which referrer to utilize.
- title: Sets the preferred or alternative stylesheet.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
Master Jenkins for Automation Testing with our comprehensive guide!
<style> … </style>
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>
Attributes
- media: The media resource is optimized for which media/device.
- type: The media type of the style tag is specified here.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<script> … </script>
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>
Attributes
- defer: The script is downloaded in parallel with the page parsing and executed once the page has completed parsing (only for external scripts)
- crossorigin: Sets the request’s mode to HTTP CORS Request.
- async: Specifies that the script is downloaded in parallel with the page processing and executed as soon as it is ready (before the parsing is finished) (only for external scripts).
- type: The script’s media type is specified here.
- src: The path to an external script file is specified.
- integrity: Allows a browser to inspect the retrieved script to ensure that it is never loaded if the source has been tampered with.
- nomodule: This directive specifies that the script should not be run in browsers that support ES2015 modules.
- referrepolicy: When fetching a script, specifies the referrer data to deliver.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
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.
<h1..h6> … </h1..h6>
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<div> … </div>
Definition: The <div> tag specifies a division or block in a web page.
Syntax:
<div>
<p>The division tag starts here!</p>
</div>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<span> … </span>
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
Explore the top Automation Testing Languages for 2020 and beyond!
<p> … </p>
Definition:
Specifies a paragraph. This tag contains plain text.
Syntax: <p>Learning Hub By LambdaTest</p>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<br/>
Definition: Appends a single line break for web pages.
Syntax:
<p>Learning Hub<br> On <br>HTML Cheat Sheet.</p>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<hr/>
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
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.
<strong> … </strong>
Definition: Bold the text to emphasize its importance.
Syntax:
<strong>HTML Cheat Sheet!</strong>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<b> … </b>
Definition: Specifies the text in bold.
Syntax:
<p>Learning Hub On <b>HTML Cheat Sheet!</b></p>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<em> … </em>
Definition: Specifies the emphasized text in italic.
Syntax:
<p>Learning Hub On <em>HTML Cheat Sheet!</em></p>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<i> … </i>
Definition: Specifies the text in italic.
Syntax:
<p>Learning Hub On <i>HTML Cheat Sheet!</i></p>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<cite> … </cite>
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
Leverage Flutter Automation Testing Tools for more efficient app development!
<del> … </del>
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>
Attributes:
- cite: Provides a link to a document that explains why the text was removed or altered.
- datetime: The date and time when the text was deleted or altered are specified.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<ins> … </ins>
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>
Attributes:
- cite: Provides a link to a document that describes why the text was added/changed.
- datetime: The date and time when the text was inserted/changed are specified.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<blockquote> … </blockquote>
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>
Attributes:
- cite: Indicates the quotation’s source.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<q> … </q>
Definition: Specifies a brief quotation.
Syntax:
<p>LambdaTest mission is to:
<q>Bring the entire testing ecosystem at one platform.</p>
Attributes:
- cite: The quote’s source URL is specified.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<abbr> … </abbr>
Definition: Defines a shorthand or acronym.
Syntax:
The <abbr title="JavaScript">JS</abbr> first appeared in 1995.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<address> … </address>
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<dfn> … </dfn>
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<code> … </code>
Definition: Defines code snippets within a paragraph.
Syntax:
<p>
The <code>background-color</code> specifies the background color of an element.
</p>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<sub> … </sub>
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<sup> … </sup>
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<small> … </small>
Definition: Specifies a smaller text
Syntax:
<p>
<small>Cross Browser Testing Cloud Built With Love For Testers</small>
</p>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
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.
<a href =””> … </a>
Definition: Provides a hyperlink, which is used to connect two pages.
Syntax:
<a href="https://www.lambdatest.com">Visit LambdaTest!</a>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<a href =”mailto:”> … </a>
Definition: Specifies a hyperlink for linking to an email address.
Syntax:
<a href="mailto:abc@example.com">Send</a>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<a href =”tel://###-###”> … </a>
Definition: Specifies a hyperlink for linking to a phone number.
Syntax:
<a href="tel:+433377901">433377901</a>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<a href =”#section3”> … </a>
Definition: Specifies a hyperlink for quick navigation to other sections of a page.
Syntax:
<a href="#section3">Go to Section 3</a>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
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.
<img/>
Definition: Inserts an image on a web page.
Syntax:
<img src="logo1.jpg" alt="test_now" width="500" height="600">
Attributes:
- Alt: Provides an image with an alternative text.
- src: The path to the image is specified.
- height: The height of an image is specified.
- ismap: Assigns an image to be used as a server-side image map.
- usemap: Assigns a picture to be used as a client-side image map.
- width: The width of an image is specified.
- crossorigin: Allow images from third-party sites to be utilized with canvas if they allow cross-origin access.
- loading: Specifies whether an image should be loaded instantly or deferred until certain conditions are met by the browser.
- longdesc: Provides a link to an image’s detailed description.
- referrerpolicy: When fetching an image, specifies which referrer data to utilize.
- sizes: Sets picture sizes for various page layouts.
- srcset: Provides a selection of picture files to use in various scenarios.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
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.
<ol> … </ol>
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>
Attributes:
- reversed: The list order should be reversed to 9,7,8…
- start: This attribute is used to define the starting value of an ordered list.
- type: This attribute indicates the type of marker to use in the list.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
Boost your testing with the best Automation Testing Java frameworks!
<ul> … </ul>
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<li> … </li>
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>
Attributes:
- value: The list begins with the number specified by ol and continues with the succeeding numbers in the sequence.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<dl> … </dl>
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<dt> … </dt>
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<dd> … </dd>
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
FORMS
HTML forms on web pages enable users to enter data sent by the browser to a server for processing.
<form>….</form>
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>
Attributes:
- accept-charset: Specifies the character encodings used for the form submission.
- action: The action attribute specifies where to redirect a document upon form submission.
- autocomplete: The autocomplete attribute determines whether a text field should have autocomplete on or off.
- enctype: Specifies whether the form-data should be encoded when submitting it to the server (for a post request).
- method: This option specifies the HTTP method to use when sending form-data.
- name: This attribute specifies the name of a form.
- novalidate: Specifies that the form’s contents should not be validated when submitted.
- rel: The rel attribute is used to specify the relationship between a linked resource and the current document.
- target: Display the response received after submitting the form.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
action=”url
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">
Browser Compatibility: Chrome Supported | Edge supported | Firefox Supported | Safari Supported | Opera Supported
method=””
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">
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
enctype=””
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">
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
Autocomplete
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">
Browser Compatibility: Chrome 17.0 | Edge 6.0 | Firefox 2.0 | Safari 5.1 | Opera 10.0
Novalidate
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>">
Browser Compatibility: Chrome Supported | Edge 10.0 | Firefox 4.0 | Safari 10.1 | Opera 15.0
Accept-charsets
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">
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
Target
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">
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<fieldset> … </fieldset>
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>
Attributes:
- disabled: Disables the group of related form elements.
- form: Here you specify which form the fieldset belongs to.
- name: Gives a name to the fieldset.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<label> … </label>
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>
Attributes:
- for: Forces the label to be bound to the specified id of the form element.
- form: This attributes specifies which form the label belongs to.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<legend>….</legend>
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<input />
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" .... />
Attributes:
- accept: Indicates which file types the user can pick from the file input dialog box (only for type=”file”) .
- alt: Provides an alternate text for images (only for type=”image”).
- autocomplete: Gives an input element the autocomplete attribute to enable or disable this feature.
- autofocused: When the page loads, ensure that the input element gets focused.
- checked: Specifies that a checkbox or radio button should be pre-selected when a page loads (for type=”checkbox” or type=”radio”).
- dirname: Submitting text in a particular direction.
- disabled: Disables an input element.
- form: Specifies the form that an input element must belong to.
- formaccess: Processes the data from the form when it is submitted (for type=”submit” and type=”image”).
- formenctype: Specifies the encoding of data for a form that uses a submit button or an image.
- formmethod: The HTTP method used to send data to the action URL is POST.
- formnovalidate: Form elements should not be validated when a form is submitted.
- formtarget: For type=”submit”, specifies where to send the data when the user clicks the submit button.
- height: Specifies the height, in pixels, of an image that is rendered as an input element.
- lists: Selects one or more datalist elements that contain predefined options for an input element
- max: The max attribute sets the upper limit for the value of an input element.
- maxlength: The input element specifies the maximum number of characters allowed in a text box.
- min: The min attribute sets the lower limit for the value of an input element.
- minlength: Specifies a minimum of one character in the input element.
- multiple: Users can enter multiple values in an input element.
- name: Specifies the name of an input element.
- pattern: Specifies a regular expression that an input element’s value is checked against to verify that it conforms to the format.
- placeholder: A hint that describes the expected value of an input element.
- readonly: This input field is read-only and cannot be edited.
- required: All fields must be filled out before submitting the form.
- size: The width attribute sets the width of an input element.
- src: Specifies the URL of an image to use as a submit button
- step: Specifies the default number of units between legal numbers in an input field.
- type: Indicates the type of form element to display.
- value: Specify the value of an input element to limit the range of inputs.
- width: Specifies the width of an input element for images.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
INPUT TYPE ATTRIBUTES
The HTML input type attribute specifies the type of input element to display. The default type is text.
type=””
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">
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
name=””
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">
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
Optimize your mobile app testing with Device Clouds for Mobile App Testing solutions!
value=””
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">
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
size=””
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">
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
maxlength=””
Definition: The maxlength attribute of the <input> element specifies the maximum number of characters entered into an <input> element.
Syntax:
<input maxlength="number">
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
Required
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>
Browser Compatibility: Chrome 5.0 | Edge 10.0 | Firefox 4.0 | Safari 10.1 | Opera 9.6
width=””
Definition: The width attribute is used by the browser to determine the width of an element.
Syntax:
<input width="pixels">
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
placeholder=””
Definition: The placeholder attribute specifies a hint that describes the expected value of an input field.
Syntax:
<input placeholder="HTML Cheat Sheet">
Browser Compatibility: Chrome 10.0 | Edge 10.0 | Firefox 4.0 | Safari 5.0 | Opera 11.0
pattern=””
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">
Browser Compatibility: Chrome 5.0 | Edge 10.0 | Firefox 4.0 | Safari 10.1 | Opera 9.6
min=””
Definition: The min attribute sets the minimum value that is acceptable for user input in an <input> element.
Syntax:
<input min="number|date">
Browser Compatibility: Chrome 5.0 | Edge 10.0 | Firefox 16.0 | Safari 5.1 | Opera 10.6
max=””
Definition: The max attribute sets the maximum value that is acceptable for user input in an <input> element.
Syntax:
<input max="number|date">
Browser Compatibility: Chrome 5.0 | Edge 10.0 | Firefox 16.0 | Safari 5.1 | Opera 10.6
Autofocus
Definition: The autofocus attribute specifies that an <input> element should automatically receive focus when the page loads.
Syntax:
<input autofocus>
Browser Compatibility: Chrome 5.0 | Edge 11.0 | Firefox 4.0 | Safari 5.0 | Opera 9.6
Disabled
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<textarea> … </textarea>
Definition: The <textarea> tag is often used in HTML forms to collect user inputs such as comments or reviews.
Syntax:
<textarea> ... </textarea>
Attributes:
- autofocus: The text area should get focus when the page loads.
- cols: Specifies the visible width of a text area in pixels.
- dirname: The text direction of the text area will be submitted.
- disabled: Disables the text area.
- form: The text area belongs to the form called Textarea.
- maxlenght: Sets an upper limit to the maximum length of the characters.
- name: Gives a name to the text area.
- placeholder: Specifies a hint that summarizes the expected value of a given text area.
- readonly: The text area should be read-only and cannot be edited.
- required: The text area is required.
- rows: Specifies the number of visible lines in a text area.
- wrap: Specifies how the text in a text area is to be displayed when submitted in a form.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<select> … </select>
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>
Attributes:
- autofocused: When the page loads, the drop-down list will automatically get focus.
- disabled: Drop-down lists should be disabled.
- form: Determines the form in which an item appears in a drop-down list.
- multiple: Multiple options can be selected at the same time.
- name: Creates a variable name for the drop-down list.
- required: The user is required to enter a value before submitting the form.
- size: Lists the number of visible drop-down list options.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
SELECT ATTRIBUTES
The “selected” attribute in HTML can be used to specify which option should appear by default when the page loads.
name=””
Definition: The name attribute of the <select> element specifies the name of a drop-down list.
Syntax:
<select name="HTML Cheat Sheet">
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
size=””
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">
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
Multiple
Definition: The multiple attribute is a boolean property that when present allows users to select multiple elements at once.
Syntax:
<select multiple>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
Required
Definition: The required boolean attribute specifies that the user must select a value before submitting the form.
Syntax:
<select required>
Attributes:
- normal: Displays a normal font style
- italic: Displays an italic font style
- oblique: Displays an oblique font style
Browser Compatibility: Chrome Supported | Edge 10.0 | Firefox 4.0 | Safari Supported | Opera Supported
Autofocus
Definition: The autofocus attribute indicates that a drop-down list should automatically get focus when the page loads.
Syntax:
<select autofocus>
Browser Compatibility: Chrome Supported | Edge 10.0 | Firefox Not Supported | Safari Supported | Opera Supported
<option> … </option>
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>
Attributes:
- disabled: Disables the given option.
- label: Defines the short label option.
- selected: Enables the selection of an option from a drop-down list when the page loads.
- value: Sets the value to be sent to a server.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
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.
value=””
Definition: The value attribute is used in an HTML <option> tag to define the value of an option element.
Syntax:
<option value = "value">
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
Selected
Definition: The selected option tag specifies whether an option should be pre-selected when the page loads.
Syntax:
<option selected>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<button> … </button>
Definition: The <button> HTML tag defines a clickable button. The <button> tag is also used to submit the form.
Syntax:
<button option = "button">
Attributes:
- autofocus: When the page loads, a button should automatically get focus.
- disabled: Disables the given button.
- form: Specifies the form of a button, which will accept user input.
- formaction: The action attribute specifies where to send the form-data once a form is submitted.
- dformenctype: This attribute instructs servers on how to encode form-data prior to processing it.
- formmethod: Sends the form-data using the specified HTTP method.
- formnovalidate: This form-data shouldn’t be validated on submission. It is only for the type=”submit” button.
- formtarget: Specifies where the response is to be displayed once the form is submitted.
- name: Defines a name for the button.
- type: This defines the type of button to use.
- value: Sets the initial value of the button.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
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.
<table>
Definition: Specifies a HTML table.
Syntax:
<table>
<tr>
<th>Month</th>
<th>Spends</th>
</tr>
<tr>
<td>May</td>
<td>$150</td>
</tr>
</table>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<caption>
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<thead>
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<tbody>
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<tfoot>
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<tr>
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>
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<th>
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>
Attributes:
- abbr: In a header cell, specifies an abbreviated version of the text.
- colspan: Determines how many columns a header cell should span.
- headers: A cell’s relationship to one or more header cells is specified.
- rowspan: Determines how many rows a header cell should span.
- scope: The header cell determines if it is a set of rows and columns or a header for a column or a row.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<td>
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>
Attributes:
- colspan: The amount of columns that a cell should span.
- headers: A cell’s relationship to one or more header cells is specified.
- rowspan: The number of rows that a cell should span is specified.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<colgroup>
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>
Attributes:
- span: The number of columns a column group should span is specified here.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<col>
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>
Attributes:
- span: The number of columns an col element should span is specified here.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
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.
<object>
Definition: Specifies a container for an external location.
Syntax:
<object data="img.jpg" width="350" height="210"></object>
Attributes:
- data: The URL of the resource that the object will utilize is specified.
- form: Specifies the form to which the object belongs.
- height: The object’s height is specified.
- name: Provides the object with a name.
- type: The data attribute specifies the media type of the data.
- typemustmatch: Indicates if the type attribute and the resource’s actual content must match in order for it to be shown.
- usemap: The name of the client-side image map that will be used with the object.
- width: Specifies the object’s width.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<iframe>
Definition: Defines an inline frame.
Syntax:
<iframe src="https://www.lambdatest.com" title="LambdaTest - A Cross Browser Testing Cloud"></iframe>
Attributes:
- allow: Feature policy for the iframe is specified.
- allowfullscreen: If the iframe may activate fullscreen mode by calling the requestFullscreen(), set this property to true.
- allowpaymentrequest: If true, a cross-origin iframe should be permitted to use the Payment Request API.
- height: The height of an iframe is specified here. 150 pixels is the default height.
- loading: Specifies whether an iframe should be loaded immediately or if it should be deferred until certain criteria are met.
- name: The name of an iframe is specified here.
- referrerpolicy: When fetching the iframe, specifies the referrer information to deliver.
- sandbox: Sets additional constraints for the content in an iframe.
- src: The URL of the document to be embedded in the iframe.
- srcdoc: The HTML content of the page to be displayed in the iframe.
- width: The width of an iframe is specified here. 300 pixels is the default width.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<param>
Definition: Specifies parameter for an object.
Syntax:
<object data="air.wav">
<param name="autoplay" value="true">
</object>
Attributes:
- name: Defines the parameter’s name.
- value: Defines the parameter’s value.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
<embed>
Definition: Embeds external resources like images, videos, web pages, etc.
Syntax:
<embed type="image/jpg" src="image.jpg" width="350" height="200">
Attributes:
- height: Specifies the height of the embedded element.
- width: Specifies the height of the embedded element.
- type: Type or format of the embedded element.
- src: Path or the URL of the embedded element.
Browser Compatibility: Chrome Supported | Edge Supported | Firefox Supported | Safari Supported | Opera Supported
HTML5 NEW TAGS
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.
<header>
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>
Browser Compatibility: Chrome 5.0 | Edge 9.0 | Firefox 4.0 | Safari 5.0 | Opera 11.1
<footer>
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>
Browser Compatibility: Chrome 5.0 | Edge 9.0 | Firefox 4.0 | Safari 5.0 | Opera 11.1
<main>
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>
Browser Compatibility: Chrome 26.0 | Edge 12.0 | Firefox 21.0 | Safari 7.0 | Opera 16.0
<article>
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>
Browser Compatibility: Chrome 6.0 | Edge 9.0 | Firefox 4.0 | Safari 5.0 | Opera 11.1
<aside>
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>
Browser Compatibility: Chrome 6.0 | Edge 9.0 | Firefox 4.0 | Safari 5.0 | Opera 11.1
<section>
Definition:Describes a section in a document.
Syntax:
<section>
<h4>Selenium</h4>
</section>
Browser Compatibility: Chrome 6.0 | Edge 9.0 | Firefox 4.0 | Safari 5.0 | Opera 11.1
<details>
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>
Attributes:
- open: Defines that the details should be viewable (accessible) to the user.
Browser Compatibility: Chrome 12.0 | Edge 79.0 | Firefox 49.0 | Safari 6.0 | Opera 15.0
<summary>
Definition: Provides a viewable heading for the <details> element. One can click to see or hide the details.
Syntax:
<details>
<summary>Selenium</summary>
</details>
Browser Compatibility: Chrome 12.0 | Edge 79.0 | Firefox 49.0 | Safari 6.0 | Opera 15.0
<dialog>
Definition: Creates a dialogue box or subwindow.
Syntax:
<dialog open>Learning Hub - HTML Cheat Sheet</dialog>
Attributes:
- open: Defines an active dialog box to interact with it.
Browser Compatibility: Chrome 37.0 | Edge 79.0 | Firefox 53.0* | Safari Not Supported | Opera 24.0
* This feature is not enabled by default, but it can be configured in about:config by enabling set dom.dialog.element.enabled to true.
<figure>
Definition: Defines figures like illustrations, charts, images, code listings, etc.
Syntax:
<figure>
<img src="image1.jpg" alt="My_Page" style="width:100%">
</figure>
Browser Compatibility: Chrome 8.0 | Edge 9.0 | Firefox 4.0 | Safari 5.1 | Opera 11.0
<figcaption>
Definition: Defines a caption for figures.
Syntax:
<figure>
<figcaption>Fig.1 - My Page,Selenium.</figcaption>
</figure>
Browser Compatibility: Chrome 8.0 | Edge 9.0 | Firefox 4.0 | Safari 5.1 | Opera 11.0
<mark>
Definition: Defines a text to mark or highlight.
Syntax:
<p>Do not forget to <mark>subscribe</mark> our channel.</p>
Browser Compatibility: Chrome 8.0 | Edge 9.0 | Firefox 4.0 | Safari 5.0 | Opera 11.0
<nav>
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>
Browser Compatibility: Chrome 8.0 | Edge 9.0 | Firefox 4.0 | Safari 5.0 | Opera 11.0
<meter>
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>
Attributes:
- form: Specifies the format to which the meter element corresponds.
- high: Specifies the value range that is considered to be high.
- low: Specifies the value range that is considered to be a low
- max: Specifies the range’s maximum value.
- min: Specifies the range’s minimum value. The default value is zero.
- optimum: Specifies what value is the best for the gauge.
- value: Specifies the gauge’s current value.
Browser Compatibility: Chrome 8.0 | Edge 13.0 | Firefox 16.0 | Safari 6.0 | Opera 11.5
<progress>
Definition: Indicates a task’s completion status.
Syntax:
<progress id="audio" value="52" max="100"> 52% </progress>
Attributes:
- max: Specifies the range’s maximum value.
- value: Specifies the range’s minimum value. The default value is zero.
Browser Compatibility: Chrome 8.0 | Edge 10.0 | Firefox 16.0 | Safari 6.0 | Opera 11.5
<rp>
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>
Browser Compatibility: Chrome 5.0 | Edge 5.5 | Firefox 38.0 | Safari 5.0 | Opera 15.0
<rt>
Definition: East Asian typography character details are presented.
Syntax:
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
Browser Compatibility: Chrome 5.0 | Edge 5.5 | Firefox 38.0 | Safari 5.0 | Opera 15.0
<ruby>
Definition: Defines a ruby annotation.
Syntax:
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
Browser Compatibility: Chrome 5.0 | Edge 5.5 | Firefox 38.0 | Safari 5.0 | Opera 15.0
<time>
Definition: Specifies a certain time or datetime.
Syntax:
<p>Open from <time>11:00</time> to <time>19:00</time> all weekdays.</p>
Browser Compatibility: Chrome 62.0 | Edge 18.0 | Firefox 22.0 | Safari 7.0 | Opera 49.0
<wbr>
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>
Browser Compatibility: Chrome 1.0 | Edge 12.0 | Firefox 3.0 | Safari 4.0 | Opera 11.7
COLLECTIVE CHARACTER OBJECTS
In HTML, character objects are used to display reserved characters.