HTML ESSENCE

HTML is the standard markup language for Web pages.

HTML consists of a series of elements.

An HTML element is defined by a start tag, some content, and an end tag.

HTML elements can be nested.

HTML elements with no content are called empty elements. (no closing tag)

HTML is Not Case Sensitive.

Attributes provide additional information about elements.

Double quotes around attribute values are the most common in HTML, but single quotes can also be used.

Comment

HTML

<!DOCtyPE html> Identify HTML5 document

<html> root element of an HTML page

<head> meta information about the HTML page

</head>

<body> document's body

</body>

</html>

Language

<html lang="en"> To declare the language of the Web page.

<html lang="en-US"> To declare the language and Country codes of the Web page.

Head

<title> </title> Add Title shows at tab bar

Body

Header

Search engines use the headings to index the structure and content of your web pages.

`<h1> </h1>` Header 1

`<h2> </h2>` Header 2

`<h3> </h3>` Header 3

`<h4> </h4>` Header 4

`<h5> </h5>` Header 5

`<h6> </h6>` Header 6

Paragraph Format

Paragraph

The browser will automatically remove any extra spaces and lines when the page is displayed.

<p> </p> Paragraph

Reserved characters

Reserved characters must be replaced with character entities.

Result	Description	Entity Name	Entity Number
	non-breaking space
<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
"	double quotation mark	"	"
'	single quotation mark (apostrophe)	'	'
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
€	euro	€	€
©	copyright	©	©
®	registered trademark	®	®

Diacritical Marks

A diacritical mark is a "glyph" added to a letter.

Mark	Character	Construct	Result
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

Paragraph Style: font-size

Heading with the style attribute font-size.

<p style="font-size:20px;">

style="font-size:20px

style="font-size:120%

Paragraph Style: background-color

Set background color.

Color name, RGB values, HEX values, HSL values, RGBA values, and HSLA values

<p style="background-color:powderblue;">

Tomato

Orange

DodgerBlue

MediumSeaGreen

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

Paragraph Style: Text Color

Set text color.

<p style="color:DodgerBlue;">

Tomato

DodgerBlue

MediumSeaGreen

Paragraph Style: Border Color

Set boarder color.

<p style="color:DodgerBlue;">

Tomato

DodgerBlue

MediumSeaGreen

Paragraph Style: font-family

Set font.

<p style="font-family:Comic Sans MS;">

Comic Sans MS

Impact

Courier New

Paragraph Style: text-align

Set the horizontal text alignment.

<p style="text-align:center;">

text-align:left

text-align:center

text-align:right

Preformatted text

It preserves both indents, spaces and line breaks. This is typical when displaying code

<pre> </pre>

        Indented Text
          Double-space
        New line

span tag

To edit a part of text style.


          <p> There are three <span style="color:red"> red </span> boxes.</p>

There are three red boxes.

Quotations

Quoted from another source. It changes the alignment to make it unique from others.

<blockquote cite="https://www.goodreads.com/quotes"> </blockquote>

“If you can't explain it to a six year old, you don't understand it yourself.” ― Albert Einstein

Short Quotations

Defines a short quotation.

<q cite="https://www.goodreads.com/quotes"> </q>

“If you can't explain it to a six year old, you don't understand it yourself.” ― Albert Einstein

Abbreviations

Defines an abbreviation or an acronym.

<abbr title="World Wide Web"> WWW </abbr>

WWW

Address

Defines the contact information for the author/owner of a document or an article.

<cite> </cite>

Written by XXX
Visit us at:
Example.com
Box 564, Disneyland
USA

Citation

Defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).

<cite> </cite>

Harry Potter by J. K. Rowling

Bi-Directional Override

To override the current text direction.

<dir="rtl"> </bdo>

This text will be written from right to left

Text Format

Bold text

<b> </b>

Bold Text

Strong text

<strong> </strong>

Strong Text

Italic text

<i> </i>

Italic Text

Emphasis text

<em> </em>

Emphasis Text

Small text

<small> </small>

Smaller Text

Marked text

<mark> </mark>

Marked or Highlighted Text

Deleted text

<del> </del>

~~Deleted Text (strike a line)~~

Inserted text

<ins> </ins>

Inserted Text (Usually underline)

Underlined text

<u> </u>

Underlined Text

Subscript text

<sub> </sub>

Normal Text _{Subscript Text}

Example: H₂O

Superscript text

<sub> </sub>

Normal Text ^{Superscript Text}

Example: Reference^[1]

Line

Break line

<br> Break line

Horizonal line

<hr> Horizonal line

<hr style="border: 1px solid;"> Solid line

<hr style="border: 1px dashed"> Dashed line

<hr style="border: 1px dotted"> Dotted line

List

Unordered List

<ul> Unordered List element

<li> List items </li>

</ul>

Item1
Item2

Ordered List

<ol> Ordered List element

<li> List items </li>

</ol>

Item1
Item2

Description List

<dl> Description List

<dt> Description Title </dt>

<dd> Description Detail </dd>

</dl>

Title: Detail1; Detail2

Table

HTML

<table> To define a table

<tr> To define a table row

<td> To define a table data

<th> To define a table heading

<caption> To define a table caption

style="width:100%" To set Table width

CSS

table, th, td {border: 1px solid black;} To set border.

table, th, td {border-collapse: collapse;} To set one line border.

th, td {padding: 15px;} To set padding

th {text-align: left;} To set text aligh

table {border-spacing: 5px;} To set border space

table {background-color: #f1f1c1;} To set background Color

table#t01 {} <table id="t01"> To set table id

table#t01 tr:nth-child(odd) {} To set odd row

table#t01 tr:nth-child(even) {} To set event row

Table caption
Firstname	Age
Emma	40
William	34

Table: Span columns

<colspan> To make a cell span many columns

<rowspan> To make a cell span many rows

Name	Scores
Andy	89	85
Total	62	71
Total	95	93

Links

HTML links are hyperlinks.

<a href="https://www.google.com/"> LINK </a>

LINK

Relative Links

A local link (a link to a page within the same website).

<a href="about.html"> LINK </a> Relative Links

LINK

<a href="about.html" title="Tooltip"> LINK </a> Links with Tooltip

LINK

<a href="about.html" target="_self"> LINK </a> Default. Opens the document in the same tab

LINK

<a href="about.html" target="_blank"> LINK </a> _blank - Opens the document in a new tab

LINK

<a href="about.html" target="_parent"> LINK </a> _parent - Opens the document in the parent frame

LINK

<a href="about.html" target="_top"> LINK </a> _top - Opens the document in the full body of the window

LINK

<a href="#html"> LINK </a> Link to create a Bookmark

LINK

<a href="about.html" target="_blank"> <img src="/contents_resources/icons/click-here.png"> </a> Image as a Link

<button onclick="document.location = 'about.html'"> Button </button> Button as a Link

<a href="about.html" target="_blank"> <input type="Submit" value="Button"> </a> Button as a Link in new tab

Image

img src

<img src="/contents_resources/images/bird.jpg">

alt

<img src="/contents_resources/images/bird.jpg" alt="Message when cannot display" >

bird_img

width height

<img src="/contents_resources/images/bird.jpg" width="160" height="115" >

style="float"

<img src="/contents_resources/images/bird.jpg" style="float:left;width:160px;height:115px;" >

Text
Text
Text

Image Map

Create clickable areas on an image.

Background Image

To add a background image on an HTML element.

background-image: url('example_img_girl.jpg');

background-repeat: no-repeat; To avoid the background image from repeating itself.

background-attachment: fixed; To make sure the entire element is always covered.

background-size: cover; image will cover the entire element.

You can specify background images
for any visible HTML element.
In this example, the background image
is specified for a div element.

Picture Element

Tto display different pictures for different devices or screen sizes.

Medias

Audio

<audio src="/contents_resources/audios/coin.wav" controls> Message when cannot display </audio>

Videos

<video src="/contents_resources/videos/globe.mp4" controls> Message when cannot display </video>

Form

<form> </form>

<label>First Name</label> <input type="text" name="firstName" placeholder="Enter first name">

First Name

<label>Last Name</label> <input type="text" name="lastName">

Last Name

<label>Email</label> <input type="email" name="email">

<label>Message</label> <textarea name="message"> </textarea>

Message

<label>Gender</label> <select name="gender"> <option value="male">Male</option> <option value="female">Female</option> <option value="other">Other</option> </select>

Gender

<label>Age</label> <input type="number" name="age" value="30">

Age

<label>Birthday</label> <input type="date" name="birthday">

Birthday

<input type="submit" name="submit" value="submit">

Button

<button> </button>

Semantic Tags

Header

</header>

<article>

Title

<h3> </h2>

content

<p> </p>

</article>

<article>

Title

<h3> </h2>

content

<p> </p>

</article>

Mark	Character	Construct	Result
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

Mark	Character	Construct	Result
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

HTML ESSENCE

Comment

HTML

Language

Head

Body

Header

<h1> </h1> Header 1

<h2> </h2> Header 2

<h3> </h3> Header 3

<h4> </h4> Header 4

<h5> </h5> Header 5

<h6> </h6> Header 6

Paragraph Format

Paragraph

Reserved characters

Diacritical Marks

Paragraph Style: font-size

Paragraph Style: background-color

Paragraph Style: Text Color

Paragraph Style: Border Color

Paragraph Style: font-family

Paragraph Style: text-align

Preformatted text

span tag

Quotations

Short Quotations

Abbreviations

Address

Citation

Bi-Directional Override

Text Format

Bold text

Strong text

Italic text

Emphasis text

Small text

Marked text

Deleted text

Inserted text

Underlined text

Subscript text

Superscript text

Line

Break line

Horizonal line

List

Unordered List

Ordered List

Description List

Table

HTML

CSS

Table: Span columns

Links

Links

Relative Links

Image

img src

alt

width height

style="float"

Image Map

Background Image

Picture Element

Medias

Audio

Videos

Form

Button

Semantic Tags

Title

Title

`<h1> </h1>` Header 1

`<h2> </h2>` Header 2

`<h3> </h3>` Header 3

`<h4> </h4>` Header 4

`<h5> </h5>` Header 5

`<h6> </h6>` Header 6

Mark	Character	Construct	Result
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