HyperText Markup Language - HTML

HTML works by surrounding text and graphics content appearing on the page with special codes instructing the browser on how to arrange and display this content.
Markup codes, also called html tags or elements, are always enclosed inside “<” and “>” symbols to set them apart from the text content to which they apply.
Normally, an “opening” tag indicates the beginning form of formatting( e.g. <h2>) an a separate “closing” tag indicates the ending point of formatting (e.g. </h2>)

Classes Of HTML Tags

Document layout tags: These tags are used to structure the html document. They organize the information content on a page so that text and graphical elements appear where you want them to appear. e.g. <p> <div> <span>
Text formatting tags: These tags are used to apply font faces, styles and sizes and colors to text appearing on the page. e.g. <font> <bold> <center>
List formatting tags: They are used to organize text information into lists. These include bulleted lists, numbers and others. e.g. <ol> <ul> <li>
Linking tags: They set up linkages between pages or different sections of the same page. e.g. <a>
Table tags: They organize data in a tabular form, into rows and columns, for better presentation, readability and understanding.
Form tags: They are used to collect information from visitors inoder to capture data for processing or to solicit user preferences about displays.
Multimedia tags: They are used to link audio, videos, images and other media content on a webpage.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title><!-- Page Title --></title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="description_content">
        <!-- JavaScript and CSS files can be linked here -->
    </head>
    <body>
        <!-- Page Content-->
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <title><!-- Page Title --></title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="description_content">
        <!-- JavaScript and CSS files can be linked here -->
    </head>
    <body>
        <!-- Page Content-->
    </body>
</html>

Tag	Description
`<!-- -->`	Defines a comment
`<!DOCTYPE html>`	Defines a document type
`<a>`	Defines a hyperlink
`<abbr>`	Defines an abbreviation
`<address>`	Defines contact information for the author or owner of a document
`<area>`	Defines an area inside an image-map
`<article>`	Defines an article
`<aside>`	Defines a content aside from page content
`<audio>`	Defines a sound content
`<b>`	Defines a bold text
`<base>`	Specifies the target URL/target for all relative URLs in a document
`<bdi>`	Isolates a part of text that might be formatted in a different from other text outside it
`<bdo>`	Overides the current text direction
`<blockquote>`	Defines a section that is quoted from another source
`<body>`	Defines the document's body
`<br>`	Defines a line break
`<button>`	Defines a clickable button
`<canvas>`	Used to draw graohics on the fly via scripting(usually javascript)
`<caption>`	Defines a table caption
`<cite>`	Defines the title of a work
`<code>`	Defines a piece of computer code
`<col>`	Specifies cloumn property for each column within a <colgroup> element
`<colgroup>`	Specifies a group of one or more columns in a table for formatting
`<datalist>`	Specifies a list of pre-defined options for input controls
`<dd>`	Defines a description/value of a term in a description list
`<del>`	Defines text that has been deleted from a document
`<details>`	Defines additional details that the user can view or hide
`<dfn>`	Represents the defining instance of a term
`<dialog>`	Defines a dialog box or window
`<div>`	Defines a section in a document
`<dl>`	Defines a description list
`<dt>`	Defines a term/name in a description list
`<em>`	Defines emphasized text
`<embed>`	Defines a container for an external(non-HTML) application
`<fieldset>`	groups related elements in a form
`<figcaption>`	Defines a caption for a <figure> element
`<figure>`	Specifies self-contained conntent
`<footer>`	Defines a footer for a document or section
`<form>`	Defines an HTML form for user input
`<h1 ... h6>`	Defines HTML headings
`<head>`	Defines information about the document
`<header>`	Defines a header for a document or a section
`<hr>`	Defines a horizontal line - a thematic change in content
`<html>`	Defines the root of an HTML document
`<i>`	Defines italicised text
`<iframe>`	Defines an inline frame
`<img>`	Defines an image
`<input>`	Defines an input control
`<ins>`	Defines a text that has been inserrted into s document
`<kbd>`	Defines keyboard input
`<keygen>`	Defines a key-pair generator field (for forms)
`<label>`	Defines a label for a input field
`<legend>`	Defines a caption for <fieldset> element
`<li>`	Defines a list item
`<link>`	Defines a relationship between a document and anexternal resource
`<main>`	Specifies the main content of a document
`<map>`	Defines a client-side image map
`<mark>`	Defines highlighted text
`<menu>`	Defines a list of menu/commands
`<menuitem>`	Defines a command that a user can invoke in a popup menu
`<meta>`	Defines metadata about an HTML document
`<meter>`	Defines a scalar measurement within a known range
`<nav>`	Defines navigation links
`<noscript>`	defines an alternate content for users that do not support client-side scripts
`<object>`	Defines an embedded object
`<ol>`	Defines an ordered list
`<optgroup>`	Defines a group of related options in a dropdown list
`<option>`	Defines an option in a dropdown list
`<output>`	Defines the result of a calculation
`<p>`	Defines a paragraph
`<param>`	Defines a parameter for an object
`<picture>`	Defines a container for multiple image resources
`<pre>`	Defines pre-formatted text
`<progress>`	Represents the progress of a task
`<q>`	Defines a short quotation
`<rp>`	Defines what to show in browsers tha do not support ruby annotations
`<samp>`	Defines a sample output from a computer program
`<script>`	Defines a client-side script
`<section>`	Defines a section in a document
`<select>`	Defines a dropdown list
`<small>`	Defines a smaller text
`<source>`	Defines multiple media sources for media elements (<audio> & <video>)
`<span>`	Defines a section in a document
`<strong>`	Defines important text
`<sub>`	Defines a subscripted text
`<summary>`	Defines a visible heading for <details> element
`<sup>`	Defines a superscripted text
`<svg>`	defines a container for SVG graphics
`<table>`	Defines a table
`<tbody>`	Groups the body content in a table
`<td>`	Defines a cell in a table
`<textarea>`	Defines a multiline text input control
`<tfoot>`	Groups the footer content in a table
`<th>`	Defines a header cell in a table
`<thead>`	Groups the header content in a table
`<time>`	Deines date/time
`<title>`	Defines a title for the document
`<tr>`	Defines a row in a table
`<track>`	Defines text tracks for madia elements (<audio> & <video>)
`<u>`	Underlines text
`<ul>`	Defines an unordered list
`<var>`	Defines a variable
`<video>`	Defines a video content
`<wbr>`	Defines a possible line break

