Week 4 Lecture Part 2

WEEK 4
FORMATTING
HTML
CONTENT

THE <P> TAG
• HTML content is very different than working in an application
like InDesign, MS Word or other word processor
• By adding a couple of additional tags to our basic HTML
structure, we can start to build and format content.
• When adding paragraphs of copy within a web document you
have to use the opening and closing <p> </p> tags to create
the separation between sections of copy
• Example:
<p>Everything between the opening and closing <p> tags is
being described to the web browser as a paragraph</p>
• <p> </p> = Used to create paragraphs, require an opening and
closing tag

THE <P> TAG
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Just some random text to make a paragraph. Just some
random text to make a paragraph.</p>
random text to make a paragraph</p>
</body>
</html>

THE <H1> TO <H6> TAGS
• HTML has 6 available heading tags <h1> to <h6>
• They are tag pairs, meaning they have an opening tag and a
matching closing tag

• Heading tags define the headings and sub-headings in your
page
• They enable the user to quickly understand what they're
reading and how the sections of content relates to each other.
• Heading tags should be used in descending order as intended
and only used for headings
• Headings should not be used to format other content (eg.
make text larger)
• The first heading tag <h1> is the biggest and boldest, it should
only be used once per page
• The rest of the content uses sub-headings: <h2> - <h6>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Here is a heading to my content</h1>
<h2>Here is a sub heading to my content</h2>
</body>
</html>

THE <STRONG> TAG
• The <strong> tag is used to make portions or single words
strong, or bold
• Although there is a bold tag available in HTML <b> the newer
versions of HTML (HTML 5) requires we use <strong> instead of
<b> because it is more semantic (descriptive) to the web browser
• The <strong> tag require pairs - an opening tag and a matching
closing tag
Example:
<strong>This text now become strong or bold</strong>
• The <strong> tag is usually “nested” inside of another tag and it
can describe 1 word or multiple words as being strong

THE <STRONG> TAG
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Just some <strong>random text</strong>to make a
paragraph. Just some random text to make a paragraph. Just
some random text to make a paragraph.</p>
</body>
</html>

THE <EM> TAG
• The <em> tag is used to make portions or single words
emphasized or italicized
• Although there is a italics tag available in HTML <i> the newer
versions of HTML (HTML 5) requires we use <em> instead of <i>
because it is more semantic (descriptive) to the web browser
• The <strong> tag require pairs - an opening tag and a matching
closing tag
Example:
<em>This text now emphasized</em>
• The <em> tag is usually “nested” inside of another tag and it can
describe 1 word or multiple words as being emphasized

THE <EM> TAG
<!DOCTYPE html>
<html>
<head>
</head>
<body>
paragraph. Just some Just some <em>random text to</em>
make a paragraph. Just some random text to make a
paragraph.</p>
</body>
</html>

THE <BR /> TAG
• The <br /> tag is used to insert a lines break in text
• The <br /> tag is a “self closing” or “self terminating” tag which means it does
not require a closing tag
• You may also see it written as <br> (without the /> on the right)
Example (code):
<p>This is some text that will be <br />broken to another line with the break <br
/>tag.</p>
How it will display:
This is some text that will be
broken to another line with the break tag.
• The <br /> tag is usually “nested” inside of another tag to break paragraph text
to new lines but can be used on its own to create space between elements

THE <BR /> TAG
<!DOCTYPE html>
<html>
<head>
</head>
<body>
make a paragraph.
<br />Just some random text to make a paragraph.</p>
</body>
</html>

THE <HR /> TAG
• The <hr /> tag is used to insert a horizontal rule usually to indicate a new section
of text or for visual interest
• The <hr /> tag is a “self closing” or “self terminating” tag which means it does not
require a closing tag
Example (code):
<h1>This is a heading</h1>
<hr />
<p>This is a paragraph of text</p>
How it will display:
This is a heading
This is a paragraph of text

THE <HR /> TAG
<!DOCTYPE html>
<html>
<head>
</head>
<body>
make a paragraph.</p>
<hr />
<p>Just some random text to make a paragraph.</p>
</body>
</html>

Week 4 Lecture Part 2

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Week 4 Lecture Part 2

Similar to Week 4 Lecture Part 2 (20)

More from Katherine McCurdy-Lapierre, R.G.D.

More from Katherine McCurdy-Lapierre, R.G.D. (13)

Recently uploaded

Recently uploaded (20)

Week 4 Lecture Part 2