FORMATTING

TEXT
Text
› It is the most important aspect of any website.
› It also provides the most valuable information found on the
web and is the most important feature when it comes to
“searchability” – it is a term that refers to how easy it is to
find your web page in search engines.
Two (2) types of Fonts
1. Serif font – it starts and ends with a stroke.
› Examples: Times New Roman, Georgia, and Cambria

2. Sans Serif – it does not have strokes.

› Examples: Arial, and Verdana
Two (2) types of Fonts
-in terms of the space that fonts occupy within a web page.

1. Proportional font – it occupies only as much

space as needed within a given space.
2. Monospaced font – it occupies the same amount
of space regardless of its actual width.
› Examples: Courier and Courier New

≈ Times New Roman and Arial – are the most

popular default fonts.
Formatting Elements
-these are presentational and or visual.
The commonly used formatting inline elements are:
1. Bold
2. Italics
3. Small
4. Subscript
5. Superscript
Formatting Elements
-these are presentational and or visual.
The commonly used formatting inline elements are:
1. Bold
2. Italics
3. Small
4. Subscript
5. Superscript
Tag
1. <b> </b> (Bold)
2. <i> </i> (Italics)
3. <small> </small> (Small)
4.  (Superscript)
5. <u> </u> (Underline)
Description
This tag should only be used
when there is no other tags
available.
It defines a part of text in an
Italicized form.
It defines smaller text.
The text is placed below the
baseline.
This can be used to express a
chemical symbol such as H20.
It underlines a word or group of
words.
This tag is not advisable as it can
Phrasing Elements
- these are used for specific purpose.
- it is about semantics, which refers to the
meaning or substance of a phrase or word.
The commonly used formatting inline elements are:
1. Code
2. Cite
3. Strong
4. Emphasis
Emphasized Text
› <em> and <strong>
- These are two phrasing elements that are used to emphasize the
meaning or importance of a word or group of words.

Tag Description
1. <em> </em> It is used to emphasize text,
appearance is usually italicized.
2. <strong> </strong> It is used to give stronger
emphasis and greater
importance to text.
Emphasized Text
› <em> and <strong>
- These are two phrasing elements that are used to emphasize the
meaning or importance of a word or group of words.

Tag Description
1. <em> </em> It is used to emphasize text,
appearance is usually italicized.
2. <strong> </strong> It is used to give stronger
emphasis and greater
importance to text.
<em> vs. <i>
1. <i> - it is used to italicize technical terms, scientific
names, foreign words, and other similar terms.

2. <em> - it is used to emphasize a message.

<strong> vs. <b>
1. <b> - it is intended to make characters in a paragraph
or sentence stand out even if these are not important.

2. <strong> - it is used to give greater importance to a

phrase or group of words in a paragraph or sentence.
Editing Marks
Tag Description
1. <del> </del> It indicates deleted text during
corrections.
The deleted text appears with a
strike-through.
2. <ins> </ins> It indicates text inserted
during corrections or changes.
The text inserted appears with
an underline.
Computer Output Tags
› The output of these tags are uses a fixed-width font such as
courier, which is also known as mono-spaced or mono-typed font.
› The use of these elements make it easier to differentiate parts of
the content from ordinary readable text.

Tag Description
1. <code> </code> This code is strictly used in the
definition od computer code
text like HTML.
2. <samp> </samp> It is similar to <code>, but it
refers mainly to the output of
the computer code.
Tag Description
3. <kbd> </kbd> It is use to distinguish keyboard
text from non-keyboard text.
It refers to text typed in by a
user.
4. <var> /<var> It is used to indicate that a
particular text in the code is a
variable.
It typically used when writing
JavaScript codes.
Citations, Quotations, &
Definition Tags
› Citations – are used to give credit to a reference source
used on a web page.
› Quotations – it represents information that does not
belong to the web page author.
› Definition Tags – are used for terms and definitions.
Tag Description
1. <abbr> </abbr> It indicates acronym or
abbreviation.
For example:
<abbr title=“Hyper Text Mark
Up Language”> HTML </abbr>
2. <bdo> </bdo> • It is used to override the
default direction of text that
is left to right; often use for
languages such as Hebrew and
Arabic.
• It uses the attributes <bdo
dir=“rtl”> to go to right to
left.
Tag Description
3. <q> </q> • It is used only for short
quotes.
• It uses the attribute <q
cite=“url”>.
4. <cite> </cite> • It is used to define the title
of a book or painting or any
form of work used in a web
page.
• Do not be confused with the
tags <blockquote> and <q>
5. <dfn> </dfn> • It is used to enclose a term
so as to stand out from the
definition it follows.
Preformatted Text
› The use of <pre> refers to preformatted text in a web
page.
› The output will appear as mono-spaced and all spaces
are counted as is.