Scribd
Upload
9 views30 pages

HTML Notes

HTML is the standard markup language used to create web pages. It describes the structure of a web page using elements like headings, paragraphs, links and images. Some key HTML elements are <h1> for main headings, <p> for paragraphs, <a> for links, and <img> for images. Attributes provide additional information about elements, such as href for links and src for images.

Uploaded by

Mokshitha Katiki
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
9 views30 pages

HTML Notes

HTML is the standard markup language used to create web pages. It describes the structure of a web page using elements like headings, paragraphs, links and images. Some key HTML elements are <h1> for main headings, <p> for paragraphs, <a> for links, and <img> for images. Attributes provide additional information about elements, such as href for links and src for images.

Uploaded by

Mokshitha Katiki
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 30

HTML (Hyper text markup notes )

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.

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

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

Year Version

1989
ee 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

Below is a visualization of an HTML page structure:

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

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

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

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

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

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

HTML Links
HTML links are defined with the <a> tag:

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

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

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>):
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>

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.

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

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

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 »

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

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.

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

Try it Yourself »

Note: Browsers automatically add some white space (a margin) before and
after a heading.

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

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.

Description

<!--...--> Defines a comment

<!DOCTYPE> Defines the document type

<a> Defines a hyperlink

<abbr> Defines an abbreviation or an acronym

<acronym> Not supported in HTML5. Use <abbr> instead.


Defines an acronym

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

<applet> Not supported in HTML5. Use <embed> or <object> instead


Defines an embedded applet

<area> Defines an area inside an image map

<article> Defines an article


<aside> Defines content aside from the page content

<audio> Defines embedded sound content

<b> Defines bold text

<base> Specifies the base URL/target for all relative URLs in a docum

<basefont> Not supported in HTML5. Use CSS instead.


Specifies a default color, size, and font for all text in a docum

<bdi> Isolates a part of text that might be formatted in a different


from other text outside it

<bdo> Overrides the current text direction

<big> Not supported in HTML5. Use CSS instead.


Defines big text

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

<body> Defines the document's body

<br> Defines a single line break


<button> Defines a clickable button

<canvas> Used to draw graphics, on the fly, via scripting (usually Java

<caption> Defines a table caption

<center> Not supported in HTML5. Use CSS instead.


Defines centered text

<cite> Defines the title of a work

<code> Defines a piece of computer code

<col> Specifies column properties for each column within a <colgro


element

<colgroup> Specifies a group of one or more columns in a table for form

<data> Adds a machine-readable translation of a given content

<datalist> Specifies a list of pre-defined options for input controls

<dd> Defines a description/value of a term in a description list


<del> Defines text that has been deleted from a document

<details> Defines additional details that the user can view or hide

<dfn> Specifies a term that is going to be defined within the conten

<dialog> Defines a dialog box or window

<dir> Not supported in HTML5. Use <ul> instead.


Defines a directory list

<div> Defines a section in a document

<dl> Defines a description list

<dt> Defines a term/name in a description list

<em> Defines emphasized text

<embed> Defines a container for an external application

<fieldset> Groups related elements in a form

<figcaption> Defines a caption for a <figure> element


<figure> Specifies self-contained content

<font> Not supported in HTML5. Use CSS instead.


Defines font, color, and size for text

<footer> Defines a footer for a document or section

<form> Defines an HTML form for user input

<frame> Not supported in HTML5.


Defines a window (a frame) in a frameset

<frameset> Not supported in HTML5.


Defines a set of frames

<h1> to <h6> Defines HTML headings

<head> Contains metadata/information for the document

<header> Defines a header for a document or section

<hgroup> Defines a header and related content

<hr> Defines a thematic change in the content


<html> Defines the root of an HTML document

<i> Defines a part of text in an alternate voice or mood

<iframe> Defines an inline frame

<img> Defines an image

<input> Defines an input control

<ins> Defines a text that has been inserted into a document

<kbd> Defines keyboard input

<label> Defines a label for an <input> element

<legend> Defines a caption for a <fieldset> element

<li> Defines a list item

<link> Defines the relationship between a document and an externa


(most used to link to style sheets)

<main> Specifies the main content of a document


<map> Defines an image map

<mark> Defines marked/highlighted text

<menu> Defines an unordered list

<meta> Defines metadata about an HTML document

<meter> Defines a scalar measurement within a known range (a gaug

<nav> Defines navigation links

<noframes> Not supported in HTML5.


Defines an alternate content for users that do not support fra

<noscript> Defines an alternate content for users that do not support cl


scripts

<object> Defines a container for an external application

<ol> Defines an ordered list

<optgroup> Defines a group of related options in a drop-down list


<option> Defines an option in a drop-down list

<output> Defines the result of a calculation

<p> Defines a paragraph

<param> Defines a parameter for an object

<picture> Defines a container for multiple image resources

<pre> Defines preformatted text

<progress> Represents the progress of a task

<q> Defines a short quotation

<rp> Defines what to show in browsers that do not support ruby a

<rt> Defines an explanation/pronunciation of characters (for East


typography)

<ruby> Defines a ruby annotation (for East Asian typography)

<s> Defines text that is no longer correct


<samp> Defines sample output from a computer program

<script> Defines a client-side script

<search> Defines a search section

<section> Defines a section in a document

<select> Defines a drop-down list

<small> Defines smaller text

<source> Defines multiple media resources for media elements (<vide


<audio>)

<span> Defines a section in a document

<strike> Not supported in HTML5. Use <del> or <s> instead.


Defines strikethrough text

<strong> Defines important text

<style> Defines style information for a document


<sub> Defines subscripted text

<summary> Defines a visible heading for a <details> element

<sup> Defines superscripted text

<svg> Defines a container for SVG graphics

<table> Defines a table

<tbody> Groups the body content in a table

<td> Defines a cell in a table

<template> Defines a container for content that should be hidden when t


loads

<textarea> Defines a multiline input control (text area)

<tfoot> Groups the footer content in a table

<th> Defines a header cell in a table

<thead> Groups the header content in a table


<time> Defines a specific time (or datetime)

<title> Defines a title for the document

<tr> Defines a row in a table

<track> Defines text tracks for media elements (<video> and <audio

<tt> Not supported in HTML5. Use CSS instead.


Defines teletype text

<u> Defines some text that is unarticulated and styled differently


normal text

<ul> Defines an unordered list

<var> Defines a variable

<video> Defines embedded video content

<wbr> Defines a possible line-break

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

HTML Tag Reference


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

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

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>

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

<!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>
Output:

The WHO was founded in 1948.

Marking up abbreviations can give useful information to browsers, translation


systems and search-engines.

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

OUTPUT:

The HTML address element defines contact information (author/owner) of a


document or article.

Written by John Doe.


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

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.

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>

OUTPUT:

This line will be written from right to left

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.

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
Background Color
<!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
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>

Border Color
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>

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

<!DOCTYPE html>
<html>
<body>
<p>Same as color name "Tomato":</p>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>
<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL,
or even transparent colors using RGBA or HSLA color values.</p>
</body>
</html>

You might also like