<!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>HTML5 Boilerplate</title>
</head>
<body>
<h1>Hello world, hello CareerInEdu.com!</h1>
</body>
</html>
<!-- this is a comment -->
<!--
Or you can comment out a
large number of lines.
-->
<p>I'm from CareerInEdu.com</p>
<p>Share the best cheat codes sheet.</p>
<a href="https://careerinedu.com">QuickRef</a>
<a href="mailto:[email protected]">Email</a>
<a href="tel:+12345678">Call</a>
<a href="sms:+12345678&body=ha%20ha">Msg</a>
href |
The URL that the hyperlink points to | |
rel |
Relationship of the linked URL | |
target |
Link target location: _self , _blank , _top , _parent |
See: The <a> Attributes
<img loading="lazy" src="https://xxx.png" alt="Describe image here" width="400" height="400">
src |
Required, Image location (URL | Path) | |
alt |
Describe of the image | |
width |
Width of the image | |
height |
Height of the image | |
loading |
How the browser should load |
<b>Bold Text</b>
<strong>This text is important</strong>
<i>Italic Text</i>
<em>This text is emphasized</em>
<u>Underline Text</u>
<pre>Pre-formatted Text</pre>
<code>Source code</code>
<del>Deleted text</del>
<mark>Highlighted text (HTML5)</mark>
<ins>Inserted text</ins>
<sup>Makes text superscripted</sup>
<sub>Makes text subscripted</sub>
<small>Makes text smaller</small>
<kbd>Ctrl</kbd>
<blockquote>Text Block Quote</blockquote>
<h1> This is Heading 1 </h1>
<h2> This is Heading 2 </h2>
<h3> This is Heading 3 </h3>
<h4> This is Heading 4 </h4>
<h5> This is Heading 5 </h5>
<h6> This is Heading 6 </h6>
You should only have one h1 on your page
<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 |
These are the tags used to divide your page up into sections
<body>
<header>
<nav>...</nav>
</header>
<main>
<h1>CareerInEdu.com</h1>
</main>
<footer>
<p>©2024 CareerInEdu.com</p>
</footer>
</body>
<header>
<nav>
<ul>
<li><a href="#">Edit Page</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</nav>
</header>
article | Content that’s independent |
aside | Secondary content |
audio | Embeds a sound, or an audio stream |
bdi | The Bidirectional Isolate element |
canvas | Draw graphics via JavaScript |
data | Machine readable content |
datalist | A set of pre-defined options |
details | Additional information |
dialog | A dialog box or sub-window |
embed | Embeds external application |
figcaption | A caption or legend for a figure |
figure | A figure illustrated |
footer | Footer or least important |
header | Masthead or important information |
main | The main content of the document |
mark | Text highlighted |
meter | A scalar value within a known range |
nav | A section of navigation links |
output | The result of a calculation |
picture | A container for multiple image sources |
progress | The completion progress of a task |
rp | Provides fall-back parenthesis |
rt | Defines the pronunciation of character |
ruby | Represents a ruby annotation |
section | A group in a series of related content |
source | Resources for the media elements |
summary | A summary for the <details> element |
template | Defines the fragments of HTML |
time | A time or date |
track | Text tracks for the media elements |
video | Embeds video |
wbr | A line break opportunity |
<audio controls
src="https://example.com/path/to/darshana-song.mp"">
Your browser does not support the audio element.
</audio>
<ruby>
भारत <rp>(</rp><rt>bharat</rt><rp>)</rp>
शब्द <rp>(</rp><rt>shabd</rt><rp>)</rp>
</ruby>
<ul>
<li>User <bdi>Aarav</bdi>: 60 points</li>
<li>User <bdi>Vihaan</bdi>: 80 points</li>
<li>User <bdi>Reyansh</bdi>: 90 points</li>
</ul>
<progress value="50" max="100"></progress>
<p>I Love <mark>CareerInEdu.com</mark></p>
I Love CareerInEdu.com
<table>
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>Ram</td>
<td>39</td>
</tr>
<tr>
<td>Sita</td>
<td>25</td>
</tr>
</tbody>
</table>
Tag | Description |
---|---|
<table> | Defines a table |
<th> | Defines a header cell in a table |
<tr> | Defines a row in a table |
<td> | Defines a cell in a table |
<caption> | Defines a table caption |
<colgroup> | Defines a group of columns |
<col> | Defines a column within a table |
<thead> | Groups the header content |
<tbody> | Groups the body content |
<tfoot> | Groups the footer content |
Attribute | Description |
---|---|
colspan |
Number of columns a cell should span |
headers |
One or more header cells a cell is related to |
rowspan |
Number of rows a cell should span |
See: td#Attributes
Attribute | Description |
---|---|
colspan |
Number of columns a cell should span |
headers |
One or more header cells a cell is related to |
rowspan |
Number of rows a cell should span |
abbr |
Description of the cell's content |
scope | The header element relates to |
See: th#Attributes
<ul>
<li>I'm an item</li>
<li>I'm another item</li>
<li>I'm another item</li>
</ul>
<ol>
<li>I'm the first item</li>
<li>I'm the second item</li>
<li>I'm the third item</li>
</ol>
<dl>
<dt>A Term</dt>
<dd>Definition of a term</dd>
<dt>Another Term</dt>
<dd>Definition of another term</dd>
</dl>
<form method="POST" action="api/login">
<label for="mail">Email: </label>
<input type="email" id="mail" name="mail">
<br/>
<label for="pw">Password: </label>
<input type="password" id="pw" name="pw">
<br/>
<input type="submit" value="Login">
<br/>
<input type="checkbox" id="ck" name="ck">
<label for="ck">Remember me</label>
</form>
The HTML <form>
element is used to collect and send information to an external source.
Attribute | Description |
---|---|
name |
Name of form for scripting |
action |
URL of form script |
method |
HTTP method, POST / GET (default) |
enctype |
Media type, See enctype |
onsubmit |
Runs when the form was submit |
onreset |
Runs when the form was reset |
<!-- Nested label -->
<label>Click me
<input type="text" id="user" name="name"/>
</label>
<!-- 'for' attribute -->
<label for="user">Click me</label>
<input id="user" type="text" name="name"/>
for
in a label references an input's id
attribute
<label for="Name">Name:</label>
<input type="text" name="Name" id="">
See: HTML input Tags
<textarea rows="2" cols="30" name="address" id="address"></textarea>
Textarea is a multiple-line text input control
<input type="radio" name="gender" id="m">
<label for="m">Male</label>
<input type="radio" name="gender" id="f">
<label for="f">Female</label>
Radio buttons are used to let the user select exactly one
<input type="checkbox" name="sports" id="cricket">
<label for="cricket">Cricket</label>
<input type="checkbox" name="sports" id="football">
<label for="football">Football</label>
Checkboxes allow the user to select one or more sports.
<label for="city">City:</label>
<select name="city" id="city">
<option value="1">Mumbai</option>
<option value="2">Hyderabad</option>
<option value="3">Delhi</option>
</select>
A select box is a dropdown list of options.
<fieldset>
<legend>Your favorite mythical creature</legend>
<input type="radio" id="naag" name="m">
<label for="naag">Naag</label><br/>
<input type="radio" id="rakshas" name="m">
<label for="rakshas">Rakshasa</label>
</fieldset>
<label for="b">Choose a browser: </label>
<input list="list" id="b" name="browser"/>
<datalist id="list">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>
The input tag is an empty element, identifying the particular type of field information to obtain from a user.
<input type="text" name="?" value="?" minlength="6" required />
- | ||
---|---|---|
type="…" |
The type of data that is being input | |
value="…" |
Default value | |
name="…" |
Used to describe this data in the HTTP request | |
id="…" |
Unique identifier that other HTML elements | |
readonly |
Stops the user from modifying | |
disabled |
Stops any interaction | |
checked |
The radio or checkbox select or not | |
required |
Being compulsory, See required | |
placeholder="…" |
Adds a temporary, See ::placeholder | |
autocomplete="off" |
Disable auto completion | |
autocapitalize="none" |
Disable auto capitalization | |
inputmode="…" |
Display a specific keyboard, See inputmode | |
list="…" |
The id of an associated datalist | |
maxlength="…" |
Maximum number of characters | |
minlength="…" |
Minimum number of characters | |
min="…" |
Minimum numerical value on range & number | |
max="…" |
Maximum numerical value on range & number | |
step="…" |
How the number will increment in range & number | |
pattern="…" |
Specifies a Regular expression, See pattern | |
autofocus |
Be focused | |
spellcheck |
Perform spell checking | |
multiple |
Whether to allow multiple values | |
accept="" |
Expected file type in file upload controls |
Also see: Attributes for the <input> element
type="checkbox" |
|
type="radio" |
|
type="file" |
|
type="hidden" |
|
type="text" |
|
type="password" |
|
type="image" |
|
type="reset" |
|
type="button" |
Button |
type="submit" |
type="color" |
|
type="date" |
|
type="time" |
|
type="month" |
|
type="datetime-local" |
|
type="week" |
|
type="email" |
|
type="tel" |
|
type="url" |
|
type="number" |
|
type="search" |
|
type="range" |
input:focus |
When its keyboard focused |
See: Input pseudo classes
The meta tag describes meta data within an HTML document. It explains additional material about the HTML.
<meta charset="utf-8">
<!-- title -->
<title>···</title>
<meta property="og:title" content="···">
<meta name="twitter:title" content="···">
<!-- url -->
<link rel="canonical" href="https://···">
<meta property="og:url" content="https://···">
<meta name="twitter:url" content="https://···">
<!-- description -->
<meta name="description" content="···">
<meta property="og:description" content="···">
<meta name="twitter:description" content="···">
<!-- image -->
<meta property="og:image" content="https://···">
<meta name="twitter:image" content="https://···">
<!-- ua -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- viewport -->
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=1024">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_CA">
<meta property="og:title" content="HTML cheatsheet">
<meta property="og:url" content="https://CareerInEdu.com/html">
<meta property="og:image" content="https://xxx.com/image.jpg">
<meta property="og:site_name" content="Name of your website">
<meta property="og:description" content="Description of this page">
Used by Facebook, Instagram, Pinterest, LinkedIn, etc.
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@FechinLi">
<meta name="twitter:title" content="HTML cheatsheet">
<meta name="twitter:url" content="https://CareerInEdu.com/html">
<meta name="twitter:description" content="Description of this page">
<meta name="twitter:image" content="https://xxx.com/image.jpg">
<meta name="ICBM" content="45.416667,-75.7">
<meta name="geo.position" content="45.416667;-75.7">
<meta name="geo.region" content="ca-on">
<meta name="geo.placename" content="Ottawa">
See: Geotagging