1
00:00:00,430 --> 00:00:03,720
Sometimes you'll want text to
stand out from surrounding text in

2
00:00:03,720 --> 00:00:05,100
a paragraph or heading.

3
00:00:05,100 --> 00:00:08,340
For example, give a piece of
text emphasis or importance.

4
00:00:08,340 --> 00:00:14,170
HTML comes with semantic elements like
strong, and small for formatting text,

5
00:00:14,170 --> 00:00:18,730
and other elements like span that can be
used to mark up pieces of text just for

6
00:00:18,730 --> 00:00:19,780
styling purposes.

7
00:00:19,780 --> 00:00:25,120
So first, the strong tag, indicates
strong importance, seriousness, or urgency

8
00:00:25,120 --> 00:00:29,580
for its content, and the text is typically
displayed in bold by the browser.

9
00:00:29,580 --> 00:00:33,130
You can use strong tags in a heading,
caption, paragraph, and

10
00:00:33,130 --> 00:00:36,928
more to distinguish the important
pieces of text from other parts.

11
00:00:36,928 --> 00:00:42,809
So for instance, when I place the words
virtual reality inside strong tags,

12
00:00:49,310 --> 00:00:54,220
The browser displays the contents
of the strong element in bold.

13
00:00:54,220 --> 00:00:58,530
However, you can use cascading style
sheets, or CSS, to make strong tags appear

14
00:00:58,530 --> 00:01:02,280
in many different ways,
including different sizes or colors.

15
00:01:02,280 --> 00:01:06,020
I'll show you an example of how CSS
can change the look of elements later

16
00:01:06,020 --> 00:01:09,100
in this course, and we also have lots
of courses on CSS for you to check out.

17
00:01:10,110 --> 00:01:13,167
So over in the Contact section,

18
00:01:13,167 --> 00:01:17,934
I'm going to apply strong
tags to the word email.

19
00:01:26,501 --> 00:01:34,130
Then below, create a new paragraph with
the word Phone inside strong tags.

20
00:01:38,970 --> 00:01:44,592
And outside the strong tag,
let's add a phone, we'll say 555-123-4567.

21
00:01:47,068 --> 00:01:48,608
Then above the address,

22
00:01:48,608 --> 00:01:53,016
I'll include the word address inside
a paragraph within strong tags.

23
00:01:57,963 --> 00:02:01,354
So now the strong tags are going to
distinguish the text from the rest of

24
00:02:01,354 --> 00:02:02,590
the text.

25
00:02:02,590 --> 00:02:05,340
And over in the browser,
you can see that the strong tags make

26
00:02:05,340 --> 00:02:08,509
the contact information
easily scannable for users.

27
00:02:10,000 --> 00:02:16,080
So the <em> tag adds emphasis to text, and
by default displays text in italic.

28
00:02:16,080 --> 00:02:18,860
Emphasis can change
the meaning of the sentence.

29
00:02:18,860 --> 00:02:24,365
So for example, up in the header,
I'll include <em> tags around the word simple.

30
00:02:32,116 --> 00:02:35,579
And placing the emphasis
on the adjective, or simple,

31
00:02:35,579 --> 00:02:40,160
asserts that this is a user-friendly and
easy-to-read blog about VR.

32
00:02:41,590 --> 00:02:46,600
HTML even offers tags like small,
which you can use to display small text.

33
00:02:46,600 --> 00:02:49,470
You use the small tag for
marking up disclaimers,

34
00:02:49,470 --> 00:02:52,850
caveats, legal restrictions or
copyright information.

35
00:02:52,850 --> 00:02:56,238
So let's go all the way down
to the footer of our page and

36
00:02:56,238 --> 00:02:59,267
let's place the footer
text inside small tags.

37
00:03:12,072 --> 00:03:17,220
Keep in mind that you should not use small
just to make text smaller in long spans

38
00:03:17,220 --> 00:03:22,380
of text, like in multiple paragraphs,
lists, or any selection of text.

39
00:03:22,380 --> 00:03:26,080
Small is intended for
short runs of text only.

40
00:03:26,080 --> 00:03:32,400
Finally, you'll often use the span element
to group text for styling purposes.

41
00:03:32,400 --> 00:03:36,690
You use the span tag to identify
a short collection of text

42
00:03:36,690 --> 00:03:41,690
that you want to style with a different
color, font, or font-size using CSS.

43
00:03:41,690 --> 00:03:46,883
So notice that if I wrap the beginning
of the About text inside span tags,

44
00:03:56,739 --> 00:03:59,574
The browser does not change
the appearance of the text,

45
00:03:59,574 --> 00:04:02,730
as it does with the text
elements we looked at earlier.

46
00:04:02,730 --> 00:04:07,082
You see, the span element is
similar to the div element,

47
00:04:07,082 --> 00:04:10,800
in that it has no semantic
meaning on its own.

48
00:04:10,800 --> 00:04:14,400
So when there's no other suitable
element to differentiate a piece of text

49
00:04:14,400 --> 00:04:16,610
from surrounding text, use span.

50
00:04:16,610 --> 00:04:18,850
Then use CSS to change the appearance.

51
00:04:18,850 --> 00:04:22,010
So what's the difference between span and
div?

52
00:04:22,010 --> 00:04:26,350
Well, a div is known as
a block-level element.

53
00:04:26,350 --> 00:04:29,400
That is,
it's an entire block of content, and

54
00:04:29,400 --> 00:04:34,570
it usually has a break between
the content, above, or below it.

55
00:04:34,570 --> 00:04:38,760
Now, paragraphs and headlines are other
examples of block level elements.

56
00:04:38,760 --> 00:04:42,250
Now, the span element is what's
called an inline element.

57
00:04:42,250 --> 00:04:44,930
So it sits within a line of text.

58
00:04:44,930 --> 00:04:47,660
For example,
you can add a span inside a paragraph

59
00:04:47,660 --> 00:04:49,790
to identify just some of the text.

60
00:04:49,790 --> 00:04:52,470
And the other tags you learned
in this video, like strong, em and

61
00:04:52,470 --> 00:04:54,630
small, are also inline elements.

62
00:04:54,630 --> 00:04:57,860
Since you use them to mark
up just a few words or

63
00:04:57,860 --> 00:05:00,010
short phrases within a block of text.

64
00:05:00,010 --> 00:05:02,561
You'll find links to more text level
elements in the teacher's notes

65
00:05:02,561 --> 00:05:03,130
of this video.