Lesson 07
Boldening and Emphasizing Inline Text in HTML with Strong, Em, b, i
The lecture goes over some HTML tags to mark some inline text in a particular way.
You learn to mark text as being of strong importance, which by default visually appears in bold letters.
You learn to emphasize text, which by default visually appears in slanted italics font style.
The lesson also mentions how the bold tag and the idiomatic text tag were also used to visually bolden and italicize text. However today it is preferred to use the semantic tags strong and em due to their not necessarily being tied to a visual representation that could be changed. Documents can be read and understood semantically, the visual aspect being isolated from the meaning of the tags.
Summary
# Summary of HTML Tags Tutorial
In this session, the speaker discusses various HTML tags used for styling text, specifically focusing on how to make text bold and italicized.
## Key Points
1. **Bold Text:**
- To make text bold, use the `<strong>` tag.
- Example: `<strong>paragraph</strong>`
- The environment automatically adds a closing tag when you create the opening tag.
2. **Emphasized Text:**
- To italicize text, use the `<em>` tag.
- Example: `<em>paragraph</em>`
- This tag typically displays text in italics based on browser defaults.
3. **Default Styles:**
- The default appearance of HTML elements can vary between browsers.
- Strong semantic tags like `<strong>` and `<em>` are preferred over older tags for better meaning and accessibility.
4. **Legacy Tags:**
- Older HTML used `<b>` for bold and `<i>` for italics.
- While these still work, `<strong>` and `<em>` are recommended for semantic clarity.
5. **CSS Styling:**
- Note that the default styles can be altered using CSS, which will be covered in future sessions.
Overall, the session emphasized the importance of using semantic HTML tags to convey meaning, improving search engine understanding and accessibility.
Video Transcript
Okay, easy enough. Let's talk about different tags.
So let's say I want to make this word paragraph in bold.
I can use a tag for that. All I have to do is enclose this word in an opening and closing.
So opening at the left-hand side and closing at the right-hand side.
And the name of the element we're going to use is strong.
So less than the name of the element is strong, greater than.
You notice it autocompletes for me. That's because this environment is kind of smart
and it tries to always add a closing tag for me.
But be careful that the closing should be on the right-hand side after you finish writing the thing you want to make strong.
Always write the slash there for the closing tag and the name of the element has to match the same name as the opening tag.
So I'm going to click run in the top left.
And if you notice, the word paragraph is now in bold.
If the text is too small for you to see, let me know and I'll make it bigger. Otherwise, it'll keep going.
Alright.
So let's talk about emphasis tag.
Let's say, you know, typically the way a bold, a strong manifest is by being bold by default.
So these are the default styles that the browser provides.
Okay. Every browser will have different default visual for every HTML element.
So usually when you use strong, it appears as bold.
And then there's another one that's like to emphasize some word.
It usually appears as italics, you know, the slanted.
Let's try that one. Let's say the second paragraph here.
The word paragraph, I want to emphasize that.
I'm going to last then em greater than and then write the word.
And then don't forget the closing tag last then slash and then em and greater than.
Em stands for emphasis. So when I click run in the top left, you can see the word paragraph is now italicized or slanted.
Okay, that's the way it manifests visually by the browser default style.
In case anybody's wondering about the style, they can be changed with CSS.
That's something I cover in a different session, but any style in a document can be changed or overridden with CSS.
But for now, just deal with the default browser style.
Okay, so we learned a p tag for paragraph.
We learned a strong tag for bold.
We learned the emphasis tag for italics.
Back in the days, you know, the early days of the web, we also use different tags for bold and italics.
And instead of strong, we would say B.
So if I change the opening and closing name to B, this is how I manifest visually is the same thing.
So if you ever see this B tag, that's what it means.
It's the boat tag.
But these days, people like using the strong because it's called a semantic tag has more meaning.
Okay, many want to make this a strong word.
And the same way for emphasize emphasize typically we used to use I to instead of the end we use I for I stands for italics.
And that's how it manifests same way visually.
But again, people like to be more semantic these days, meaning they want to add more meaning to what the tag really means because italics by itself doesn't really means its emphasis or strong,
depending on how the design for a website is, you know, you're not always going to see strong as a bold and emphasis as italics.
Anybody could change that.
So the a m is strong, let's the computer know, you know, there's going to be a lot of computer like the search engines, they'll be reading your documents and analyzing them.
So they will understand, okay, this word is meant to be strong.
And that one was emphasized no matter what style it is, whether it's italics or bold.
No comments yet (loading...)
No comments yet (loading...)
Did you like the lesson? 😆👍
Consider a donation to support our work: