HTML ATTRIBUTES AND TAGS IN DEPTH

Agenda

 Anatomy of HTML Tags

 Attributes
 Important Tags
 Quotation, Abbreviation and Citations
 Text Tags
 Types of List Tags
 Nested list

Page 1
Anatomy of HTML Tags

Attributes
1 Properties associated with eachtag.

2 <tag name=”value”></tag> is thestructure.

1 GlobalAttribute:Title: Add extra information(hover).

2 Style: Add styleinformation(font,background,color,size).

3 <img src=”url”width=”100”>src is the attribute used in image tag to definepath.

4 Width is attribute used to define width inpixels.

5 Alt i.e alternate text if image is notloaded.

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

8 href used to define path of thelink.

Page 2
Basic Tags
1 Enclosedwithin<>

2 Different tags render different meaning.

1 <title>tagWhatever is written this tag comes up in the web page’s tab.

2 Defines the title of thepage.

3 Syntax: <title>Home</title>

4 <p>tagDefines theparagraph.

5 Syntax:<p > This is our first Paragraph</p>

<H1> -<H2>
Headings Are Important

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

<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 in a fixed-pitch

is displayed in a fixed-width font, and it preserves both spaces and line breaks

font, and it preserves

Page 3
both spaces and line breaks

Quotations, Abbreviations and Citations

1. <blockquote>
To define along quotation or block quotation, <blockquote> tags are used.

•<blockquote> tag indents the quotation in browsers

2. <q>
The HTML <q> tag defines a short quotation.

•Browsers normally insert quotation marks around the quotation.

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

4. <address>
The HTML <address> tag defines the contact information for the author/owner of a
document or an article.

contact information can be an email address, URL, physical address, phone number,
social media handle, etc.

5. <cite>
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.).

6. <bdo>
BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction.

Page 4
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>
 DE 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 issued for definition term<dfn> and </dfn>

List of Self closing/Empty tags

1 <hr> tag Stands for horizontal rule.

2 Dividing the webpage.

3 <br> tag Stands for break line.

4 Moving to next line.

5 <img> tag To add images in the webpage.

Some more Tags

<div> and <span>tagsBoth of these are used to group different tags.

Acts like acontainer.

0 Effective while styling.

Difference <div> is block level and <span> is inline level.

<img> tagUsed to add images in a webpage.

1 Syntax: <imgsrc=”url”>

2 Self closingtag.

<a> tagsUsed to add links in a webpage.

Page 5
4 <a href=”url”> Name of the link</a>

List Tags
1

<ol> tagStands for orderedlist.

2 To define series of events that take place in someorder.

3 Example making a tea (like a flowchart).

4 <ol>.........</ol>

<ul> tagStands for unorderedlist.

6 To define series of events that take place where order is not important.

7 Example yourhobbies.

8 <ul>.........</ul>

<li> tagDefines the list item.

0 Used inside the oland ultag to define the events.

1 <li></li>

Page 6
Nested List

Example 2 :-

Page 7