Add Meaning to Words with Text Level Elements5:05 with Guil Hernandez
Sometimes 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 The 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 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 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 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, 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
You need to sign up for Treehouse in order to download course files.Sign up