You're online now.

Hurray! you are online now.

HTML CHEATSHEET

<html>...</html>

html tag is a root element. The tag shows up at the begining and end of HTML Document. It indicates that the webpage is written in HTML 5. and all other page markup comes in between these beginning and ending tags.

<head>...</head>

head tag is contains information that specific page, including the script file, style file and including the title tag and meta data and links also.

<title>...</title>

title tag is used for to show the title of our website for that pages and search engines.

<body>...</body>

Body will be contains the all content that will be show to user, including everything they'll see and read.

For Example:


    <html>
    <head>
    <title>Title Here</title>
    </head>
    <body>
    Body Content
    </body>
    </html>

Information Tags:

<base/>

The base URL (for example: www.xyz.com) is useful for specifying all relative links in a document (especially if you have many internal links.)

<meta/>

Meta data spells out additional information about the page, including the page's description, author, published date, keywords and other typically ‘hiddne’ pages information.

<link/>

Can be used to create relationships with external pages or documents, including style sheets.

<style>...</style>

style element includes documents style information, typically defaulting to CSS.

<script>...</script>

This element includes all scripting information, or this to external scripts. You can also include this element in the body to dynamically generate content.

Complete Example of HTML Structure


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <base href="https://www.xyzabc.com" target="_blank"/>
    <title>My first Website</title>
    <link rel="stylesheet" href="style.css">
    <script>
    let myVar = 19;
    </script>
    </head>
    <body>
    Body Content
    </body>
    </html>

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

All six level of Heading, with 1 begin the most important on a page and 6 begin the least. These element are used to describe content sections on a page.

<div>...</div>

A generic container used to denote a page section.

<span>...</span>

An inline section or block container, typically used for grouping styling elements.

<p>...</p>

This foundational tag is used to organize paragraphs of text.

<br/>

Creates a line break to use this tag.

<hr/>

Creates a horizontal rule, a sectional break in an HTML page. Typically used to denote a charge in topic or section of a page.

Text Formatting

<strong>lapmos.com</strong>

Exactly like it sounds, indicating STRONG emphasis, displayed bold in most browsers.

<b>lapmos.com</b>

Another way to create bold test, however it's more for drawing attention as opposed to emphasizing extra emphasis like the previous tag.

<em>lapmos.com</em>

The emphasis tag also are like they sound, emphasizing text or phrases, display as italics in most browsers.

<i>lapmos.com</i>

Another way to add italics to test, however without the added emphasis and instead used to denote things like thought or names.

<tt>...</tt>

An older tag used to display fixed-width, typwriter-esque text. No longer supported in HTML 5.

<strike>...</strike>

This tag creates through test (or test with a line through it). Another Older tag not commonly supported.

<cite>...</cite>

cite tag used to cite or reference information, useful for quotes and statements in a document.

<pre>...</pre>

Pre-formatted, ‘monospace’ text laid out with whitespace inside the element intact.

<del>...</del>

Helps denote a previously deleted section of text.

<ins>...</ins>

Represents a section of text that's been inserted into the document.

<blockquote>...</blockquote>

Reserved for long paragraphs of quotations, often cited.

<q>...</q>

q tag is used for shorter quotations.

<abbr>...</abbr>

Abbreviation these help denote abbreviations, while also making the full form available.

<acronym>...</acronym>

Acronym text similar to the previous abbreviation tag, but this time with acronyms. Not support in HTML 5.

<address>...</address>

A helpfully obvious tag that displays the author's contact information.

<dfn>...</dfn>

Definition used to create an inline definition in the body text.

<code>...</code>

Code text displays code snippets (like the one over to the left), typically showing up monospaced.

<font>...</font>

Font tag old-school way to color fonts. No longer part to HTML 5.

<sub>...</sub>

Subscript text similar to the previous subscript, however this time placing it a half line lower than the previous text.

<sup>...</sup>

Superscript text similar to the previous subscript, however this time placing it a half line higher than the previous text.

<small>...</small>

Small site text historically used to simple reduce text size, in HTML 5, it also refers to information that may no longer be valid, accurate or relevant.

<bdo>...</bdo>

The bi-directional override tag will identify which should text should be read opposite from the preceding text.

Links Formatting

<a href="">...</a>

Anchor text for hyperlink.

<a href="mailto:">...</a>

A link used to pull up an outgoing message to specific email address.

<a href="tel://###-###">...</a>

