Scribd
Upload
18 views

Unit 3 HTML - RM - PDF

HTML is the standard markup language used to create web pages. It uses tags to define headings, paragraphs, links, images and other page elements. An HTML document has a basic structure including <html>, <head>, and <body> tags. Within the <body> are common elements like <h1> for main headings, <p> for paragraphs, and <img> for images. HTML pages are displayed in web browsers which use the tags to understand how to display the document.

Uploaded by

lucifermorningstar2092000
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

Unit 3 HTML - RM - PDF

HTML is the standard markup language used to create web pages. It uses tags to define headings, paragraphs, links, images and other page elements. An HTML document has a basic structure including <html>, <head>, and <body> tags. Within the <body> are common elements like <h1> for main headings, <p> for paragraphs, and <img> for images. HTML pages are displayed in web browsers which use the tags to understand how to display the document.

Uploaded by

lucifermorningstar2092000
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

HTML

HTML is the standard markup language for Web pages.

With HTML you can create your own Website.

HTML is easy to learn - You will enjoy it

Easy Learning with HTML "Try it Yourself"


With our "Try it Yourself" editor, you can edit the HTML code and view the
result:

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

A Simple HTML Document


Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Example Explained
Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> None none

 The <!DOCTYPE html> declaration defines that this document is an


HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container
for all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

What is an HTML Element?


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

<tagname> Content goes here... </tagname>


The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>


<p>My first paragraph.</p>
Note: Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end
tag!
ADVERTISEMENT

Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read
HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how
to display the document:

HTML Page Structure


Below is a visualization of an HTML page structure:

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

Note: The content inside the <body> section will be displayed in a browser.
The content inside the <title> element will be shown in the browser's title
bar or in the page's tab.

HTML History
Since the early days of the World Wide Web, there have been many versions
of HTML:

Year Version

1989 Tim Berners-Lee invented www

1991 Tim Berners-Lee invented HTML

1993 Dave Raggett drafted HTML+

1995 HTML Working Group defined HTML 2.0

1997 W3C Recommendation: HTML 3.2

1999 W3C Recommendation: HTML 4.01

2000 W3C Recommendation: XHTML 1.0


2008 WHATWG HTML5 First Public Draft

2012 WHATWG HTML5 Living Standard

2014 W3C Recommendation: HTML5

2016 W3C Candidate Recommendation: HTML 5.1

2017 W3C Recommendation: HTML5.1 2nd Edition

2017 W3C Recommendation: HTML5.2

HTML Editors
❮ PreviousNext ❯

A simple text editor is all you need to learn HTML.

Learn HTML Using Notepad or TextEdit


Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad
(PC) or TextEdit (Mac).

We believe that using a simple text editor is a good way to learn HTML.

Follow the steps below to create your first web page with Notepad or
TextEdit.
Step 1: Open Notepad (PC)
Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your
screen). Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac)


Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files


correctly. In Preferences > Format > choose "Plain Text"

Then under "Open and Save", check the box that says "Display HTML files as
HTML code instead of formatted text".

Then open a new document to place the code.

Step 2: Write Some HTML


Write or copy the following HTML code into Notepad:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
ADVERTISEMENT

Step 3: Save the HTML Page


Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.htm" and set the encoding to UTF-8 (which is the
preferred encoding for HTML files).

Tip: You can use either .htm or .html as file extension. There is no
difference; it is up to you.
Step 4: View the HTML Page in Your
Browser
Open the saved HTML file in your favorite browser (double click on the file, or
right-click - and choose "Open with").

The result will look much like this:

W3Schools Online Editor - "Try it Yourself"


With our free online editor, you can edit the HTML code and view the result in
your browser.

It is the perfect tool when you want to test code fast. It also has color coding
and the ability to save and share code with others:

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Click on the "Try it Yourself" button to see how it works.

HTML Basic Examples


❮ PreviousNext ❯

In this chapter we will show some basic HTML examples.

Don't worry if we use tags you have not learned about yet.

HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE
html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Try it Yourself »
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers
to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important
heading:

Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Try it Yourself »

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Try it Yourself »
HTML Links
HTML links are defined with the <a> tag:

Example
<a href ="https://www.w3schools.com">This is a link</a>
Try it Yourself »

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images
HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided
as attributes:

Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Try it Yourself »

How to View HTML Source


Have you ever seen a Web page and wondered "Hey! How did they do that?"

View HTML Source Code:


Right-click in an HTML page and select "View Page Source" (in Chrome) or
"View Source" (in Edge), or similar in other browsers. This will open a
window containing the HTML source code of the page.

Inspect an HTML Element:


