HTML ATTRIBUTES AND TAGS IN DEPTH

Agenda

1 Anatomy of HTML Tags 7 Nested List

2 Attributes

3 Important Tags

4 Quotation, Abbreviation and Citations

5 Text Tags

6 Types of List Tags

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
 Anatomy of
HTML Tags

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
 Anatomy of HTML Tags
Element

Attribute

Attribute name Attribute value

<a href =“https://www.facebook.com/”> Welcome to Facebook !! </a>

Opening Tag Content Closing Tag

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
 Attributes

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Attributes
● Properties associated with each tag.

● <tag name=”value”></tag> is the structure.

● Global Attribute:
○ Title : Add extra information(hover).
○ Style : Add style information(font, background, color, size).

● <img src=”url” width=”100”>

○ src is the attribute used in image tag to define path.
○ Width is attribute used to define width in pixels.
○ Alt i.e alternate text if image is not loaded.

● <a href=”url”> Name of the link </a>

● href used to define path of the link.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
 Basic Tags

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Basic Tags
● Enclosed within <>

● Different tags render different meaning .

● <title> tag
○ Whatever is written this tag comes up in the web page’s tab.
○ Defines the title of the page.
○ Syntax: <title>Home</title>

● <p> tag
○ Defines the paragraph.
○ Syntax:<p > This is our first Paragraph </p>

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
<H1> - <H2>

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.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
<pre>
The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font, and the text preserves both
spaces and line breaks. The text will be displayed exactly as written in the HTML source
code.

<pre>
<pre>
Text in a pre element
This text is
is displayed in a fixed-width
in a fixed-pitch
font, and it preserves
font, and it preserves both
both spaces and
spaces and line breaks
line breaks
</pre>
</pre>

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Quotations, Abbreviations and Citations

• To define along quotation or block quotation, <blockquote>

1. <blockquote> tags are used.
•• <blockquote>
The HTML <q>tag tagindents
definesthe quotation
a short in browsers
quotation.
2. <q>
• Browsers normally insert quotation marks around the
The HTML <abbr> tag defines an abbreviation or an
• quotation.
3. <abbr> acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
• Marking
The HTML abbreviations
<address> tagcandefines
give useful information
the contact to
information
4. <address> browsers, translation of
for the author/owner systems and search-engines.
a document or an article.
HTML <cite>
• The contact tag defines
information can bethe
antitle of a
email creativeURL,
address, work
5. <cite> (e.g. a book,
physical a poem,
address, phonea song,
number,a movie,
social amedia
painting, a etc.
handle,
• sculpture,
BDO stands etc.).
for Bi-Directional Override.
6. <bdo>
• The HTML <bdo> tag is used to override the current text
direction.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Text Tags
B element displays text in bold  <b> and </b>
I element displays text in italics  <i> and </i>
SMALL element makes the text appear smaller in browser  <small> and </small>
U element underlines a text  <u> and </u>
DEL element encloses deleted text  <del> and </del>
INS element encloses inserted text  <ins> and </ins>
STRONG element emphasizes the text  <strong> and </strong>
SUB element displays a text as subscript  _and
SUP element displays a text as superscript  ^and
em is used for emphasized text  <em> and </em>
dfn is used for definition term  <dfn> and </dfn>

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
List of Self closing/Empty tags

● <hr> tag
○ Stands for horizontal rule.
○ Dividing the web page.

● <br> tag
○ Stands for break line.
○ Moving to next line.

● <img> tag
○ To add images in the web page.

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Some more Tags
● <div> and <span> tags
○ Both of these are used to group different tags .
○ Acts like a container.
○ Effective while styling.
○ Difference <div> is block level and <span> is inline level.

● <img> tag
○ Used to add images in a web page.
○ Syntax: <img src=”url”>
○ Self closing tag.

● <a> tags
○ Used to add links in a web page.
○ <a href=”url”> Name of the link </a>

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
 List Tags

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
List Tags
● <ol> tag
○ Stands for ordered list.
○ To define series of events that take place in some order.
○ Example making a tea (like a flow chart).
○ <ol>.........</ol>

● <ul> tag
○ Stands for unordered list.
○ To define series of events that take place where order is not important.
○ Example your hobbies.
○ <ul>.........</ul>

● <li> tag
○ Defines the list item.
○ Used inside the ol and ul tag to define the events.
○ <li></li>
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
List Tags

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Nested List
Example 1 :-

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Nested List
Example 2 :-

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
 Thank You

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited