You are on page 1of 70

Web Technology

UNIT I
Fundamentals of HTML: Understanding Elements: Root Elements-Metadata

Elements-Section Elements-Heading Elements-Describing data types. 


HTML
Hypertext Markup Language (HTML) is one of the most commonly-used languages to
design Web pages.

 To create a Web page using HTML, you must be familiar with the HTML fundamentals,
such as elements and the content embedded within the elements, attribute and datatypes.

Elements in an HTML document instruct the Web browser about how it should interpret
the document.

The attributes of the element provide additional information about it, such as its behavior
and properties.

The content is displayed on the browser according to the properties and behaviors
defined by the element and attributes.
Basic Reference for HTML

https://www.w3schools.com/html/html_intro.asp

https://www.w3schools.com/html/html_elements.asp

https://www.w3schools.com/html/html_attributes.asp

https://www.tutorialspoint.com/html/html_overview.htm Structure
UNDERSTANDING ELEMENTS
 Elements are the building blocks of an HTML document.
 The browser interprets an HTML document on the basis of the element types that are added in
the document.
 An HTML document is displayed with all the properties specified by the elements embedded
in it.
 The structure of an HTML element consists of three basic components: an opening/starting
tag, a closing/ending tag and the content of the element enclosed between the opening and the
closing tag
e.g <p>
This is the first paragraph
</p>
 The names of the tags are not case sensitive.
 HTML elements are predefined
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>
HTML elements can be categorized as
 Root
 Metadata
 Section
 Heading
 Flow
 Phrasing
 Embedded
 Interactive
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories
HTML elements categorized with explanation

Root element - category contains the main element of the HTML, which is the HTML
element.

Metadata element - category contains elements that define the presentation or behavior of
the entire HTML document.

Section elements - category contains elements that are used to represent various sections of
the HTML document.

Heading elements -category contains elements that represent headings in the HTML
document.
Flow elements - category contains elements that are used in the BODY element of an HTML
document to define the structure of the document.

Phrasing element - category contains elements that are used to display text of an HTML
document.

Embedded elements - category contains elements that are used to embed content in the
HTML

Interactive elements - category contains elements that are used for user interactivities.
HTML elements can be categorized as
1) Root
2) Metadata
3) Section
4) Heading
5) Flow
6) Phrasing
7) Embedded
8) Interactive
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories
1.ROOT ELEMENTS

 Root elements represent the main or the starting element that should be present in
all HTML documents.
 The <html> tag represents the root of an HTML document.
 It is the first element that comes after the <!DOCTYPE> declaration.
 The declaration is not an HTML tag. It is an "information" to the browser about what
document type to expect.
 Doctype stands for Document Type Declaration. It informs the web browser about
the type and version of HTML used in building the web document.
https://www.w3schools.com/tags/tag_doctype.asp
Attributes of the HTML Elements
Attribute Value Description New in
HTML 5
class Class-name Specifies the class for an element in an HTML document No

dir Ltr-left to right Specifies the direction of text for the content in an element No
Rtl- right to left
id Unique-id Specifies a unique alphanumeric identifier for an element No

lang Language-code Specifies the language of the Web page (Content) No


Xml:lang Language-code specifies the language (optionally) of the element content No
https://www.w3.org/Inter https://www.w3schools.com/tags/ref_language_codes.asp
national/questions/qa-ht
manifest ml-language-declarations
URL Defines URL containing the document’s cache information Yes
.pt-br

Tabindex Number Specifies the tab order index of an element No

Style Style-definition Specifies an inline style in the HTML document by using No


the <style> element
Attribute Value Description New in HTML
5

xmlns http://www.w3.org/ Declares a namespace for tags used in an HTML No


1999/xhtml document
https://www.w3schools.com/xml/ https://www.w3schools.com/tags/att_html_xmlns.asp#:~:text=The%20
xml_namespaces.asp xmlns%20attribute%20specifies%20the,4.01%2C%20and%20optional
%20in%20HTML5.&text=This%20is%20because%20the%20namespa
ce,you%20do%20not%20include%20it
.

contenteditable True,false Specifies whether or not you can edit the content in Yes
https://www.w3schools.com/tags/
tryit.asp?filename=tryhtml5_glob
the document
al_spellcheck

contextmenu Menu-id Specifies the context menu for an element Yes


https://www.youtube.com/watch?
v=KH_2q1MnYO0