Right-click on an element (or a blank area), and choose "Inspect" or "Inspect

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> None none

Element" to see what elements are made up of (you will see both the HTML
and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements
or Styles panel that opens.

HTML Elements
❮ PreviousNext ❯

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

HTML Elements
The HTML element is everything from the start tag to the end tag:

<tagname>Content goes here...</tagname>


Examples of some HTML elements:

<h1>My First Heading</h1>


<p>My first paragraph.</p>
Note: Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end
tag!

Nested HTML Elements


HTML elements can be nested (this means that elements can contain other
elements).

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements


(<html>, <body>, <h1> and <p>):

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Try it Yourself »

Example Explained
The <html> element is the root element and it defines the whole HTML
document.

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element:

<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>

The <body> element defines the document's body.

It has a start tag <body> and an end tag </body>.


Then, inside the <body> element there are two other elements: <h1> and <p>:

<h1>My First Heading</h1>


<p>My first paragraph.</p>

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>:

<h1>My First Heading</h1>

The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>:

<p>My first paragraph.</p>

Never Skip the End Tag


Some HTML elements will display correctly, even if you forget the end tag:

Example
<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>
Try it Yourself »

However, never rely on this! Unexpected results and errors may


occur if you forget the end tag!

Empty HTML Elements


HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing
tag:
Example
<p>This is a <br> paragraph with a line break.</p>
Try it Yourself »

HTML is Not Case Sensitive


HTML tags are not case sensitive: <P> means the same as <p>.

The HTML standard does not require lowercase tags, but


W3C recommends lowercase in HTML, and demands lowercase for stricter
document types like XHTML.

At W3Schools we always use lowercase tag names.

HTML Tag Reference


W3Schools' tag reference contains additional information about these tags
and their attributes.

Tag Description

<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

The alt Attribute


The required alt attribute for the <img> tag specifies an alternate text for an
image, if the image for some reason cannot be displayed. This can be due to
a slow connection, or an error in the src attribute, or if the user uses a
screen reader.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">

Example
See what happens if we try to display an image that does not exist:

<img src="img_typo.jpg" alt="Girl with a jacket">

The style Attribute


The style attribute is used to add styles to an element, such as color, font,
size, and more.

Example
<p style="color:red;">This is a red paragraph.</p>

The lang Attribute


You should always include the lang attribute inside the <html> tag, to declare
the language of the Web page. This is meant to assist search engines and
browsers.

The following example specifies English as the language:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Country codes can also be added to the language code in the lang attribute.
So, the first two characters define the language of the HTML page, and the
last two characters define the country.

The following example specifies English as the language and United States as
the country:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

The title Attribute


The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse
over the element:

Example
<p title="I'm a tooltip">This is a paragraph.</p>

We Suggest: Always Use Lowercase


Attributes
The HTML standard does not require lowercase attribute names.

The title attribute (and all other attributes) can be written with uppercase or
lowercase like title or TITLE.

However, W3C recommends lowercase attributes in HTML,


and demands lowercase attributes for stricter document types like XHTML.

At W3Schools we always use lowercase attribute names.

We Suggest: Always Quote Attribute


Values
The HTML standard does not require quotes around attribute values.

However, W3C recommends quotes in HTML, and demands quotes for


stricter document types like XHTML.

Good:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Bad:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>
Sometimes you have to use quotes. This example will not display the title
attribute correctly, because it contains a space:

Example
<p title=About W3Schools>

Single or Double Quotes?


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

In some situations, when the attribute value itself contains double quotes, it
is necessary to use single quotes:

<p title='John "ShotGun" Nelson'>

Or vice versa:

<p title="John 'ShotGun' Nelson">

Chapter Summary
 All HTML elements can have attributes
 The href attribute of <a> specifies the URL of the page the link goes to
 The src attribute of <img> specifies the path to the image to be
displayed
 The width and height attributes of <img> provide size information for
images
 The alt attribute of <img> provides an alternate text for an image
 The style attribute is used to add styles to an element, such as color,
font, size, and more
 The lang attribute of the <html> tag declares the language of the Web
page
 The title attribute defines some extra information about an element

HTML Headings
❮ PreviousNext ❯

HTML headings are titles or subtitles that you want to display on a


webpage.
Example

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important
heading.

Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Headings Are Important


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

Users often skim a page by its headings. It is important to use headings to


show the document structure.

<h1> headings should be used for main headings, followed by <h2> headings,
then the less important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings to make
text BIG or bold.
Bigger Headings
Each HTML heading has a default size. However, you can specify the size for
any heading with the style attribute, using the CSS font-size property:

Example
<h1 style="font-size:60px;">Heading 1</h1>

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:60px;">Heading 1</h1>

<p>You can change the size of a heading with the style attribute, using the
font-size property.</p>

</body>
</html>

HTML Tag Reference


W3Schools' tag reference contains additional information about these tags
and their attributes.

Tag Description

<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings


HTML Paragraphs
❮ PreviousNext ❯

A paragraph always starts on a new line, and is usually a block of text.

HTML Paragraphs
The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add


some white space (a margin) before and after a paragraph.

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Try it Yourself »

HTML Display
You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the display by adding extra spaces or extra
lines in your HTML code.

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

Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<!DOCTYPE html>
<html>
<body>

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>

<p>
The number of lines in a paragraph depends on the size of the browser
window. If you resize the browser window, the number of lines in this
paragraph will change.
</p>

</body>
</html>

HTML Horizontal Rules


The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an


HTML page:
Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

The <hr> tag is an empty tag, which means that it has no end tag.

HTML Line Breaks


The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new
paragraph:

Example
<p>This is<br>a paragraph<br>with line breaks.</p>

The <br> tag is an empty tag, which means that it has no end tag.

The Poem Problem


This poem will display on a single line:

Example
<p>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.


</p>

Solution - The HTML <pre> Element


The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually


Courier), and it preserves both spaces and line breaks:

Example
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.


</pre>
<!DOCTYPE html>
<html>
<body>

<p>The pre tag preserves both spaces and line breaks:</p>

<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.


</pre>

</body>
</html>

HTML Tag Reference


W3Schools' tag reference contains additional information about HTML
elements and their attributes.

Tag Description
<p> Defines a paragraph

<hr> Defines a thematic change in the


content

<br> Inserts a single line break

<pre> Defines pre-formatted text

HTML Styles
The HTML style attribute is used to add styles to an element, such as
color, font, size, and more.

Example
I am Red

I am Blue

I am Big

<!DOCTYPE html>

<html>

<body>
<p>I am normal</p>

<p style="color:red;">I am red</p>

<p style="color:blue;">I am blue</p>

<p style="font-size:50px;">I am big</p>

</body>

</html>

The HTML Style Attribute


Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">

The property is a CSS property. The value is a CSS value.

Background Color
The CSS background-color property defines the background color for an
HTML element.

Example
Set the background color for a page to powderblue:

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

Example
Set background color for two different elements:

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>


<p style="background-color:tomato;">This is a paragraph.</p>

</body>

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>

<p style="background-color:tomato;">This is a paragraph.</p>

</body>

</html>

Text Color
The CSS color property defines the text color for an HTML element:

Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Fonts
The CSS font-family property defines the font to be used for an HTML
element:

Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Text Size
The CSS font-size property defines the text size for an HTML element:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Text Alignment
The CSS text-align property defines the horizontal text alignment for an
HTML element:

Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

Chapter Summary
 Use the style attribute for styling HTML elements
 Use background-color for background color
 Use color for text colors
 Use font-family for text fonts
 Use font-size for text sizes
 Use text-align for text alignment

HTML Text Formatting


❮ PreviousNext ❯

HTML contains several elements for defining text with a special meaning.

Example
This text is bold

This text is italic

This is subscript and superscript

Try it Yourself »
HTML Formatting Elements
Formatting elements were designed to display special types of text:

 <b> - Bold text


 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

HTML <b> and <strong> Elements


The HTML <b> element defines bold text, without any extra importance.

Example
<b>This text is bold</b>

The HTML <strong> element defines text with strong importance. The content
inside is typically displayed in bold.

Example
<strong>This text is important!</strong>

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><strong>This text is important!</strong></p>

</body>
</html>
HTML <i> and <em> Elements
The HTML <i> element defines a part of text in an alternate voice or mood.
The content inside is typically displayed in italic.

Tip: The <i> tag is often used to indicate a technical term, a phrase from
another language, a thought, a ship name, etc.

Example
<i>This text is italic</i>

The HTML <em> element defines emphasized text. The content inside is
typically displayed in italic.

Tip: A screen reader will pronounce the words in <em> with an emphasis,
using verbal stress.

Example
<em>This text is emphasized</em>
<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><em>This text is emphasized.</em></p>

</body>
</html>

HTML <small> Element


The HTML <small> element defines smaller text:

Example
<small>This is some smaller text.</small>

HTML <mark> Element


The HTML <mark> element defines text that should be marked or highlighted:

Example
<p>Do not forget to buy <mark>milk</mark> today.</p>
<!DOCTYPE html>
<html>
<body>

<p>Do not forget to buy <mark>milk</mark> today.</p>

</body>
</html>
Do not forget to buy milk today.

HTML <del> Element


The HTML <del> element defines text that has been deleted from a
document. Browsers will usually strike a line through deleted text:

Example
<p>My favorite color is <del>blue</del> red.</p>
<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> red.</p>

</body>
</html>

HTML <ins> Element


The HTML <ins> element defines a text that has been inserted into a
document. Browsers will usually underline inserted text:

Example
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

HTML <sub> Element


The HTML <sub> element defines subscript text. Subscript text appears half a
character below the normal line, and is sometimes rendered in a smaller
font. Subscript text can be used for chemical formulas, like H2O:

Example
<p>This is <sub>subscripted</sub> text.</p>

<!DOCTYPE html>

<html>

<body>

<p>This is <sub>subscripted</sub> text.</p>

</body>

</html>

This is subscripted text.

HTML <sup> Element


The HTML <sup> element defines superscript text. Superscript text appears
half a character above the normal line, and is sometimes rendered in a
smaller font. Superscript text can be used

for footnotes, like WWW[1]:

Example
<p>This is <sup>superscripted</sup> text.</p>

<!DOCTYPE html>

<html>

<body>

<p>This is <sup>superscripted</sup> text.</p>

</body>

</html>
This is superscripted text

HTML Text Formatting Elements


Tag Description

<b> Defines bold text

<em> Defines emphasized text

<i> Defines a part of text in an


alternate voice or mood

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text


<mark> Defines marked/highlighted
text

HTML <blockquote> for Quotations


The HTML <blockquote> element defines a section that is quoted from
another source.

Browsers usually indent <blockquote> elements.

Example
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As the
world's leading conservation organization, WWF works in nearly 100
countries. At every level, we collaborate with people around the world
to develop and deliver innovative solutions that protect communities,
wildlife, and the places in which they live.
</blockquote>

HTML <q> for Short Quotations


The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Example
<p>WWF's goal is to: <q>Build a future where people live in harmony
with nature.</q></p>

HTML <abbr> for Abbreviations


The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML",
"CSS", "Mr.", "Dr.", "ASAP", "ATM".

Marking abbreviations can give useful information to browsers, translation


systems and search-engines.

Tip: Use the global title attribute to show the description for the
abbreviation/acronym when you mouse over the element.
Example
<p>The <abbr title="World Health Organization">WHO</abbr> was founded
in 1948.</p>

<!DOCTYPE html>

<html>

<body>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded


in 1948.</p>

<p>Marking up abbreviations can give useful information to browsers,


translation systems and search-engines.</p>

</body>

</html>

HTML <address> for Contact Information


The HTML <address> tag defines the contact information for the
author/owner of a document or an article.

The contact information can be an email address, URL, physical address,


phone number, social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will
always add a line break before and after the <address> element.

Example
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

<!DOCTYPE html>
<html>

<body>

<p>The HTML address element defines contact information (author/owner)


of a document or article.</p>

<address>

Written by John Doe.<br>

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

</body>

</html>

HTML <cite> for Work Title


The HTML <cite> tag defines the title of a creative work (e.g. a book, a
poem, a song, a movie, a painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.

Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

<!DOCTYPE html>

<html>

<body>
<p>The HTML cite element defines the title of a work.</p>

<p>Browsers usually display cite elements in italic.</p>

<img src="img_the_scream.jpg" width="220" height="277" alt="The


Scream">

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

</body>

</html>

HTML <bdo> for Bi-Directional Override


BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction:

Example
<bdo dir="rtl">This text will be written from right to left</bdo>

<!DOCTYPE html>

<html>

<body>

<p>If your browser supports bi-directional override (bdo), the next line will
be written from right to left (rtl):</p>

<bdo dir="rtl">This line will be written from right to left</bdo>

</body>

</html>
If your browser supports bi-directional override (bdo), the next line will be written
from right to left (rtl):

Tfel ot thgir morf nettirw eb lliw enil siht

HTML Quotation and Citation Elements


Tag Description

<abbr> Defines an abbreviation or acronym

<address> Defines contact information for the author/owner of a


document

<bdo> Defines the text direction

<blockquote> Defines a section that is quoted from another source

<cite> Defines the title of a work

<q> Defines a short inline quotation

HTML Colors
HTML colors are specified with predefined color names, or with RGB, HEX,
HSL, RGBA, or HSLA values.

Color Names
In HTML, a color can be specified by using a color name:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray
Background Color
You can set the background color for HTML elements:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.

</p>

</body>

</html>
Text Color
You can set the color of text:

Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper


suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

You might also like