Unit2 - L2 - HTML Elements

HTML Elements
Html Elements
These elements fall into three distinct groups:

• block-level elements,
• text-level elements,
• character entities.
The elements are presented from top to bottom, from
larger, block-oriented structures (such as paragraphs),
to smaller units (such as the actual character entities)
Core Attributes
HTML core attributes are

• ID,
• CLASS,
• STYLE,
• TITLE.
ID Attribute
The ID attribute is used to set a unique name for a

tag in a document. For example, using the
paragraph element, <P>,
<P ID="FirstParagraph">This is the first paragraph

of text.</P>
CLASS Attribute
The CLASS attribute is used to indicate the class or classes that a
tag may belong to. Like ID, CLASS is used to associate a tag with
a name, so
<P ID="FirstParagraph" CLASS="important">
This is the first paragraph of text.
</P>
not only names the paragraph uniquely as FirstParagraph, but also
indicates that this paragraph belongs to a class grouping called
important. Class names don’t have to be unique to a document
Style Attribute
The STYLE attribute is used to add style sheet

information directly to a tag. For example,
<P STYLE="font-size: 18pt">This is the first
paragraph of text.</P>
sets the font size of the paragraph to be 18 point.
Title Attribute
The TITLE is used to provide advisory text about a tag or its contents.
In the case of
<P TITLE="Introductory paragraph">
This is the first paragraph of text.
</P>
the TITLE attribute is set to indicate that this particular paragraph is the
introductory paragraph. Browsers (currently, only Internet Explorer 4
and higher) may display this advisory text in the form of a tool tip,
which may be useful to provide context sensitive help, extra
information, or other advice to the user.
Language Attributes
One major goal of HTML 4 was to provide better support for languages
other than English. The use of other languages may require that text
direction be changed from left to right across the screen to right to left.
Nearly all HTML elements now support the DIR attribute, which can be
used to indicate text direction as either LTR (left to right) or RTL (right
to left). For example, This is a right-to-left paragraph.
<P dir=“RTL”> This is a right-to-left paragraph.</P>
<p lang=“fr”> C’est Francais.</p>
<p lang=“en”> This is English.</p>
Block-Level Elements
• Block-level elements define structural content blocks, such as

paragraphs or lists.
• If a document is written carefully in a block style, it may be possible to