draggable True,false,auto Specifies whether or not you can drag an element Yes
https://www.w3schools.com/tags/
tryit.asp?filename=tryhtml5_glob
al_draggable

accesskey URL Defines URL containing the document’s cache Yes


information
Attribute Value Description New in HTML 5

Hidden Hidden Declares an element as a hidden element. Hidden No


elements are not displayed in the document
Spellcheck True,false Specifies whether an element should be checked for Yes
https://www.w3schools.com/howt
o/tryit.asp?filename=tryhow_html
spelling and grammar or not
_spellcheck_disable
Title Text Specifies the title of an HTML document No
Example
<!DOCTYPE html>
<html lang="en“>
<head>
<title>Swapping Songs</title>
</head>
<body>
<h1>Swapping Songs</h1>
<p>Tonight I swapped some of the songs I wrote with some friends, who
gave me some of the songs they wrote. I love sharing my music.</p>
</body>
</html>

https://codescracker.com/html/html-root-elements.htm
2.Metadata Elements
 The metadata elements are used to set the presentation or behavior of the remaining
content of a document.
Metadata elements are:
1) TITLE
2) BASE
3) LINK
4) COMMAND
5) META
6) NOSCRIPT
7) SCRIPT
8) STYLE
https://www.ques10.com/p/29258/list-and-explain-metadata-elements-used-in-html-5/
1.TITLE Element
 The TITLE element contains the title of the HTML document, which appears in the title bar of the
web browser.
This element is used by search engines to select the document and display it in the search result
Each HEAD element should contain a TITLE element.
Attributes of the TITLE Elements
For Example Attribute Description
<!DOCTYPE HTML>
class Specifies the class of an element in an HTML document.(class attribute is
<html> mostly used to point to a class in a style sheet )
.. https://www.w3schools.com/tags/att_class.asp#:~:text=Definition%
.. 20and%20Usage,elements%20with%20a%20specified%20class
<head> Id Specifies a unique alphanumeric identifier for an element in the
document
<title> An example</title> https://www.w3schools.com/html/html_id.asp#:~:text=The%20id%
</head> 20attribute%20specifies%20a,element%20with%20the%20specific
%20id
… .
</html> Lang Specifies the language used by the element
https://www.w3schools.com/tags/att_global_lang.asp
Style Specifies an inline style to render an element in the document
https://www.w3schools.com/tags/att_global_style.asp
2. BASE Element

 The Base element is used to specify a default URL and target for all the links in the
HTML document.

 Set a base URL for all the links once at the top of the document by using the BASE
element.

 This element appears within the HEAD element of the document and should be used
as the first element in the HEAD element.

 The HTML <base> tag is used to specify a base URI, or URL, for relative links.

For example, you can set the base URL once at the top of your page, then all subsequent
relative links will use that URL as a starting point.
https://www.w3schools.com/tags/tag_base.asp
Example
<!DOCTYPE HTML>
<HTML>
<HEAD>
<base href=“base_url” target=“frame_name”>
</HEAD> Attributes of the BASE Elements
</HTML> Attribute Description
href Specifies a URL in an HTML document
https://www.w3schools.com/tags/att_href.asp
target Specifies the locations where the links of an HTML
document open.
• _blank - Opens the link in a new window
• _parent – Opens the link in the same frame the link is
clicked
• _self - Opens the link in the present frameset
• _top – Opens the link in the same window
• <framename> - Opens the link in the respective frame
https://www.w3.org/TR/html401/present/frames.html
3.LINK ELEMENT

 The HTML <link> tag is used for defining a link an HTML document to other HTML
documents.
It is placed in the <head> section of the document.
It also defines the relationship between two different HTML documents
 The LINK element contains the href attribute to specify the destination URL of a link
 The href attribute is a required attribute that must have a valid URL
 If this attribute is not specified, then the LINK element does not define a link
 The LINK element also contains the rel attribute that defines the relationship of the
linked documents

https://www.tutorialspoint.com/html/html_link_tag.htm
For example:
<HEAD>
<LINK href=“file_name.html” rel=“stylesheet”>
</HEAD>

Attribute Value Description New in


HTML 5
href URL Specifies the target URL you No
navigate to after clicking a link
hreflang Language_code specifies the language of the No
linked document.
https://www.w3schools.com/tags/att
_a_hreflang.asp
media Screen, tty, tv, projection, Specifies on what device the No
handheld, print, braille, aural, linked document will be
all displayed
https://www.w3schools.com/t
ags/att_link_media.asp
Attribute Value Description New in
HTML 5
rel Alternate, archives, author, Specifies the relationship between the No
feed, first, help, icon, HTML document and the target URL or
index, last, license, next, another HTML document
pingback, prev, search,
stylesheet, sidebar, tag, up

Sizes Any number Specifies the size of the linked resource. Yes
Only for rel="icon“
https://www.w3schools.com/tags/att_link_
sizes.asp
type The mime_type, for tells the browser what kind of resource No
example:text/javascript you are linking to.
text/ css  
https://html.com/attributes/link-type/#ixzz6mZW0
fFME
4.META ELEMENT

 The META element is used to provide information about an HTML document.


 Metadata will not be displayed on the page, but is machine understandable.
 <meta> tags always go inside the <head> element
 It is used to specify character set, page description, keywords, author of the
document, and viewport settings.

 It has five attributes:


1. Charset
2. Content
3. http-equiv
4. Name
<HEAD>
<META name=“keywords” content=“some keywords”/>
</HEAD>
https://www.w3schools.com/tags/tag_meta.asp

Attribute Value Description New in


HTML 5
charset Character encoding Defines character encoding for the Yes
document

contents Some_text Defines the content of the meta data No

http-equiv Content-type expires, Provides information of the contents No


refresh, set-cookie attribute to an http header

name Author, description, Provides the content of the contents No


keywords, generator, attribute
revised, others
5.COMMAND ELEMENT
HTML <command> tag define a command button, invoke as per user action.
<command> tag support only Internet Explorer 9.

The COMMAND element is a new element introduced in HTML5.

The <command> tag defines a command button, like a radiobutton, a checkbox, or a


button.

<MENU label=“cars”>
<COMMAND type=“radio” radiogroup=“cars” label=“ferrari”>
<COMMAND type=“radio” radiogroup=“cars” label=“lamborghini”>
</MENU>
Attribute Value Description
type Command (default), Specifies the type of command
checkbox, radio
label Some_text Specifies the name of the command that is to be displayed on
https://way2tutorial.com/html/tag/html_ an HTML page
command_tag.php
icon URI Specifies the location of the image that is to be displayed as
https://www.w3schools.com/howto/how the icon of an HTML page
to_css_icon_buttons.asp https://fontawesome.com/v4.7.0/examples/

disabled [Empty string], disabled Specifies a value that indicates whether a command is disabled
https://www.w3schools.com/tags/att_dis or not
abled.asp

Checked [Empty string], checked used to indicate whether an element should be checked when
https://www.geeksforgeeks.org/html-che the page loads up
cked-attribute/

radiogroup Some_text Specifies a string value that represents the name of the group
https://developer.mozilla.org/en-US/doc of commands whose type attributes has radio as its value
s/Web/HTML/Element/input/radio

Title Some_text Specify extra details of element contain, this will display as a
https://www.w3schools.com/tags/tryit.as "tooltip" for an elements.
p?filename=tryhtml5_global_title
6.NOSCRIPT Element
 <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in
their browser or have a browser that doesn't support script.
 If the JavaScript is enabled or supported by the web browser, the NOSCRIPT element is not
considered.
<SCRIPT>
document.write(“Have a good day”)
</SCRIPT>
<NOSCRIPT>JavaScript is disabled or not supported on your browser
</NOSCRIPT>

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_noscript
7.SCRIPT Element

 The SCRIPT element is used to declare a script, such as JavaScript, within an HTML
document.
 JavaScript interact with html elements in order to make interactive web user
interface.

https://www.tutorialspoint.com/html/html_javascript.htm
Attribute Value Description

async async Specifies that the script is executed asynchronously


(only for external scripts)
https://www.w3schools.com/tags/att_script_async.asp
defer defer Specifies that the script is executed when the page has
finished parsing (only for external scripts)
https://www.w3schools.com/tags/att_script_defer.asp

src URL Specifies the URL of an external script file

type scripttype Specifies the media type of the script


https://www.geeksforgeeks.org/html-script-type-attrib
ute/
 If async is present: The script is executed asynchronously with the rest of the page
(the script will be executed while the page continues the parsing)
 If async is not present and defer is present: The script is executed when the page
has finished parsing
 If neither async or defer is present: The script is fetched and executed