Input Types

color	tel
date	name
datetime	time
datetime-local	text
email	password
url	radio
week	checkbox
month	submit
number	range
search	radio
submit	checkbox

Input Attributes

form	list
max	min
formaction	multiple
formenctype	placeholder
formnovalidate	required
formtarget	step
height	width
autofocus	pattern

Common Special Characters

Code	Display(output)
& &	Ampersand(&)
> &#62	Greater than(>)
< &#60	Less than(<)
" &#34	Quotation marks("")
© &#169	Copyright
® &#174	Registered
™ &#8482	Trademark
&#160	Non-breaking space

GET & POST

Code Sample:

<form action = "" method = "GET" or "POST">

<form action = "" method = "GET" or "POST">

GET: The form data will be visisble in the page address.
POST: Offers better security because submitted data is not visisble in the page address.

The `<iframe>` element

It as src and name attributes. The src attribute can be set to a url you want to embed into your page. E.g.

<iframe sandbox src="http://somedomain.net/content"></iframe>

<iframe sandbox src="http://somedomain.net/content"></iframe>

To override restrictions, use the following values:

allow-forms - Enables forms.
allow-same-origin - Allows the content to be treated as being from the same origin.
allow-scripts - Enables scripts except popups.
allow-top-navigation - Allows content to navigate it's top-level browing content.

<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://somedomain.net/content"></iframe>

<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://somedomain.net/content"></iframe>

The iframe tag has a seamless attribute that indicates that the source content is to appear as though its part of the containing document. How to enable seamless:

<iframe seamless="seamless">
<iframe seamless="">
<iframe seamless>

<iframe seamless="seamless">
<iframe seamless="">
<iframe seamless>

Internal Links

If the link is internal, the href will contain the hash(#) symbol followed by the id of the tag that you want to jump to. If you use only the hash(#) symbol, clicking the link will take you to the top of the HTML document. E.g.

<a href="#">Top</a>
<a href="#bill_address">Go to BIlling Address</a>

<a href="#">Top</a>
<a href="#bill_address">Go to BIlling Address</a>

Sending E-mail With Hyperlinks

You can use mailto protocol to send e-mail messages. The mailto url accepts the following parameters: subject, cc, bcc and body. The parameters can be added in any order by adding a question mark(?) after the email address and separating the parameters with the ampersand(&).
Code Sample:

        <!-- basic mailto -->
<a href="mailto:sales@gmail.com">Contact Sales</a>
        <!-- add name, (email is wrapped with &lt; and &gt:) -->
<a href="mailto:Joe&lt;sales@gmail.com&gt;">Contact Joe in Sales</a>
        <!-- multiple receipients are separated by a comma -->
        <!-- Add carbon copy, same for bcc -->
<a href="mailto:sales@gmail.com,services@gmail.com">Contact Sales</a>
        <!-- Adding basic mailto with message -->
<a href="mailto:sales@gmail.com?body=Call me">Contact Sales</a>

        <!-- basic mailto -->
<a href="mailto:sales@gmail.com">Contact Sales</a>
        <!-- add name, (email is wrapped with &lt; and &gt:) -->
<a href="mailto:Joe&lt;sales@gmail.com&gt;">Contact Joe in Sales</a>
        <!-- multiple receipients are separated by a comma -->
        <!-- Add carbon copy, same for bcc -->
<a href="mailto:sales@gmail.com,services@gmail.com">Contact Sales</a>
        <!-- Adding basic mailto with message -->
<a href="mailto:sales@gmail.com?body=Call me">Contact Sales</a>

List Types

Ordered lists: 1,2,3 | A,B,C | a,b,c | i,ii,iii | I,II,III
Unordered lists: disk, square, circle

Target Attribute of `<a>` tag

It specifies where to open a linked document or page. Syntax: <a target="value">

Value	description
_blank	Opens in a new browser window
_parent	Open in the parent frame or window
_self	Opens in the current window. Target is set to this value by default.
_top	Opens in the topmost frame, thus replacing the contents of the window
<iframe_name>	Opens in an iframe element with the matching name attribute

HTML Reference

Introduction

HyperText Markup Language - HTML

Classes Of HTML Tags

Layout Structure

Tags Reference

Input Types & Its Attributes

Input Types

Input Attributes

Special Characters