HTML & CSS for Beginners Part 4: Bold and Italic text and HTML comments

Key Takeaways

hey you're watching part 4 of a series on HTML and CSS for beginners in this video we're gonna see how to make our text bold and italic as well as how we can add comments to our code that the browser's won't read so as you can see on the screen I've already gone ahead and added a bit of content here just to add a few paragraphs of text so to make bold text and italic text sadly it's not like our paragraphs with a P and headings or with H tags and they made it a little bit different and it's because we it's not necessarily about making things bold or italic but it's about putting more emphasis and more importance on our text so what I'm going to do is I want to make this first sentence here so the first sentence right here bold and to do that you want to use something called a strong tag and then I'm going to come all the way to here and I have to close my strong tag I'm gonna save this and we'll refresh and there you can go you can see that everything has become bold that was inside my strong tag so just to do that again we'll do it on the last sentence in this paragraph strong and then I come all the way over here close strong and let's refresh and now you can see this has also become strong or bold just to show you what's important to close your strong tag if ever you forgot to close your strong tag everything becomes bold it's not going to end at the end of this paragraph it just keeps going until the end of your document so make sure you close your strong tags and that should be a close forward slash there we go so let's come down to our second paragraph now and look at italic text so just like the strong tag we're making our text stronger we're making putting you know it's bigger it's more important italic text the whole idea behind it alakazoo even put emphasis on our text so what we use for that is an e/m tag and that stands for emphasis so let's just do this whole first sentence close um save that and refresh and we can see here that it's become italic let me just zoom in a bit on the screen so we can see our text has become italic there now we're just learning HTML and CSS so maybe you'd look at this later and go oh man I forget what the M stands for so let's look at doing what we can HTML comment so I'm just going to come up here in this empty space here and I'm gonna put in a triangle bracket exclamation mark - - and you can see everything after that now is becoming gray and this is an HTML comment - - closed triangle bracket and what that's doing is its closing my comment so it's not like a regular thing we have to tell it that it's a comment so it's not just with my greater than and less than symbols or my triangle brackets it's using this is telling it that it's the start of a comment and this is telling it it's the end of a comment and if I save my document and I refresh we won't see any differences here the comments are just notes to yourself or other people who are reading your code so what you could do is you could say in here the M stands for emphasis this makes my text italic and up here we could put in another one strong makes my tech whoops makes my text bold and there we go think it's important we want to put a space here in here it will still work if you do that but it's possible you run and do some issues depending on what symbols you have at the end so always just do your opening we do our exclamation mark - - put in all over a comment sorry put in a space put in your comment space and then put in the two hyphens and the triangle bracket there again I'm gonna save my document and refresh and again you can see that there's no change there another thing you can do if you want bold italic text is you can put in M and I can come here and do a close M save that and refresh and you can see that it becomes bold italic now of course I don't need all of my text to be strong and bold I could take this M tag here and maybe only make these last two words so all of this is bold then this is bold and italic and then we close it all off so it's regular bold then I have my bold italic and they both close right there and then if I needed to I could come down here and put in yet another strong tag and I kept it close strong and then over here I could come and put another mm tag and I could close em safe so there's my bold text over here is my next italic text and so on and so forth just as a quick side note if you're looking online for some tutorials and stuff you might see something called a bee tag close bee and let's do this next word here I and I'll close my eye over here I'll save that and you'll notice that it's actually working so this word here is right there it's bold and this here is my italic text here bee and I are obviously much faster to write and easier to do the problem is they have no meaning behind them it's a visual representation of bold and italic but it doesn't actually add importance to your text and this is important these days one of the things we have to worry about with Web Design is accessibility there's going to be people who are visiting your website that can't see the screen very well they might have something called a screen reader that which reads the website to them and this takes strong and em into importance for putting more importance and emphasis on our text whereas the B&I tags don't add any importance to the text it's a visual representation but it doesn't do it doesn't actually add meaning to our text just like an h1 it actually adds meaning it's telling the browser that this is a title it's not just making it bigger it's it's giving it real meaning the strong M tags give things real meaning that's add another little comment here just as a reminder to yourself do not use B and I they're not what we want to be using so they're actually used for a few other things now for little hacks that you might find and you might see those later on as you explore web development a bit more but for the most part we just pretend they don't exist strong em that's the right way to go so thanks so much for watching up until now I really hope you like this video if you have any comments any questions leave them down below in the comment section and next video we're going to be looking at links we're actually in ads and interactivity to our site by linking to other pages and that should be a lot of fun I look forward to seeing you there [Music]