immediately, before the browser continues parsing the page
8.Style element
• <style> tag is used to define style information (CSS) for a document.
• This element specifies how HTML elements should render in a browser.
Three Attributes
1.Type - type of content simple text or style sheet
2.Media -media attribute specifies what media/device the CSS style is
optimized for.
3.Scoped – specify that the styles only apply to this element’s parent
element and that element’s child elements (not the entire document).
https://www.w3schools.com/tags/att_scoped.asp
https://www.geeksforgeeks.org/html-scoped-attribute/
3. Section Elements

The section elements are used to define the scope of headers, footers and
various other sections of an HTML document.
Different section elements are used to define different parts of a
document. The following is a list of section elements:
 BOBY
 SECTION
 ARTICLE
 NAV
 ASIDE
 HEADER
 FOOTER
 ADDRESS
The BODY Element
• The BODY element of the HTML document contains the main content of the
document.
• It includes text, hyperlinks, images and lists.
<HTML>
<HEAD>
</HEAD>
<BODY>
</BOBY>
</HTML>

NAV Element
 Defines a set of navigation links OR group of links.
 Used in footer area
 Service and contact information
<nav>
</nav>
The ARTICLE Element
• The ARTICLE element -introduced in HTML5 used to represent a section that contains the
information title and date of its creation.
• You an also display news article, a blog post or user’s comment section
<ARTICLE>
<HEADER>
Some heading content
</HEADER>
<p> some article content</p>
</ARTICLE>
https://www.w3schools.com/tags/tag_article.asp

THE ASIDE Element


• It is introduced in HTML5
• To display information about the content of other elements, such as time and date, current news and
weather report
https://www.w3schools.com/tags/tag_aside.asp
The HEADER Element

• The HEADER element is used to provide the introductory content on an HTML page
• It can contain headings, paragraphs, links and other content

<HEADER>
<H1>Heading Level 1</H1>
<A href=“http://www.w3.org/TR/sections.html>Section</a>
<NAV>
<UL>
<LI><A href=“/articles”>Articles</A>
<LI><A href=“/discussion”>Discussions</A>
<LI><A href=“/download”>Download</A>
</UL>
</NAV>
</HEADER>
The FOOTER Element

• The FOOTER element is used to represent the footer


• It contains various types of information, such as links and copyright data related to a document or a
section of the document.

<FOOTER>
<UL>
<LI>Home</LI>
<LI>Links</LI>
<LI>About</LI>
</UL>
</FOOTER>

THE ADDRESS Element


• The ADDRESS element is normally defined at the header or footer of the HTML page
• contact information may include the name of the document’s owners, maintainers, e-mail addresses
for feedback, postal addresses and phone numbers
REFERENCE

SECTION-https://www.geeksforgeeks.org/html-section-tag/

NAV -https://www.w3schools.com/tags/tag_nav.asp

ARTICLE -https://www.geeksforgeeks.org/html5-article-tag/

HEADER-https://www.geeksforgeeks.org/html-5-header-tag/
#:~:text=The%20tag%20in%20HTML,but%20this%20is%20not
%20required

FOOTER -https://www.w3schools.com/tags/tag_footer.asp

ADDRESS -https://www.w3schools.com/tags/tag_address.asp
4.Heading elements
category contains elements that represent headings levels in the HTML document. They are
sometimes referred to collectively as <Hn> tags, n meaning any of the available heading
levels. H1 to H6.
HTML <hgroup> element represents a multi-level heading for a section of a document
(HTML 5)
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup

<hgroup>
<h1>Calculus I</h1>
<h2>Fundamentals</h2>
</hgroup>
Describing Data Types

 A data type refers to a set of data classified under a specific type or range of

values

 some of the data types that are commonly used in programming language are
character, integer, floating point and Boolean.

 Basic html data types

 Data types defined by Request for Comments (RFC) and Internet Assigned
Numbers Authority (IANA) documentation

 Data types defined by W3C(World Wide Web Consortium) specifications


Basic html data types
• In HTML, the most commonly-used data types are classified under the
basic data types. There are the following four basic data types in
HTML:
Character data type - Stores single alphanumeric text, which includes
letters, numbers, symbols, space, or punctuations.
Text data type-Strings
Name data type-refer to name given to any particular datum
Number data type
Data types defined by Request for Comments (RFC) and Internet Assigned
Numbers Authority (IANA) documentation

• RFC- Request for Comments (RFC) is a formal document drafted by


