Cheatsheet Template

HTML Boilerplate

A boilerplate in HTML is a template you will add at the start of your project. You should add this boilerplate to all of your HTML pages.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Doctype in HTML
The first line in your HTML code should be the doctype declaration. A doctype tells the browser what version of HTML the page is written in.
```
<!DOCTYPE html>
                
```
HTML root element
The <html> tag is the top level element of the HTML file. You will nest the <head> and <body> tags inside of it.
```
<!DOCTYPE html>
<html lang="en">
    <head></head>
    <body></body>
</html>
            
```

HTML Heading tag

There are six headings available in HTML.<h1> is largest and <h6> is smallest.

<!DOCTYPE html>
<html>
    <head>
        <title>Heading Tags</title>
    </head>
    <body>
        <h1>Your Heading</h1>
        <h2>Your Heading</h2>
        <h3>Your Heading</h3>
        <h4>Your Heading</h4>
        <h5>Your Heading</h5>
        <h6>Your Heading</h6>
    </body>
</html>

Container

The container tags are tags that have some data such as text, the image between their opening and closing tags. There are several container tags in HTML.

<div>… </div>
The <div> tag is a block element. It defines a division or a section in HTML document. Any sort of content can be put inside the <div> tag.

<span>… </span>
The <span> tag is an inline element. It is used to mark up a part of a text, or a part of a document.

<p>… </p>
The <p> tag represents a paragraph. HTML paragraphs can be any structural grouping of related content, such as images or form fields.

<pre>… </pre>
The <pre> tag represents pre-formatted text which is to be presented exactly as written in the HTML file. . It preserves the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers.

<code>… </code>
The <code> tag is used to represent source codes. It is mainly used to display the code snippet into the web browser.

Document Information

This section involves tags which are used to describe the HTML document by giving an overview of what it includes.

<head>… </head>
The <head> element is a container for metadata which is data about data. It is the first section in the code containing information about a web page’s properties and links to external related files

<link>… </link>
The <link> tag is an empty element, it defines the relationship between the current document and an external resource. The <link> tag is most often used to link to external style sheets on your website.

<meta>… </meta>
The <meta> tag defines metadata about an HTML document. It is typically used to specify the character set, page description, keywords, author of the document, and viewport settings.

<title>… </title>
The <title> HTML element defines the document’s title that is shown in a browser’s title bar or a page’s tab.

<style>… </style>
The <style> tag is used to define style information (CSS) for a document. It is used to specify how HTML elements should render in a browser.

Document Information

This section involves tags which are used to describe the HTML document by giving an overview of what it includes.

<header>… </header>
The <header> HTML5 element is used to give introductory content about the document. It may contain some heading elements and also a logo, a search form, an author name, and other elements.

<main>… </main>
The <main> HTML element represents the main dominant content of the <body> of a document. The main content area consists of content that expands upon the central topic of a document, or the main functionality of an application.

<section>… </section>
The HTML5 <section> element represents a standalone section. It is a structural HTML element used to group together related elements. Each <section> typically includes one or more heading elements and additional elements presenting related content.

<nav>… </nav>
The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents

<article>… </article>
The HTML5 <article> element represents a self-contained composition in a document, page, application, or site, which is independently distributable or reusable.

<aside>… </aside>
The <aside> tag defines some content aside from the content it is placed in. Its content should be indirectly related to the surrounding content. The <aside> content is ,most often placed as a sidebar in a document.

<footer>… </footer>
The <footer> HTML element represents a footer for its sectioning root element. It typically contains information about the author of the section, copyright data or links to related documents.

<address>… </address>
The HTML <address> element indicates that the enclosed HTML provides contact information for a person or people, or for an organization. It must not contain information other than contact information.

Document Information

This section involves tags which are used to describe the HTML document by giving an overview of what it includes.

<b>… </b>
The <b> tag is used to make the text enclosed within these tags bold.

<i>… </i>
The <i> tag is used to make the style text enclosed within these tags italics.

<em>… </em>
The <em> tag is used to put stress on some text or show some degree of emphasis. The  element can be nested as well, where each level of nesting indicates a greater degree of emphasis.

<strong>… </strong>
The <strong> tag is used to indicate that content enclosed within these tags has strong importance or urgency. Typically, browsers render their content in bold.

<sub>… </sub>
The <sub> tag is used when we need to write the text as subscript.

<sup>… </sup>
The <sup> tag is used when we need to write the text as superscript.

<abbr>… </abbr>
The <abbr> element is used to represent an abbreviation or acronym. The optional title attribute can be used to add description of the abbreviation.

<mark>… </mark>
The <mark> tag is used to mark or highlight important text for reference or notation purposes.

<cite>… </cite>
The <cite> element is used to describe the title of a creative work (For ex. a book, a paper, an essay, a poem, a song, a painting etc. )

<time>… </time>
The <time> element is used to represent a specific period of time.

Lists
Lists can be either numerical, alphabetic, bullet, or other symbols. You can specify list type and list items in HTML for the clean document. There are three list types in HTML Ordered list, Unordered list and description list.

<ul>… </ul>
The HTML <ul> element represents an unordered list of items. It is typically rendered as a bulleted list.

<ol>… </ol>
The HTML <ol> element represents an ordered list of items. It is typically rendered as a numbered list.

<li>… </li>
The HTML <li> element is used to represent an item in a list.

<dl>… </dl>
The HTML <dl> element represents a description list. The element encloses a list of groups of terms (specified using the
element) and descriptions.

<dd>… </dd>
The HTML <dd> tag is used in conjunction with <dl> to describe a term/name in a description list.

<dt>… </dt>
The HTML <dt> element is used in conjunction with <dl> to specifies a term in a description or definition list.

Tables
A HTML table is used to arrange data in tabular form into rows and columns.

<Caption>… </Caption>
The HTML Table Caption element specifies the title or caption of a table.

<table>… </table>
The HTML <table> element represents data in a two-dimensional table comprised of rows and columns.

<thread>… </thread>
The HTML <thread> element is used to group header content in an HTML table. (used in conjunction with the and element)

<tbody>… </tbody>
The HTML <tbody> element is used to group primary content of an HTML table.

<th>… </th>
The HTML <th> element is used to define a cell as header of a group of cells of the HTML table.

<td>… </td>
The HTML <td> element defines a cell of a table that contains the main data of the table.

<tr>… </tr>
The HTML <tr> tag defines a row in an HTML table. A <tr> element contains one or more <th> or <td> elements

<tfoot>… </tfoot>
The HTML <tfoot> element defines a set of rows summarizing the columns of the table as per requirement.

Forms
An HTML form is a section of a document that acts as a container for different types of input elements, such as text fields, passwords, menus, checkboxes, radio buttons, submit buttons, etc.

<form>… </form>
The <form> HTML element represents a document section containing interactive controls for submitting information.

<input>… </input>
The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user.

<textarea>… </textarea>
The <textarea> HTML element is used to create a multi-line plain-text editing control, often used in a form, to collect user inputs like comments or reviews.

<select>… </select>
The HTML <select> element represents a control that provides a menu of options to select from.

<option>… </option>
The <option> tag is used to define an option in a select list. The <option> elements go inside a <select>, <optgroup>, or <datalist> elements.

<optgroup>… </optgroup>
The HTML <optgroup> element is used to create a grouping of options within a <select> element.

<progress>… </progress>
The HTML <progress> element displays an indicator showing the degree of completion of a task, typically displayed in the form of a progress bar.

<datalist>… </datalist>
The HTML <datalist> element is used to give a predefined options for an <input> element. It adds an autocomplete feature to it.

<button>… </button>
The HTML <button> element represents a clickable button, which can be used in forms or anywhere a standard button functionality is needed in a document.

<label>… </label>
The <label> tag is used to specify a label or caption for an <input> element of a form.

Multimedia
Multimedia is anything you can hear or see in the form of images, videos, or sounds. It comes in various format.HTML helps you to add multimedia files to your website by providing various multimedia tags.

<img>… </img>
The HTML <img> tag is used to link images to web pages.

<audio>… </audio>
The HTML <audio> element is used to include sound content in documents. It may contain one or more audio sources.

<video>… </video>
The HTML <video> element embeds a media player which supports video files into the document.

<figure>… </figure>
The HTML <figure> tag is used to group or various diagrams, images, illustrations, and code snippets into the document.

<figcaption>… </figcaption>
The HTML <figcaption> tag is used inside the <figcaption> tag to provide the caption of the content.

<embed>… </embed>
The HTML <embed> tag helps embed multimedia in a Web page and play it while opening the page. It uses the three mandatory attributes, namely src, height, and width.

<object>… </object>
The HTML <object> tag is used to include objects, such as images, audios, videos, Java applets, ActiveX controls, Portable Document Format (PDF), and Flash objects, in a Web page.