HTML Notes

HTML
HTML document structure:

The HTML document structure serves as the foundation for building web pages.
It consists of essential elements that define the structure and content of the webpage.
Below is an overview of the standard HTML document structure:
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>

</body>
</html>
<!DOCTYPE html>
It known as Document Type Declaration that specifies the document type and version of HTML being used in the
code.
When you do not explicitly specify the HTML version in the DOCTYPE declaration, modern web browsers will
automatically assume that you are using the latest version of HTML.
If we not specify the Doctype declaration in HTML document or code then features of HTML5 may not work
properly, and your webpage may not support to the latest web standards , Webpage may display inconsistently across
different browsers, causing layout issues, unintended behaviour,
<html>
This is the root element of an HTML document. All the content of the web page is contained within this element. It
acts as the container for all the other HTML elements.
<head>
These Tag contains the metadata and other non-visible information about the HTML document, Inside the head tag.
It Mainly used for provides the information and instruction to web browser and search engines.
Common elements in the head tag title, meta, link, script, style, base, etc.
If we not write head tag not possible to provide essentials metadata to browser and search engines and not possible to
link the external files and no Title for the webpage.
<title>
It is to define the title of a webpage.
It is a part of the <head> section of an HTML document and does not display any visible content on the actual
webpage.
Instead, the text inside the <title> tag appears in the browser's title bar or tab header when the page is opened.
Additionally, it is used as the default name for bookmarks when a user saves the page as a favourite or bookmark.
If you not write title tag it automatically take the file name as the titile.
<body>
It contains all the content that is visible on the webpage, such as text, images, videos, links, forms, and other HTML
elements.
It acts as a container for everything that users see and interact with on the webpage.
If you not mention body, you write the content your content is displayed on the browser but it not good approach it
leads to problems like lack of structure and there is no main content container to handles the content and no document
tree when the browser create the Dom tree based on the html structure with body tag it is not a proper Dom tree.
ELEMENTS:
HTML is a markup language used to create the webpage.

Elements are used to create the content and layout of a webpage.
Each element represents a different type of content and purpose.
HTML elements are represented by Tags which are enclosed with starting and ending. Within the angle brackets.
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
Without HTML Elements or Tags we cannot create the structure when you write the paragraph without tags content is
displayed but browser don’t know it paragraph just display the simple plain text.
Without Elements or Tags we cannot create layout like, tables, list, buttons, form, etc.
HTML elements are case sensitive that mean you can create the tags with lowercase or uppercase.
Elements are divided into two types
Block Level Elements
Inline Elements
Block Level Elements:
Block level elements take the full width of the entire Container.
These elements are push next elements to start in the new line.
Block level elements are used to structure the layout of a webpage.
Example: <div>, <p>, <h1>, <table>
Inline Elements:
Inline elements take only the how much width is needed.
Inline elements do not create a new line in the webpage.
Inline elements are often used to style up the specific elements within the block level elements.
Example: <span>, <a>, <strong>, <em>, <img>, <br>
Tags:
Tags are used to define the elements and create the structure of the webpages
Tag are used to create the content and within the tags what type of content is write is displayed on the webpage.
Tags are enclosed with angle brackets (<, >).
Each Tag is different and if having their own Purpose and use.
We have different type of tags available
Opening tag
Closing tag
Self-closing tag
Empty tag
Parent and child tags
Opening Tags:
These Tags are used to start an HTML element and define its beginning.
They are denoted by the element name within angle brackets (<,>)
For example: <div>, <p>, <h1>, <a>, etc.
Closing Tags:
These are used to end an HTML element.
They are similar to opening tags, but they include a forward slash (/) before the element name.
For example: </div>, </p>, </h1>, </a>, etc.

Self-Closing Tags or Empty Tags:
Some HTML elements do not require closing tags because they are self-contained and do not contain any content.
These elements are closed with a forward slash (/) immediately after the opening tag.
For example: <br>, <img>, <input>, etc.
Attributes:
Attributes are Provide the additional information to the HTML element.
Attributes are used to modify the behaviour and appearance of the HTML Elements
Attributes are classified into two types.
Global attributes
Elements specific attribute
Global attributes:
Global attributes are attributes that can be applied to nearly all HTML elements.
They are not specific to any particular element and can be used to modify the behaviour and appearance of a wide
range of elements.
Some common global attributes include:
id: Provides a unique identifier for an element.
class: Assigns one or more classes to an element for styling and grouping.
style: Applies inline CSS styling directly to the element.
title: Provides additional information when the user hovers over the element.
lang: Specifies the language of the element's content.
dir: Specifies the text direction (left-to-right or right-to-left) of the element's content.
Element-Specific Attributes:
Element-specific attributes are attributes that are specific to certain HTML elements.
They are designed to serve a particular purpose for those elements.
Some examples of element-specific attributes include:
href (used in <a>): Specifies the URL that the link points to.
src (used in <img>): Specifies the source URL of an image.
alt (used in <img>): Provides alternative text for images, used when the image cannot be loaded or for accessibility.
width and height (used in <img>): Specify the width and height of an image, respectively.
type (used in <input>): Defines the type of input field, such as text, password, checkbox, etc.
Headings:
Heading in HTML represented by the <h1> to <h6> elements.
We can define the different level of heading in webpage.
Heading is mainly used for the organize the content in the webpage example organize the information into different
sections and sub sections, so user can understand.
Heading used for Search engines they can understand the content better in the webpage. It Improve the page’s SEO
and rank the webpage.
Text Formatting:
Text formatting used to apply the styles and formatting to the text content in the webpage.
They tags helps improve better visual presentation of the text content and easy to read.
<b>: Bold text
<strong>: Bold text. B and strong both are same but Strong make the text bold and it having more significance and
more useful for SEO so better use strong tag.
<i>: Italicized text
<em>: Emphasized text (also italicized) and It provides the more significance
<u>: Underlined text (note: use CSS for styling)
<del>: Deleted or removed text (also strikethrough)
<sup>: Superscript text (raised)
<sub>: Subscript text (lowered)
<code>: include computer code in webpage.
<pre>: Preformatted text and used for display the content exactly what we want example triangle print so it appears
same. If not use then then it print differently.
<mark>: Highlighted text-Yellow colour