A link to make phone number, clickable, especially useful for mobile users.

<a name="name">...</a>

An anchor that's used for bringing users to specific document elements.

<a href="#name">...</a>

An anchor link that brings user specifically to a div element.

Image Formatting

<img src="image_url" width="" height="" alt="">

An image tag to include and display image files.

src="image_url": Exactly like it sounds. The URL or file or the image to display.

alt="alternative_text": Alternative text that helps explain the image content to both search engines and user.

width="": The ability to specify image width in pixels or percentages.

height="": The ability to specify image height in pixels or percentages.

<map>...</map>

Helps you tell users that this is an interactive image with clickable areas.

<area/>

Specify the are of image map.

List Formatting

<ol>...</ol>

Create numbered (ordered) lists showing sequential order, preference or priority.

<ul>...</ul>

Display a bulleted (unordered) list without any extra emphasis or order of importance.

<li>...</li>

Specifies each list item to be bulleted or numbered.

<dl>...</dl>

Reserved specifically for list items definitions.

<dt>...</dt>

The definition of a single term inline with body content.

<dd>...</dd>

The description for defined term.

List Example

<!-- Unorderd List -->
    <ul>
    <li>Milk</li>
    <li>Suger</li>
    <li>Maggi</li>
    </ul>
    
    <!-- Ordered List -->
    <ol>
    <li>Sunday</li>
    <li>Monday</li>
    <li>Tuesday</li>
    </ol>
    
    
    <dl>
    <dt>Coffee</dt>
    <dd>Black and Cold Coffee</dd>
    <dt>Milk</dt>
    <dd>White and Cold drinks</dd>
    </dl>

Forms Formatting

<form>...</form>

The form element creates a form, spelling out how the form will operate based on it's attributes.

  • action="url": The form action URL specifies where data is to be sent when a site visitor submits the form.
  • method="": The method attribute refers to the HTTP method (GET, POST), which indicates how to send the form data.
  • enctype="": This attribute indicates how the form-data is to be encoded when submitting information back to the web server (for method="POST" only).
  • autocomplete: Whether a form shoud have autocomplete on or off.
  • novalidate: Whether the form should not be validated when submitted.
  • accept-charsets: Identifies the character encodings upon the form submission.
  • target: Tells where to display the form response after being submitted, generally one of the following _blank, _self, _parent, _top.
<fieldset>...</fieldset>

Identifies the group of all fields on the form.

<legend>...</legend>

The form legend acts as a caption for the fieldset element.

<input/>

The form input tag defines the type of field information to recieve from a user.  there are various attribute used.

  • type="": Specifies the field input, typically including text, password, date-time, checkbox, submit etc.
  • name="": Describe the name of the form.
  • value="": Describe the value or input field information.
  • size="": Specifies the input element width in characters.
  • maxlength="": Identifies the maximum input element character number allowed.
  • required: Another helpfully explicit tag, making sure the <input> element is completely filled our prior to the user submitting the form.
  • step="": Identifies the legal number intervals for an input field.
  • width="": Specifies the width (in pixels) of an <input> element.
  • height="": Specifies the height of an <input> element.
  • placeholder="": Provides a helpful hind to the user, describing what the <input> element value should be.
  • pattern="": Identifies a regular expression that the <input> element gets checked against, making sure the user entered the correct information.
  • min="": The minimum value allowed for each <input> element.
  • max="": The maximum value allowed for each <input> element.
  • autofocus: Says to make sure that the <input> element comes into focus after the page loads.
  • disabled: Disables an <input> element on the form.
<textarea>...</textarea>

Specifies a large text input form longer message.

<select>...</select>

Describe a drop-down box for user's to select one from a variety of options. There are used various attributes.

  • name="": The name for a drop down combination box.
  • size="": Specifies the number of available, visible options in a drop-down.
  • multiple: Allows for multiple selections to be make at one time.
  • required: Required that a value is selected before a user can submit a form.
  • autofocus: Specifies that a drop-down list automatically comes into focus after a page loads.
<optgroup>...</optgroup>

Specifies the entire grouping available options.

<option>...</option>

Defines one of the available options in the drop-down list.

  • values="": Explains the option value available for selection.
  • selected="": Defines the default selected option for users.
<button>...</button>

Defines the clickable button for users to submit options.

Form Example


    <form action="action.php" method="POST">
    <fieldset>
    <legend>Information</legend>
    First Name : <br>
    <input type="text" name="firstname" placeholder="First Name">
    Last Name : <br>
    <input type="text" name="secondname" placeholder="Last Name">
    Favorite car brand <br>
    <select name="car">
    <option value="volvo">volvo</option>
    <option value="BMW">BMW</option>
    <option value="Audi">Audi</option>
    <option value="Tesla">Tesla</option>
    </select>
    <textarea name="description"  cols="30" rows="10"></textarea>
    <input type="submit" value="submit">
    </fieldset>
    </form>

Table Formating

<table>...</table>

The table tag identifies and contains all table related content.

<caption>...</caption>

The caption is a description of what the table is, and what it contains.

<thead>...</thead>

The table headers describe the type of information contained in each column underneath.

<tbody>...</tbody>

The table body contains the table's data or information.

<tfoot>...</tfoot>

Table footer describe all footer content.

<tr>...</tr>

Contains the information to be included in a single row of the table.

<th>...</th>

Contains the actual information or data in a single header item.

<td>...</td>

Contains the actual information or data in a single table cell.

<colgroup>...</colgroup>

Groups a single (or multiple) columns for formatting purposes.

<col/>

Defines a single column of information inside a table.

For Example


    <table>
    <colgroup>
    <col span="2" style="background-color: #a1a5a7;">
    <col style="background-color: #becde7;">
    </colgroup>
    <tr>
    <th>S.NO.</th>
    <th>Name</th>
    <th>Age</th>
    </tr>
    <tr>
    <td>1</td>
    <td>John</td>
    <td>23</td>
    </tr>
    <tr>
    <td>2</td>
    <td>Micky</td>
    <td>20</td>
    </tr>
    </table>

Object and Iframe

<object>...</object>

The object tag describe an embedded file type, including, audio, video, PDFs, additional pages, and more.

  • height="": Describes the height of the object in pixels.
  • width="": Describe the width of the object in pixels.
  • type="": Describe which media type of the data contains.
  • usemap="": This is the name of a client side image map within <object>
<iframe>...</iframe>

Conatains an inline iframe that allows you to embed external information into an existing document.

  • name="": The name of the <iframe>.
  • src="": The URL source of the original document to embed inside the <iframe>
  • srcdoc="": The contains the acutal HTML content to display inside the <iframe> on the current page.
  • width="": Defines the width of your <iframe>
<param>...</param>

Appending extra parameters help you customize the iframe content.

<embed>...<embed>

The embed tag acts as a container for another external application or additional plug-in.

  • height="": Defines the height of the embedded content you're including.
  • width="": Similar to previous, but this time defining the width of the embedded content.
  • src="": The source URL of the external file you're embedding.
  • type="": Describe the media type of embedded content to include.

For Example


    <object width="400px" height="400px"></object>
    <iframe src="https://www.lapmos.com/" width="600px" height="400px" frameborder="0"></iframe>
    <embed src="https://www.lapmos.com/" >

HTML 5 NEW TAGS

<header>...</header>

Defined the header block for a document (or individual section).

<footer>...</footer>

Identifies the footer block for the document (or individual section).

<main>...</main>

Describe the main content of a document.

<article>...</article>

Identifies an article inside a document.

<aside>...<aside>

Specifies a section block in the document.

<details>...</details>

Describes additional facts or information that the user can view or hide.

<dialog>...</dialog>

A dialog box or window.

<figcaption>...</figcaption>

The <figure> element caption that helps describes the figure.

<figure>...</figure>

An independent content block featuring diagrams, photos, illustrations or more.

<mark>...</mark>

Displays a portion or highlighted text withing the page content.

<nav>...</nav>

Navigation links for the user in a document.

<menuitem>...</menuitem>

The specific menu item that a user can rais for a popupmenu.

<meter>...</meter>

Describes the scalar measurement within a known array.

<progress>...</progress>

Displays the progress of a task, usually used for progress bar.

<rp>...</rp>

Display text within browsers that do not support ruby annotations.

<rt>...</rt>

Display East Asian typography character details.

<ruby>...</ruby>

Describe a ruby annotation for East Asian typography.

<summary>...</summary>

Contains a visible heading for a <details> element.

<bdi>...</bdi>

Helps you format part or text in different direction from other text.

<time>...</time>

Identifies the time and date.

<wbr>

A line-break withing the content.

🖤 0
Buy me coffee ☕

Comments

Oops!

No comments here...