the Internet Engineering Task Force (IETF) that describes the
specifications for a particular technology. (Working of Internet)
• IANA – entity that looks over global IP address allocation,
autonomous system number allocation, root zone management in the
Domain Name System (DNS), media types, and other Internet
Protocol-related symbols and Internet numbers.
there is a technical need for some key parts of the Internet to be
globally coordinated, and this coordination role is undertaken by us.
• According to the RFC and IANA documentation the following are the 4
basic data types:
• URI
• Content types
• Language code
• Character set
URI
• Refers to a set of characters used to identify a resource on the Internet.

http://john:doe@example.com:80/over/there/index.dtb;type=animel?name=
ferret#nose

The generic form of any URI is scheme:[//[user:password@]host[:port]]


[/]path[?query][#fragment]
http://john:doe@example.com:80/over/there/index.dtb;type=animel?name=ferret#nose

In the preceding example,


• http is the scheme name,
• John: doe is the user information (also known as userinfo),
• example.com is host name,
• 80 is port, and
• authority is john:doe@example.com:80.
• In addition, over/there/index.dtb; type=animel is path,
• index is the file name,
• dtb is the extension,
• type=animel? is the parameter. (Query)
• Further, ?name=ferret#isqueryand nose is the fragment.
Scheme- Specification for assigning an identifier (HTTP,FTP)

User Information – Refers personal information such as user name and


password which is used to access websites or resources

Authority- optional user information that is terminated with @ host


name and an optional port number preceded by a colon.
• Port-Refers to the optional decimal number that follows the host after semicolon.

• Path- Consists of sequence of text segments that are separated by forward slash
(/).

• File Name- Refers to any name that can be given to a targeted file. (which comes
after file name followed by dot (.))

• Query-Starts with question mark (?), when the URI requests program to run rather
than file to be accessed. Query represents the parameter to be passed into the server
side program.

• Fragment – refers to a particular point of the accessed file.


Content type / Media type/MIME
• Represents the type of the content used in an embedded or linked
resources.
• The Content-Type is used to indicate the media type of the resource.
• The media type is a string sent along with the file indicating the
format of the file.
For example, for image file its media type will be like image/png or
image/jpg, etc.
In addition ,it is not case sensitive and its syntax is divided into 2 parts
top level and bottom level. Top level is separated from bottom level using
/

(Multipurpose Internet Mail Extensions)


• Text/plain- represents a plain text

• Image/jpeg- compressed image file

• Audio/basis-audio file

• Video/mpeg-compressed video file

• Application/octet-stream-binary file
Language code
• Is used to represent the code of various literal languages, which are
used to script the html document
• It is not case sensitive and is written by using the lang attributes used
in the html elements
<html lang=“hi">
...
</html>
Screen readers supporting this tag could switch to a British accent.
List of language code
• En- English
• Hi – hindi
• El-Greek
• De- German
• Ga- Irish
Character Set
To display an HTML page correctly, the browser must know what character set
(encoding) to use.

The character set is a set of standard characters taken from several languages and
scripts of the world, and are represented with unique code points.

These code points can be defined as the unique names and integers that are
assigned to the character sets for their unique identification.
Data types defined by W3C Specifications
• W3C is an international community that develops standards to ensure
long-term growth of the Web. W3C specifies five additional data
types for HTML, which include:
• Date Time
• Red Green Blue(RGB) Triplet
• Color names
• Link types
• Media types
DATE TIME FORMAT
• Datetime uses ISO date format(ISO 8601),that is YYYY-MM-
DDThh:mm:ssTZD

• T- acts as the separator between date and time and it must be


written in capital letters.
• TZD- time zone designator
RGB Triplet
• Represents 3 standard colors which are red,green, blue
• All possible colors can be formed with combination of these 3
colors in different intensities and proportions.

All colors can be represented by a six digit hexadecimal number, such


as (xxyyzz), where:
• The first two consecutive digits (xx) of the hexadecimal number
represent red. The hexadecimal equivalence of Red color is #xx0000.
• The second two consecutive digits(yy) represent green. The
hexadecimal equivalence of green is representd by #00yy00.
• The last two digits(zz)represent blue. The hexadecimal equivalence is
represented by 0000zz.
COLOR NAMES

• In HTML, 16 colors can be called directly by their color names rather


than their hexadecimal values. This feature makes it easy for the
users of HTML to call a color by its name.
• Represents 16 color names along with their hexadecimal values:
LINK TYPES
• Link types are used to provide a variety of information to search
engines. You may use various recognized link types, with their
conventional interpretations.
• These link types are not case sensitives, which implies that you can use
both lower case and upper case characters to represent a link type.
• The whitespace characters such as space, tab, linefeed, carriage-return,
form feed, vertical-tab and new line characters are not permitted within
link types.
The link types available in HTML are as follows:

ALTERENATE- Refers to the substitute for the document in which the link occurs.

STYLE SHEET- Represents the external style sheet. You can select a style from
alternate style sheets by using the style sheet and alternate link types together.

START- Represents the first document among the collection of different


documents. The start link type provides information about the initial document
to the search engine.

NEXT- Represents the next document in the linear set of documents.


PREV- Represents the previous document in the linear set of documents.
CONTENTS- Represents the document having the table of content.
INDEX- Represents the document having the index.
GLOSSARY- Represents the document having glossary.
COPYRIGHT- Represents the document having the copyright statement.
CHAPTER- Represents the chapter of a collection of document .
SECTION- Represents the section of a collection of documents.
SUBSECTION- Represents the subsection of a collection of documents.
APPENDIX- Represents the appendix of a collection of documents.
HELP- Represents the document with the help feature.
BOOKMARK- Represents the bookmark.
MEDIA TYPES
• Media types enable you to specify how to present HTML documents on different media,
such as paper, computer’s screen or browsers.
• HTML5 allows you to use CSS properties to display the text of an HTML page in
different font types, color and font sizes for different media.
The available media types are as follows:
SCREEN- Represents a computer screen.
TTY- Represents media using a fixed pitch character grid with limited display capabilities.
TV- Represents a television.
PROJECTION- Represents a projector.
HANDHELD- Represents hand-held devices.
PRINT- Represents the print preview mode.
AURAL-Represents the speech synthesizer.
ALL- Represents the media type that is suitable for all devices.
DESCRIBING CHARACTER ENTITIES

Sometimes you need to include some special characters, such as > and < in the content of an HTML

element.

These characters are called as entities. HTML enables you to include such symbols in the content of

an element by using various character entities.


World Wide Web consortium(W3C) calls the character entities as character encodings.


There are some characters, such as Greek and Chinese, Which do not appear on the keyboard of

the user. Therefore, you cannot write them directly from the Keyword.


However, you can overcome this problem by using character entities in an HTML document.
The character entity is composed of the following parts in the sequential
manner.
1. Ampersand symbol(&)
2. Name of the entity
3. A terminating semicolon

The following code snipper shows an example of a character entity &1t;


The preceding code snipper represents the character entity of a less
than(<) symbol.
CHARACTER
NAME
LIST OF CHARACTER ENTITIES:
CHARACTER NAME CHARACTER CHARACTER
ENTITIES
LESS THAN SIGN < &lt;

GREATER THAN > &gt;


SIGN
AMPERSAND SIGN & &amp;

QUOTATION MARK “ &quot;

APOSTROPHE ‘ &apos;
UNDERSTANDING HORIZONTAL RULES

 Horizontal rules are used to draw horizontal lines across the browser
window.
 It is used to divide an HTML page into different horizontal sections.
 Horizontal rules are required when you need to display different types of
content in the same HTML page in an distinct manner.
 The <HR> element is used to represent the horizontal rule.
<HR>
UNDERSTANDING LINE BREAKS:
while writing text, it may be required to Have a line break at certain points .
 For example, a situation where you need line break is when you write an
address .

Note: that line breaks are not used to create another paragraph.
 They are only used to break a continuing line.
The <BR> element is used to define a line break in an HTML document.
UNDERSTANDING A PARAGRAPH:
• Generally, a new paragraph is started by pressing the ENTER key.
• However, in HTML, the browser does not understand the space
created by the ENTER key.
• Therefore, a special element or tag, known as the paragraph
element(p element) has to be inserted at the point from where you
want to begin a new paragraph.
• The paragraph tag is a container tag, which means it has both the
opening<p>and closing </p> tags.
UNDERSTANDING CITATIONS,QUOTATIONS AND DEFINITIONS:
• In HTML, a citations is used to display text in format that is different from
normal text. The text embedded within the citation element is normally displayed
in the italic form. A citation is normally required to quote statement or remarks of
an author. The citation element is defined by an opening <CITE> tag.
• The quotation tag is used to quote certain text within the quotation marks.
The quotation starts with an operating tag <q> and ends with a closing tag</q>.
• The definition element is used to list the definition of various terms.
The definition tag is composed of the following three tags:
DL- Represents a definition list that is used to list the number of definitions.
DT- Represents the terms in a definition.
DD- Represents definitions of the terms.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Coffee
Black hot drink
Milk
White cold drink

You might also like