0% found this document useful (0 votes)
3 viewsLecture 6 - HTML Phrase Tags
The document discusses various HTML phrase tags and their uses including <em>, <strong>, <mark>, <abbr>, <acronym>, <bdo>, <dfn>, <blockquote>, <q>, <cite>, <code>, <kbd>, <var>, <samp> and <address>. It also covers HTML comments and how to write valid single-line and multi-line comments.
Uploaded by
Tanveer Ahmed HakroCopyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
3 viewsLecture 6 - HTML Phrase Tags
The document discusses various HTML phrase tags and their uses including <em>, <strong>, <mark>, <abbr>, <acronym>, <bdo>, <dfn>, <blockquote>, <q>, <cite>, <code>, <kbd>, <var>, <samp> and <address>. It also covers HTML comments and how to write valid single-line and multi-line comments.
Uploaded by
Tanveer Ahmed HakroCopyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
/ 53
HTML Phrase Tags
Dr. Fareed Ahmed Jokhio
HTML Phrase Tags
• The phrase tags have been designed for
specific purposes, though they are displayed
in a similar way as other basic tags like <b>,
<i>, <pre>, and <tt>.
Emphasized Text
• Anything that appears within <em>...</em> element is
displayed as emphasized text
• <html>
• <head>
• <title>Emphasized Text Example</title>
• </head>
• <body>
• <p>The following word uses a <em>emphasized</em>
typeface.</p>
• </body>
• </html>
Emphasized Text
• This will produce following result:
Marked Text
• Anything that appears within <mark>...</mark> element, is
marked with yellow ink.
• <html>
• <head>
• <title>Marked Text Example</title>
• </head>
• <body>
• <p>The following word has been <mark>marked</mark> with
yellow</p>
• </body>
• </html>
Marked Text
• This will produce following result:
Strong Text
• Anything that appears within <strong>...</strong> element is
displayed as important text.
• <html>
• <head>
• <title>Strong Text Example</title>
• </head>
• <body>
• <p>The following word uses a <strong>strong</strong>
typeface.</p>
• </body>
• </html>
Strong Text
• This will produce following result:
Text Abbreviation
• You can abbreviate a text by putting it inside
opening <abbr> and closing </abbr> tags.
• If present, the title attribute must contain this
full description and nothing else.
Text Abbreviation
• <html>
• <head>
• <title>Text Abbreviation</title>
• </head>
• <body>
• <p>My best friend's name is <abbr
title="Abhishek">Abhy</abbr>.</p>
• </body>
• </html>
Text Abbreviation
• This will produce following result:
Acronym Element
• The <acronym> element allows you to
indicate that the text between <acronym> and
</acronym> tags is an acronym.
• At present, the major browsers do not change
the appearance of the content of the
<acronym> element.
Acronym Element
• <html>
• <head>
• <title>Acronym Example</title>
• </head>
• <body>
• <p>This chapter covers marking up text in
<acronym>XHTML</acronym>.</p>
• </body>
• </html>
Acronym Element
• This will produce following result:
Text Direction
• The <bdo>…</bdo> element stands for Bi-
Directional Override and it is used to override
the current text direction.
Text Direction
• <html>
• <head>
• <title>Text Direction Example</title>
• </head>
• <body>
• <p>This text will go left to right.</p>
• <p><bdo dir="rtl">This text will go right to left.</bdo></p>
• </body>
• </html>
Text Direction
• This will produce following result:
Special Terms
• The <dfn>….</dfn> element (or HTML Definition
Element) allows you to specify that you are
introducing a special term.
• Its usage is similar to italic words in the midst of
a paragraph.
• Typically, you would use the <dfn> element the
first time you introduce a key term.
• Most recent browsers render the content of a
<dfn> element in an italic font.
Special Terms
• <html>
• <head>
• <title>Special Terms Example</title>
• </head>
• <body>
• <p>The following word is a <dfn>special</dfn>
term.</p>
• </body>
• </html>
Special Terms
• This will produce following result:
Quoting Text
• When you want to quote a passage from
another source, you should put it in between
<blockquote>...</blockquote> tags.
• Text inside a <blockquote> element is usually
indented from the left and right edges of the
surrounding text, and sometimes uses an
italicized font.
Quoting Text
• <html>
• <head>
• <title>Blockquote Example</title>
• </head>
• <body>
• <p>The following description of XHTML is taken from the W3C Web
site:</p>
• <blockquote>XHTML 1.0 is the W3C's first Recommendation for
XHTML, following on from earlier work on HTML 4.01, HTML 4.0,
HTML 3.2 and HTML 2.0.</blockquote>
• </body>
• </html>
Quoting Text
• This will produce following result:
Short Quotations
• The <q>…</q> element is used when you want to add a
double quote within a sentence.
• <html>
• <head>
• <title>Double Quote Example</title>
• </head>
• <body>
• <p>Amit is in Spain, <q>I think I am wrong</q>.</p>
• </body>
• </html>
Short Quotations
• This will produce following result:
Text Citations
• If you are quoting a text, you can indicate the
source placing it between an opening <cite>
tag and closing </cite> tag.
• As you would expect in a print publication, the
content of the <cite> element is rendered in
italicized text by default.
Text Citations
• <html>
• <head>
• <title>Citations Example</title>
• </head>
• <body>
• <p>This HTML tutorial is derived from <cite>W3
Standard for HTML</cite>.</p>
• </body>
• </html>
Text Citations
• This will produce following result:
Computer Code
• Any programming code to appear on a Web
page should be placed inside
<code>...</code> tags.
• Usually the content of the <code> element is
presented in a monospaced font, just like the
code in most programming books.
Computer Code
• <html>
• <head>
• <title>Computer Code Example</title>
• </head>
• <body>
• <p>Regular text. <code>This is code.</code> Regular
text.</p>
• </body>
• </html>
Computer Code
• This will produce following result:
Keyboard Text
• When you are talking about computers, if you
want to tell a reader to enter some text, you
can use the <kbd>…</kbd> element to
indicate what should be typed in, as in this
example.
Keyboard Text
• <html>
• <head>
• <title>Keyboard Text Example</title>
• </head>
• <body>
• <p>Regular text. <kbd>This is inside kbd
element</kbd> Regular text.</p>
• </body>
• </html>
Keyboard Text
• This will produce following result:
Programming Variables
• This element is usually used in conjunction
with the <pre> and <code> elements to
indicate that the content of that element is a
variable.
Programming Variables
• <html>
• <head>
• <title>Variable Text Example</title>
• </head>
• <body>
• <p><code>document.write("<var>user-name</
var>")</code></p>
• </body>
• </html>
Programming Variables
• This will produce following result:
Program Output
• The <samp>…</samp> element indicates
sample output from a program, and script etc.
• Again, it is mainly used when documenting
programming or coding concepts.
Program Output
• <html>
• <head>
• <title>Program Output Example</title>
• </head>
• <body>
• <p>Result produced by the program is <samp>Hello
World!</samp></p>
• </body>
• </html>
Program Output
• This will produce following result:
Address Text
• The <address>…</address> element is used to contain any
address.
• <html>
• <head>
• <title>Address Example</title>
• </head>
• <body>
• <address>388A, Road No 22, Jubilee Hills -
Hyderabad</address>
• </body>
• </html>
Address Text
• This will produce following result:
HTML Comments
• Comment is a piece of code which is ignored by
any web browser.
• It is a good practice to add comments into your
HTML code, especially in complex documents,
to indicate sections of a document, and any
other notes to anyone looking at the code.
• Comments help you and others understand
your code and increases code readability.
HTML Comments
• HTML comments are placed in between <!-- ...
--> tag.
• So any content placed within <!-- ... --> tag will
be treated as comment and will be completely
ignored by the browser.
HTML Comments
• <html>
• <head> <!-- Document Header Starts -->
• <title>This is document title</title>
• </head> <!-- Document Header Ends -->
• <body>
• <p>Document content goes here.....</p>
• </body>
• </html>
HTML Comments
• This will produce following result without
displaying the content given as a part of
comments:
Valid vs Invalid Comments
• Comments do not nest which means a
comment cannot be put inside another
comment.
• Second the double-dash sequence "--" may
not appear inside a comment except as part of
the closing --> tag.
• You must also make sure that there are no
spaces in the start-of-comment string.
Valid vs Invalid Comments
• Here given comment is a valid comment and will be wiped off by
the browser.
• <html>
• <head>
• <title>Valid Comment Example</title>
• </head>
• <body>
• <!-- This is valid comment -->
• <p>Document content goes here.....</p>
• </body>
• </html>
Valid vs Invalid Comments
• But following line is not a valid comment and will be displayed by the
browser.
• This is because there is a space between the left angle bracket and the
exclamation mark.
• <html>
• <head>
• <title>Invalid Comment Example</title>
• </head>
• <body>
• < !-- This is not a valid comment -->
• <p>Document content goes here.....</p>
• </body>
• </html>
Valid vs Invalid Comments
• This will produce following result:
Multiline Comments
• So far we have seen single line comments, but
HTML supports multi-line comments as well.
• You can comment multiple lines by the special
beginning tag <!-- and ending tag --> placed
before the first line and end of the last line as
shown in the given example below.
Multiline Comments
• <head>
• <title>Multiline Comments</title>
• </head>
• <body>
• <!--
• This is a multiline comment and it can
• span through as many as lines you like.
• -->
• <p>Document content goes here.....</p>
• </body>
• </html>
Multiline Comments
• This will produce following result:
