Curated by @SajalShlan
Basic HTML Structure
<html>
<head>
<title>Title</title>
</head>
<body>
Content (Hello there awesome developers!)
</body>
</html>Text Formatting
Name of the tag | Use case |
<h~> </h~> | Heading (~= 1 for largest to 6 for smallest, eg h1) |
<b> </b> | Bold Text |
<i> </i> | Italic Text |
<u> </u> | Underline Text |
<strike> </strike> | Strikeout |
<sup> </sup> | Superscript - Smaller text placed below normal text |
<sub> </sub> | Subscript - Smaller text placed below normal text |
<small> </small> | Small - Fine print size text |
<tt> </tt> | Typewriter Text |
<pre> </pre> | Pre-formatted Text |
<blockquote> </blockquote> | Text Block Quote |
<strong> </strong> | Strong - Shown as Bold in most browsers |
<em> </em> | Emphasis - Shown as Italics in most browsers |
<font> </font> | Font tag obsolete, use CSS. (*) |
Images
<img src="url" alt="alternate text"> Name of the tag | Use Case |
src="(url)" | URL or filename of image |
alt="text" | Alternate Text |
align=" " | Image alignment within surrounding text |
width=" " | Image width (in pixels or %) |
height=" " | Image height (in pixels or %) |
border=" " | Border thickness (in pixels) |
Links
<a href="url"> Text </a>Name of the tag | Use case |
href="(url)" | Location (url) of page to link to. |
name=" " | Name of link (name of anchor, or name of bookmark) |
target=" " | Link target location: _self, _blank, _top, _parent. |
href="url#bookmark" | Link to a bookmark. |
href="mailto:email" | Link which initiates an email. |
Lists
Name of the tag | Use case |
<ol> </ol> | Ordered List |
<ul> </ul> | Un-ordered List |
<li> </li> | List Item (within ordered or unordered) |
<ol type=” "> | Ordered list type: A, a, I, i, 1 |
<ol start=" "> | Ordered list starting value |
<ul type=" "> | Unordered list bullet type: disc, circle, square |
<li value=" "> | List Item Value (changes current and subsequent items) |
<li type=" "> | List Item Type (changes only current item) |
<dl> </dl> | Definition List |
<dt> </dt> | Term or phrase being defined |
<dd> </dd> | Detailed Definition of term |
Forms
Name of the tag | Use Case |
<form> </form> | Form input group declaration |
<form> Tag Attributes: | |
action="url" | URL of Form Script |
method=" " | Method of Form: get, post |
<input> </input> | Input field within form |
<input> Tag Attributes: | |
type=" " | Input Field Type: text, password, checkbox, submit etc. |
name=" " | Form Field Name (for form processing script) |
value=" " | Value of Input Field |
size=" " | Field Size |
maxlength=" " | Maximum Length of Input Field Data |
checked | Mark selected field in radio button group or checkbox |
<select> </select> | Select options from drop down list |
<select> Tag Attributes: | |
name=" " | Drop Down Combo-Box Name (for form processing script) |
size=" " | Number of selectable options |
multiple | Allow multiple selections |
<option> </option> | Option (item) within drop down list |
<option> Tag Attributes: | |
value=" " | Option Value |
selected | Set option as default selected option |
<textarea> </textarea> | Large area for text input |
<textarea> Tag Attributes: | |
name=" " | Text Area Name (for form processing script) |
rows=" " | Number of rows of text shown |
cols=" " | Number of columns (characters per rows) |
wrap=" " | Word Wrapping: off, hard, soft |
Sections
Name of the tag | Use Case |
<div> </div> | Division or Section of Page Content |
<span> </span> | Section of text within other content |
<p> </p> | Paragraph of Text |
<br> | Line Break |
<hr> | Basic Horizontal Line |