improve its machine readability.
Figure: Block Structured Document
Headings
The heading elements are used to create “headlines” in documents. Six different levels of headings are
supported: <H1>, <H2>, <H3>, <H4>, <H5>, and <H6>. These range in importance from <H1>, the most
important, to <H6>, the least important.
<HTML>
<HEAD>
<TITLE>Heading Example</TITLE>
</HEAD>
<BODY>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
</BODY>
</HTML>
Align Attribute
<HTML>
<HEAD>
<TITLE>Heading Alignment Example</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="left">Aligned Left</H1>
<H1 ALIGN="center">Aligned Center</H1>
<H1 ALIGN="right">Aligned Right</H1>
</BODY>
</HTML>
Paragraph
<HTML>
<HEAD>
<TITLE>Paragraph Example</TITLE>
</HEAD>
<BODY>
<P>This is the first paragraph in the example about the P tag.
There really isn't much to say here.</P>
<P ALIGN="center">This is the second paragraph. Again, more of the same. This time the
paragraph is aligned in the center. This might not be such a good idea as it makes the text
hard to read.</P>
<P ALIGN="right">Here the paragraph is aligned to the right. Right-aligned text is also
troublesome to read. The rest of the text of this paragraph is of little importance.</P>
<P ALIGN="justify">Under HTML 4.0-compliant browsers, you are able to justify text. As you
may notice, the way browsers tend to justify text is sometimes imprecise. Furthermore, not all
browsers support this attribute value.</P>
</BODY>
</HTML>
Center and Division Example
<HTML>
<HEAD>
<TITLE>Center and Division Example</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>This heading is centered.</H1>
<P>This paragraph is also centered.</P>
</CENTER>
<BR><BR>
<DIV ALIGN="right">
<H1>Division Heading</H1>
<P>Many paragraphs and other block elements can be affected by a DIV at once.</P>
<P>Notice all the paragraphs are right aligned.</P>
</DIV>
</BODY>
</HTML>
Block Quotes
• Occasionally, you may want to quote a large body of text to make it
stand out from the other text. The <BLOCKQUOTE> element provides
a facility to enclose large block quotations from other works within a
document.
• Though the element is logical in nature, enclosing text within
<BLOCKQUOTE> and </BLOCKQUOTE> usually indents the blocked
information. Like a <P> element, text within beginning and ending
• <BLOCKQUOTE> elements ignores all spacing, tabs, and returns, and
requires the use of <BR> or other elements to modify line wrapping
and spacing.
Example
<HTML>
<HEAD>
<TITLE>Blockquote Example</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center">Big Company Press Quote</H1>
<P>See the comments the press has about Big Company, Inc. and our great green gadgets:</P>
<BLOCKQUOTE>
"Big Company's Green Gadget is by far the best fictitious product ever produced! Gadget lovers and haters alike will
marvel at the
sheer uselessness of the Green Gadget. It's a true shame that the Green Gadget is limited only to HTML examples."
<BR><BR>
--Matthew J. Foley, Useless Products Magazine
</BLOCKQUOTE>
<P>With kudos like this, you need to make sure to buy your Green Gadget today!</P>
</BODY>
</HTML>
Preformatted Text
• Occasionally, spacing, tabs, and returns are so important in text that
HTML’s default behavior of disregarding them would ruin the text’s
meaning. In such cases, you may want to preserve the intended
formatting by specifying the text to be preformatted.
• This situation requires an HTML directive that indicates the
preservation of format. The <PRE> and </PRE> tags can be used to
surround text that shouldn’t be formatted by the browser. The text
enclosed within the <PRE> tags
• The browser generally renders the preformatted text in a
monospaced font, usually Courier. Some text formatting, such as bold,
italics, or links, can be used within the <PRE> tags.
<HTML>
<HEAD>
<TITLE>PRE Example</TITLE>
</HEAD>
<BODY>
<PRE>
This is P R E F O R M A T T E D
T
E
X
T.
SPACES are ok! So are RETURNS!
</PRE>
<BR><BR>
<P>
This is NOT P R E F O R M A T T E D
T
E
X
T.
SPACES and RETURNS are lost.
</P>
</BODY>
</HTML
Horizontal Rules
• As sections are added to an HTML document, breaking up the

document into visually distinct regions often is useful. A horizontal
rule, indicated by the <HR> element, is a block-level element that
serves this purpose.
• The <HR> element is an empty element, because it has no close tag
and encloses no data. Adding an <HR> element between two
paragraphs provides a simple way to put a horizontal rule between
two sections
<HTML>
<HEAD>
<TITLE>Horizontal Rule Example</TITLE>
</HEAD>
<BODY>
<P>Size of 10</P>
<HR SIZE="10">
<P>Width of 50% and no shading</P>
<HR WIDTH="50%" NOSHADE>
<P>Width of 200 pixels, size of 3 pixels, and no shading</P>
<HR WIDTH="200" SIZE="3" NOSHADE><P>Width of 100, aligned right</P>
<HR ALIGN="right" WIDTH="100">
<P>Width of 100, aligned left</P>
<HR ALIGN="left" WIDTH="100">
<P>Width of 100, aligned center</P>
<HR ALIGN="center" WIDTH="100">
</BODY>
</HTML>
HTML Element Syntax
• An HTML element is an individual component of an HTML document.

It represents semantics, or meaning. For example, the title element
represents the title of the document.
• Most HTML elements are written with a start tag (or opening tag) and
an end tag (or closing tag), with content in between. Elements can
also contain attributes that defines its additional properties.
HTML Element Syntax Illustration
HTML Tags Vs Elements
• Technically, an HTML element is the collection of start tag, its

attributes, an end tag and everything in between. On the other hand
an HTML tag (either opening or closing) is used to mark the start or
end of an element, as you can see in the above illustration.
• However, in common usage the terms HTML element and HTML tag
are interchangeable
Case Insensitivity in HTML Tags and Attributes
In HTML, tag and attribute names are not case-sensitive (but most
attribute values are case-sensitive). It means the tag <P>, and the tag
<p> defines the same thing in HTML which is a paragraph.
Empty HTML Elements
• Empty elements (also called self-closing or void elements) are not

container tags — that means, you can not write
<hr>some content</hr> or
<br>some content</br>.
• A typical example of an empty element, is the <br> element, which

represents a line break. Some other common empty elements are
<img>, <input>, <link>, <meta>, <hr>, etc.
Nesting HTML Elements
• Most HTML elements can contain any number of further elements (except empty
elements), which are, in turn, made up of tags, attributes, and content or other
elements.
• The following example shows some elements nested inside the <p> element
1. <p>Here is some <b>bold</b> text.</p>
2. <p>Here is some <em>emphasized</em> text.</p>
3. <p>Here is some <mark>highlighted</mark> text.</p>.

Writing Comments in HTML
• Comments are usually added with the purpose of making the source
code easier to understand. It may help other developer (or you in the
future when you edit the source code) to understand what you were
trying to do with the HTML. Comments are not displayed in the
browser.
• An HTML comment begins with , as shown in the
example below:


Physical Text formatting elements
Logical Text formatting elements
Difference between <strong> and <b> tag
Both <strong> and <b> tags render the enclosed text in a bold typeface
by default, but the <strong> tag indicates that its contents have strong
importance, whereas the <b> tag is simply used to draw the reader's
attention without conveying any special importance.
Difference between <em> and <i> tag
Similarly, both <em> and <i> tags render the enclosed text in italic type
by default, but the <em> tag indicates that its contents have stressed
emphasis compared to surrounding text, whereas the <i> tag is used for
marking up text that is set off from the normal text for readability
reasons, such as a technical term, an idiomatic phrase from another
language, a thought, etc.
Character Entities
Example
<HTML>
<HEAD>
<TITLE>Character Entities Example</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center">Big Company Inc.'s Tagging Products</H1>
<HR>
<P>Character entities like © allow users to insert special characters like
©.</P>
<P>One entity that is both useful and abused is the nonbreaking space.</P>
<BR><BR>
Inserting spaces is easy with  <BR>
Look: S P A
C E S.<BR>
<HR>
<ADDRESS>
Contents of this page © 1999 Big Company, Inc.<BR> The
<B>Wonder Tag</B> <P> is a registered trademark
of Big Company, Inc.
</ADDRESS>
</BODY>
</HTML>

Unit2 - L2 - HTML Elements

Uploaded by

Copyright:

Available Formats

Unit2 - L2 - HTML Elements

Uploaded by

Document Information

Original Title

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

Unit2 - L2 - HTML Elements

Uploaded by

Copyright:

Available Formats

HTML Elements

These elements fall into three distinct groups:

HTML core attributes are

The ID attribute is used to set a unique name for a

<P ID="FirstParagraph">This is the first paragraph

The STYLE attribute is used to add style sheet

• Block-level elements define structural content blocks, such as

• If a document is written carefully in a block style, it may be possible to

• As sections are added to an HTML document, breaking up the

• An HTML element is an individual component of an HTML document.

• Technically, an HTML element is the collection of start tag, its

• Empty elements (also called self-closing or void elements) are not

• A typical example of an empty element, is the <br> element, which

1. <p>Here is some <b>bold</b> text.</p>

2. <p>Here is some <em>emphasized</em> text.</p>

3. <p>Here is some <mark>highlighted</mark> text.</p>.

You might also like