<blockquote>: Block-level quotation and used for quotations and make looks different compare to other text content
and help for readers know it is a quote and not just a regular text.
<abbr>: Abbreviation and used provide the additional information of the text content and showing their full meaning
when user hover the content.
<cite>: Used for giving the credit to the particular text content and it displayed like italic for example when you write
a song then give the credit to the singer write his name in the cite tag it shows italic.
Colours:
Colours are specified with names
We are the different ways include the colours.
RGB: (Red, green, blue)
Each parameter is defining the intensity of the colour with a value between 0 and 255.
That means 250 * 250 * 250 = 16777216.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the other two (green
and blue) are set to 0.
Another example, rgb(0, 255, 0) is displayed as green, because green is set to its highest value (255), and the other two
(red and blue) are set to 0.
RGBA: (red, green, blue, Alpha)
We need to change the colour opacity by adding another option.
Opacity values between 0 (full transparent) to 1 (not transparent at all)
For example rgba (255, 99, 71, 0) it display the full colour with 0 opacity.
Hex Colours:
Hexadecimal colour is specified with #RRGGBB (red, green, blue).
These values are between the 00 and ff (same as decimal 0 - 255)
For example, #ff0000 it displayed as red because RR place red set to be highest value and other places they set to 00.
For example #00ff00 is displayed as green because it set highest value and other two red, blue are set to be 00.
HSL:
HSL stands for Hue, Saturation and Lightness.
HSL colour can be specified with hsl (hue, saturation, lightness).
Hue is a degree on the colour wheel from 0 to 360.
0 is red, 120 is green and 240 is blue.
Saturation is percentage value.
0% means a shade of Gray, 100% is the full colour.
Lightness is also percentage value
0% is black and 100% is white.
For example, hsl (0, 100%,50%).
Saturation describes the intensity of the colour.
Lightness describe how much light you want to give the colour, where 0% means no light, 50% means neither dark or
light and 100% means full lightness (white ).
Shades of Gray used it is defined by setting the hue and saturation to 0 and adjusting the lightness from 0 to 100%.
HSLA: (hue, saturation, Lightness, Alpha)
Links:
Links allows users to click their way from page to page.
By default, links will appear as follows in all browsers.
Unvisited link: link is underlines and blue.
Visited link: link is underline and Purple.
Active link: link is underlined and red.
Attributes:
By default, the linked page will be displayed in the current browser window.
To change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
_self: default, open the document in same window.
_blank: open the document in a new window.
_parent: opens the document in the parent frame.

_top: open the document in the full body of the window.

HTML Notes

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Notes

Uploaded by

Copyright:

Available Formats

HTML

HTML document structure:

Below is an overview of the standard HTML document structure:

<title>Your Page Title</title>

It is to define the title of a webpage.

HTML is a markup language used to create the webpage.

Examples of some HTML elements:

<h1>My First Heading</h1>

Tags are enclosed with angle brackets (<, >).

We have different type of tags available

Parent and child tags

For example: <div>, <p>, <h1>, <a>, etc.

These are used to end an HTML element.

For example: </div>, </p>, </h1>, </a>, etc.

For example: <br>, <img>, <input>, etc.

Attributes are Provide the additional information to the HTML element.

Attributes are classified into two types.

Elements specific attribute

Some common global attributes include:

id: Provides a unique identifier for an element.

style: Applies inline CSS styling directly to the element.

lang: Specifies the language of the element's content.

They are designed to serve a particular purpose for those elements.

Some examples of element-specific attributes include:

Heading in HTML represented by the <h1> to <h6> elements.

We can define the different level of heading in webpage.

<b>: Bold text

<i>: Italicized text

<u>: Underlined text (note: use CSS for styling)

<del>: Deleted or removed text (also strikethrough)

<sup>: Superscript text (raised)

<sub>: Subscript text (lowered)

<code>: include computer code in webpage.

<mark>: Highlighted text-Yellow colour

Colours are specified with names

We are the different ways include the colours.

RGB: (Red, green, blue)

That means 250 * 250 * 250 = 16777216.

RGBA: (red, green, blue, Alpha)

We need to change the colour opacity by adding another option.

Opacity values between 0 (full transparent) to 1 (not transparent at all)

Hexadecimal colour is specified with #RRGGBB (red, green, blue).

These values are between the 00 and ff (same as decimal 0 - 255)

HSL colour can be specified with hsl (hue, saturation, lightness).

Hue is a degree on the colour wheel from 0 to 360.

0 is red, 120 is green and 240 is blue.

Saturation is percentage value.

0% means a shade of Gray, 100% is the full colour.

Lightness is also percentage value

0% is black and 100% is white.

For example, hsl (0, 100%,50%).

Saturation describes the intensity of the colour.

HSLA: (hue, saturation, Lightness, Alpha)

Links allows users to click their way from page to page.

By default, links will appear as follows in all browsers.

Unvisited link: link is underlines and blue.

Visited link: link is underline and Purple.

Active link: link is underlined and red.

The target attribute specifies where to open the linked document.

_self: default, open the document in same window.

_blank: open the document in a new window.

_parent: opens the document in the parent frame.

You might also like