Preview
Video Player
00:00
00:00
Add Meaning to Words with Text Level Elements
5:05Sometimes you'll want to give a piece of text emphasis or importance. HTML provides semantic elements, like <strong>, <em> and <small>, for formatting text. Other elements like <span> are used to mark up text just for styling purposes.
Sometimes you'll want text to
stand out from surrounding text in
0:00
a paragraph or heading.
0:03
For example, give a piece of
text emphasis or importance.
0:05
HTML comes with semantic elements like
strong, and small for formatting text,
0:08
and other elements like span that can be
used to mark up pieces of text just for
0:14
styling purposes.
0:18
So first, the strong tag, indicates
strong importance, seriousness, or urgency
0:19
for its content, and the text is typically
displayed in bold by the browser.
0:25
You can use strong tags in a heading,
caption, paragraph, and
0:29
more to distinguish the important
pieces of text from other parts.
0:33
So for instance, when I place the words
virtual reality inside strong tags,
0:36
The browser displays the contents
of the strong element in bold.
0:49
However, you can use cascading style
sheets, or CSS, to make strong tags appear
0:54
in many different ways,
including different sizes or colors.
0:58
I'll show you an example of how CSS
can change the look of elements later
1:02
in this course, and we also have lots
of courses on CSS for you to check out.
1:06
So over in the Contact section,
1:10
I'm going to apply strong
tags to the word email.
1:13
Then below, create a new paragraph with
the word Phone inside strong tags.
1:26
And outside the strong tag,
let's add a phone, we'll say 555-123-4567.
1:38
Then above the address,
1:47
I'll include the word address inside
a paragraph within strong tags.
1:48
So now the strong tags are going to
distinguish the text from the rest of
1:57
the text.
2:01
And over in the browser,
you can see that the strong tags make
2:02
the contact information
easily scannable for users.
2:05
So the <em> tag adds emphasis to text, and
by default displays text in italic.
2:10
Emphasis can change
the meaning of the sentence.
2:16
So for example, up in the header,
I'll include <em> tags around the word simple.
2:18
And placing the emphasis
on the adjective, or simple,
2:32
asserts that this is a user-friendly and
easy-to-read blog about VR.
2:35
HTML even offers tags like small,
which you can use to display small text.
2:41
You use the small tag for
marking up disclaimers,
2:46
caveats, legal restrictions or
copyright information.
2:49
So let's go all the way down
to the footer of our page and
2:52
let's place the footer
text inside small tags.
2:56
Keep in mind that you should not use small
just to make text smaller in long spans
3:12
of text, like in multiple paragraphs,
lists, or any selection of text.
3:17
Small is intended for
short runs of text only.
3:22
Finally, you'll often use the span element
to group text for styling purposes.
3:26
You use the span tag to identify
a short collection of text
3:32
that you want to style with a different
color, font, or font-size using CSS.
3:36
So notice that if I wrap the beginning
of the About text inside span tags,
3:41
The browser does not change
the appearance of the text,
3:56
as it does with the text
elements we looked at earlier.
3:59
You see, the span element is
similar to the div element,
4:02
in that it has no semantic
meaning on its own.
4:07
So when there's no other suitable
element to differentiate a piece of text
4:10
from surrounding text, use span.
4:14
Then use CSS to change the appearance.
4:16
So what's the difference between span and
div?
4:18
Well, a div is known as
a block-level element.
4:22
That is,
it's an entire block of content, and
4:26
it usually has a break between
the content, above, or below it.
4:29
Now, paragraphs and headlines are other
examples of block level elements.
4:34
Now, the span element is what's
called an inline element.
4:38
So it sits within a line of text.
4:42
For example,
you can add a span inside a paragraph
4:44
to identify just some of the text.
4:47
And the other tags you learned
in this video, like strong, em and
4:49
small, are also inline elements.
4:52
Since you use them to mark
up just a few words or
4:54
short phrases within a block of text.
4:57
You'll find links to more text level
elements in the teacher's notes
5:00
of this video.
5:02