Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
17 views

HTML Is The Standard Markup Language For Creating Web Pages

HTML is the standard markup language used to create web pages. HTML describes the structure of a web page using elements like headings, paragraphs, links and images. HTML elements are defined with tags which can have attributes to provide additional information.

Uploaded by

kalumbatridor
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views

HTML Is The Standard Markup Language For Creating Web Pages

HTML is the standard markup language used to create web pages. HTML describes the structure of a web page using elements like headings, paragraphs, links and images. HTML elements are defined with tags which can have attributes to provide additional information.

Uploaded by

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

HTML is the standard markup language for creating Web pages.

What is HTML?

 HTML stands for Hyper Text Markup Language


 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.

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

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

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>.

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>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

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>
Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

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>.

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 »

HTML Attributes
❮ PreviousNext ❯

HTML attributes provide additional information about HTML elements.

HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the
page the link goes to:

Example
<a href="https://www.w3schools.com">Visit W3Schools</a>

Try it Yourself »

You will learn more about links in our HTML Links chapter.

The src Attribute


The <img> tag is used to embed an image in an HTML page. The src attribute
specifies the path to the image to be displayed:

Example
<img src="img_girl.jpg">

Try it Yourself »

There are two ways to specify the URL in the src attribute:

1. Absolute URL - Links to an external image that is hosted on another


website. Example: src="https://www.w3schools.com/images/img_girl.jpg".

Notes: External images might be under copyright. If you do not get


permission to use it, you may be in violation of copyright laws. In addition,
you cannot control external images; it can suddenly be removed or changed.

2. Relative URL - Links to an image that is hosted within the website. Here,
the URL does not include the domain name. If the URL begins without a
slash, it will be relative to the current page. Example: src="img_girl.jpg". If
the URL begins with a slash, it will be relative to the domain. Example:
src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you
change domain.
The width and height Attributes
The <img> tag should also contain the width and height attributes, which
specify the width and height of the image (in pixels):

Example
<img src="img_girl.jpg" width="500" height="600">

Try it Yourself »

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">

Try it Yourself »

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">

Try it Yourself »

You will learn more about images in our HTML Images chapter.

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>

Try it Yourself »

You will learn more about styles in our HTML Styles chapter.

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>

You can see all the language codes in our HTML Language Code Reference.

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>

Try it Yourself »

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>

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

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>

HTML Styles
❮ PreviousNext ❯

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
Try it Yourself »
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.

You will learn more about CSS later in this tutorial.

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>

Try it Yourself »

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>
Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »
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>

Try it Yourself »

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>

Try it Yourself »

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

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

Try it Yourself »
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>

Try it Yourself »

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>

Try it Yourself »

HTML <small> Element


The HTML <small> element defines smaller text:

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

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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 H 2O:

Example
<p>This is <sub>subscripted</sub> text.</p>
Try it Yourself »

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>

Try it Yourself »

HTML Exercises
Test Yourself With Exercises
Exercise:
Add extra importance to the word "degradation" in the paragraph below.

<p>
WWF's mission is to stop the degradation of our planet's natural
environment.
</p>

Submit Answer »

Start the Exercise

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 Quotation and Citation
Elements
❮ PreviousNext ❯

In this chapter we will go through


the <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML
elements.

Example
Here is a quote from WWF's website:

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.

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »
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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

HTML Exercises
Test Yourself With Exercises
Exercise:
Use an HTML element to add quotation marks around the letters "cool".

<p>
I am so cool.
</p>

Submit Answer »

Start the Exercise

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
❮ PreviousNext ❯

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

Try it Yourself »

HTML supports 140 standard color names.

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.

Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Try it Yourself »

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>

Try it Yourself »

Border Color
You can set the color of borders:
Hello World
Hello World
Hello World
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Try it Yourself »

Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL
values, RGBA values, and HSLA values.

The following three <div> elements have their background color set with
RGB, HEX, and HSL values:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)


The following two <div> elements have their background color set with RGBA
and HSLA values, which add an Alpha channel to the color (here we have
50% transparency):

rgba(255, 99, 71, 0.5)


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

Example
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>


<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Try it Yourself »

HTML Exercises
Test Yourself With Exercises
Exercise:
Insert the correct property to make the text color violet.

<p style=": violet">This is a paragraph.</p>

Submit Answer »

Start the Exercise

Learn more about Color Values

You might also like