Scribd
Upload
3 views

HTML

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages, consisting of elements that define the structure and content of the page. An HTML document begins with a doctype declaration and includes elements such as <html>, <head>, <body>, <h1>, and <p>, which dictate how content is displayed in web browsers. Additionally, HTML elements can have attributes that provide further information, and various tags are used for formatting text, creating links, and embedding images.

Uploaded by

Mahantesh Holeyache
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

HTML

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages, consisting of elements that define the structure and content of the page. An HTML document begins with a doctype declaration and includes elements such as <html>, <head>, <body>, <h1>, and <p>, which dictate how content is displayed in web browsers. Additionally, HTML elements can have attributes that provide further information, and various tags are used for formatting text, creating links, and embedding images.

Uploaded by

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

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?


The HTML element is everything from the start tag to the end tag
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>

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

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


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

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

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

Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

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
HTML paragraphs are defined with the <p> tag:

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 Links
HTML links are defined with the <a> tag:

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

Example
<a href="https://www.w3schools.com">This is a link</a>
HTML Images
HTML images are defined with the <img> tag.

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

<img src="img_girl.jpg" alt="Girl in a


jacket" style="width:500px;height:600px;">
Or
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
However, we suggest using the style attribute. It prevents styles sheets from changing the
size of images

Example
<!DOCTYPE html>
<html>
<head>
<style>
/* This style sets the width of all images to 100%: */
img {
width: 100%;
}
</style>
</head>
<body>
<h2>Width/Height Attributes or Style?</h2>
<p>The first image uses the width attribute (set to 128 pixels), but the
style in the head section overrides it, and sets the width to 100%.</p>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<p>The second image uses the style attribute to set the width to 128 pixels,
this will not be overridden by the style in the head section:</p>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>
Output

Images in Another Folder


<img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">

Images on Another Server/Website


<img src="https://www.w3schools.com/images/w3schools_green.jpg" al
t="W3Schools.com">

Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Image Floating
Use the CSS float property to let the image float to the right or to the left of a
text
<p><img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

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>

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>

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

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

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

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

The style Attribute


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

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>

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

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>

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

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:

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:

The <hr> tag is an empty tag, which means that it has no end tag
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>

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:

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

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

HTML <pre> Element


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>
If <pre> not used this poem will display on a single line

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.

HTML Text Formatting


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>

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.

Example
<em>This text is emphasized</em>

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

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>H<sub>2</sub>O</p>

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 A2+ B2

Example
<p>A<sup>2</sup>+ B<sup>2</sup><p>

You might also like