HTML Cheatsheet Introduction
HTML stands for HyperText Markup Language. This language consists of HyperText & Markup Language. HyperText defines the link between web pages while on the other hand markup language is used to define the text which is in the tag. Most mark-up languages are human-readable. The language uses tags to define what manipulation/changes have to be done on the document.
HTML Basic Structure:
The basic structure of HTML is given below. As you can see in the image below, it has
<DOCTYPE! Html>: This is not a tag but a document type declaration. This declares a document as a HTML document. Remember, its not case sensitive.
<HTML>: This is called HTML root element which contains all the elements.
<link>: Title is External source element that specifies the relationship b/w the current document and the external source. Most common use of link is ‘stylesheets’ and site icons like “favicons”.
<meta>: This represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style>, <title>.
<head >: Elements which you don’t see on the front-end web page is written here. HTML elements used inside the <head> element include:
- <style>
- <title>
- <base>
- <noscript>
- <noscript>
- <meta>
- <link>
<body >: Body tag stores everything you see on the browser will show. Let’s understand the previous concepts with the help of an example.
What’s the output?
Document Information:
<base>: Base tag is used to specify a base URL, or URL, for relative links. This URL will be the base URL for each link on the page and will be prefixed before each of them.
<style>: Base This element contains document’s styling information, like writing internal CSS.
<script >: Script contains all the scripting information, or it can also link to external scripts.
<script >: Link is used when we’ve build a link with external documents/pages. For example, linking CSS with HTML.
<h1, h2 h3, h4, h5, h6 >: Every level of heading, “h1” is the most important and biggest, while “h6” is the smallest.
<div>: Div is like a container or a portion of a page where we store content.
<p>: This tag is used to generate paragraph in your front-end.
<span>: Tag is an inline container used to mark up a part of a text, or a part of a document.
<br/>: It creates a line break, super useful when it comes to writing block of text which needs to be on a different lines. For example, Poems/Addresses.
<hr/>: Creates a horizontal line, or a sectional break in a HTML page. It is super useful when it comes to denoting the new topic.
Text Formatting:
<strong><strong/>
It is self-explanatory. It makes the font bolder.
<b><b/>
Another way to write bold text. The main difference between b and strong is that b is just to make the text bolder while strong is used when we want to show that something is important.
<q ><q/>
They are used to write Quotations.
<em><em/>
To make the text italic.
<i ><i/>
To make the text italic. The difference between em and i is that em is used to denote something important, while i is generally used to make the text italic.
<blockquotes><blockquotes/>
Reserved for long paragraph of quotation.
<abbr><abbr/>
Abbreviation (abbr) tag is used to define the full form of an element.
Links:
<a href=""> … <a>
Anchor text for hyperlink.
<a href="mailto:"> … <a>
This will link to an email.
<a href="tell:"> … <a>
This will link to an phone number.
<a href="mailto:"> … <a>
This will link to an email.
Image and Multimedia Formatting:
<img>
Img tag is used to display and show the image.
<url> … <url/>
URL of file/image to display, just like it sounds.
<audio> … </audio>
This is used to embed sound files in a document.
<video> … </video >
This tag embeds media player which supports video play back in
<img alt="text” />
Alternative text just like it sounds. When the image is not loading due to any reason, the text will appear.
<img height=“10” />
Specify image height.
<img width=“10” />
Specify image width.
List Formatting:
<ul> … <ul/>
Display a bullet unordered list without any extra emphasis on order of importance.
<li> … <li/>
Species each list item to be bulleted or numbered.
<ol> … <ol/>
Create numbered ordered list showing sequential order/priority.
Forms:
<form> … <form/>
The form element create a form, defining how the form will operate based on it’s attributes.
<form action="url”>
Species where the data will be sent, when the user clicks on submit button.
<field>…<field/>
Identifies the group of all fields, on the form.
<label>…<label/>
A simple field label, which will tell the user what to enter in each field.
<input />
This defines the type of field information to receive from the user. For example, a phone number or address.
Input (<input /)>:
<input type="" />
Describes the type of field input, usually includes text, password, date-time, checkbox, password submit.
<input size="" />
Defines the input element width in characters.
<input required />
This is used where the input is important, user can’t precede forward without fulfilling that particular field.
<input maxlength = "" />
Identifies the maximum input element character numbers allowed.
<input width="" />
Defines the width (in pixels) of an <input> element.
<input height="" />
Defines the height (in pixels) of an <input> element.
<input placeholder="" />
Helps the user identify what type of data they should enter in the input field.
<input min="" />
Defines the minimum value allowed for each input element.
<input max="" />
Defines the maximum value allowed for each input element.
<input disabled />
Disables an input element on the form.
Option:
<button><button/>
Defines the clickable button for users to submit options.
Tables:
<table></table>
This table tag identifies and contains all table related content.
<caption></caption>
This caption tag shows the description of table, like what it contains.
<thread></thread>
This describes the type of information contained in each column underneath.
<tbody></tbody>
The table body contains the table’s data or information.
<tfoot ></tfoot>
This describes all the footer content.
<tr></tr>
Contains the information to be included in a single row of table.
<th></th>
Contains the actual data in a single header item.
<td></td>
Contains the information in a single table cell.
<col/>
Defines a single column of information inside a table.
HTML5 New Tags:
<header ></header>
Defines the header block for a document.
<footer></footer >
Identifies the footer block for the document.
<main ></main >
Describes the main content of a document.
<articles></articles>
Identifies an article inside a document.
<aside ></aside >
Defines content contained in a document sidebar.
<section></section>
Specifies a section block in the document.
<details></details>
Defines additional facts/information that users can see/hide.
<nav ></nav >
Navigation links for the user in a document.
<menuitem></menuitem>
The specific menu item that a user can raise from a popup menu.
Collective Character Objects:
" "
Quotation Marks – “
& &
Ampersand - &
< <
Less than sign - <
> >
Greater than sign - >
 
Non-breaking space.
© ©
Copyright symbol
@ @
@ symbol - @
• &; bull
Small bullet
™ ™
Trademark symbol
Download your free Ebook
Download a free copy of our newest E-book on "Metadata HTML Elements".
Awesome!
Download a free copy of our newest E-book on "Metadata HTML Elements".
