Working with Paragraphs and Text - 05
- Posted: Jul 30, 2012 at 11:55 AM
- 45,664 Views
- 31 Comments
Loading User Information from Channel 9
Something went wrong getting user information from Channel 9
Loading User Information from MSDN
Something went wrong getting user information from MSDN
Loading Visual Studio Achievements
Something went wrong getting the Visual Studio Achievements
Right click “Save as…”
In this lesson, Bob discusses the various semantic meanings of popular HTML5 inline tags useful for marking up text inside of paragraphs, including b, i, small, em, mark, span, and much more.
Download the source code for Working with Paragraphs and Text
Already have a Channel 9 account? Please sign in
Follow the Discussion
Oops, something didn't work.
What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in. You need to be signed in to Channel 9 to use this feature.What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in and view them all on your notifications page.sign up for email notifications?
Thanks Bob, really useful explanation of differences between older version of HTML elements and the new HTML5. I like a lot that the tags in HTML5 are referring to the actual semantic meaning of the content and the presentation of the content is done from CSS completely.
Why all of this videos are here instead of being in learnvisualstudio.com?? For all of us who paid long ago for that suscription it's been months since we've seen any new material.
@pipo: Hi pipo ... I'm waiting for VS2012 to drop. No need recording videos in 2010 or 2012 beta when the full version will drop in about 10 days. Here's hoping that you felt like what little I charge was well worth the 150+ hours I provide. If not, I'm really sorry and I would be happy to refund. Contact me on that site and submit a ticket and we'll go from there. Best wishes!
Great intro Bob - as usual clear and concise. Just one comment - the anchor tag's name attribute is obsolete in HTML5, but you can instead link to any tag with an id attribute. In this case, put id="bottom" on the h1 element. This is in keeping with the semantic aims of HTML5 - a named anchor tag is an artificial element which adds no additional meaning to the document.
@grahama: You are absolutely correct. Thank you for the correction. It is a challenge keeping up with what's in and what's out. For those catching up to this conversation, check this out:
http://dev.w3.org/html5/markup/a.html#a-examples
Great tutorials, I'm starting learning html5, and you make me feel more confortable with all that stuff. I really wanna thank you for this awesome contribution. ;)
I'm enjoying the tutorials, the activities do help make the concepts stick and also giving a feeling of achievement. As an absolute beginner lesson 5 has left me a bit confused as to how to use the ID attribute, particulalry with regard to using it as a way to target a specific element for CSS styling. Should I be concerned about this at this stage or will all become clear as we move on through the tutorials and get to the CSS tutorials?
You'll be glad to know I've worked it out
Cool.........
Bob,
I am an American.
I am sitting in my apartment in China.
I am three months into running my own business.
I am muttling through building my own website now.
All I have ever written is a picture website in HTML years ago.
There is more that I don't know then what I do.
Thanks so much.
Phil
Hey Bob,
Your videos are amazingly detailed and are the best beginners videos on HTML5!!
I know its the best way to code, but then after completing this series, I'll end up hating notepad for sure.
I am also interested in knowing if there will any intermediate or advanced series. (I'll be waiting for it!!)
The other thing that I don't like(because I speak British English) is that you pronounce "often" as AWF-tin!! At first it was a bit odd for me but then its okay. But still sometimes it is comedic for me!!
That's all I have to say!! Keep up the good work!! And thank you so much!!
First of all.
Holy smokes thank you Bob. It really is people like you. Willing to give so freely of themselves and their knowledge that pushes us forward. The legions of people you are empowering thank you. Overdone? maybe. But sincere none the less.
I'm sure ima get smacked in the mouth for this but. My question is...
I can't help but notice that an awful lot of these things do or at least from the viewers point of view appear to do the same as other commands. I know you are all about semantics, but if you are looking at a heavy work load. Wouldn't it be easier just to use a uniform approach to this stuff? Specifically the <cite></cite> appears to simply be italicized print. And, when copying the text in the example for <s></s> it appears on the browser to simply be a strikethrough.
Forgot to add to previous post.
It seems to me that all in all the end goal is that the viewer has the most pleasing experience with your page as is possible. And bearing in mind I have exactly 5 lessons with you worth of experience. Wouldn't the simplest approach be to have italics be italics and strikethrough's be strikethrough's and strong be strong? Regardless of how the code looks as long as it is easy for the author to go through and visually satisfying to the viewer?
Realize this is pretty long and its been awhile. But this isn't the first time i have wondered this. And you appear to be <strong>VERY</strong> knowledgeable about it.
Thanks,
Blaine
@Blaine: Hey Blaine, wow ... thanks for the nice words!!!
Frankly, you can do (and many do) exactly what you suggest. But do you honestly think they would let me teach you the down-and-dirty way on Microsoft's web site?
Seriously though, if you're learning, why not learn the correct WEB STANDARDS way. These standards are there to ensure that everyone's experience is the same, regardless of browser vendor, device, etc. Sure, in IE9 or 10, <cite> may be rendered a particular way, but you can't always depend on its appearance. Furthermore, this is more than just how things look -- we don't know what's coming tomorrow. If there's a search engine for <cite>s, don't you want your content to be included in it? (Bad example, but the idea is -- keep it semantically correct, don't worry about appearance -- that's what CSS is for ... you'll get to that soon!). If you take shortcuts, you may be limiting yourself, your client, your user in the future. I would recommend at least taking a stab at doing it "the right way" first. When you can't achieve something semantically correct then I would give you a little wiggle room to try something different.
Have I converted you yet?
I do believe I am now a faithful. Hadn't thought of what the future may bring. Thanks for replying.
Hello Bob.
I understand that I can Always choose later how certain tags will look like with CSS, but will semantical tags like <s> for example or <strong> be in any way styled by default (like h1 for e.g.. is already bigger by default).
@Lana: Absolutely ... most HTML5 elements are rendered by the browser using a default style sheet. HOWEVER (!!!) each vendor's style sheet may be different!!! I can't stress this enough. For some layouts / pages, the nuanced differences will be negligible and acceptable. For other layouts, it could be devastating. Near the end of this lesson, I'll recommend a few CSS Frameworks that even out the rough spots -- they equalize most popular web browsers so that you can a more consistent experience across many vendor browsers. My advice: never depend on the defaults, especially if you are pursuing a very specific layout you have in mind. You will be disappointed when someone reports that the formatting of the page is weird (this has happened to mer personally more times than I like to admit).
Hi Bob
Thanks for all the great work you did
I checked your website and found that most of the videos in C# and I am interested in getting more advanced training in VB 2010/2012. I am interested in videos like Entity Framework, LINQ , ADO.NET do you have or planing in posting some VB 2012 videos in your websites? please advise
@Moyacoub: In 2013 I will be creating that content in VB. Keep checking back!
Mr Bob Tabor can you please recommend some books or site with pdf files with this same subject. Also thank you very much for this high quality e learning site.
Muito Obrigado!
Marco Santos
@marcosantos: See the very last video in this series where I give you recommendations for my favorite books.
@BobTabor:Hello Sir, I want to become a programmer. Can U please guide me.
I am in B.Tech 3rd Year, CSE.
@Purva_Hattekar: That's what I do ... how can I help you?
Hi Mr BobTabor
Awesome tutorials for Beginners. . I was not familiar with even html but now you tutorials guiding me in a right track . . .
I have a some doubt in mind,if I using a title of a book which is in quotes then which element shall I use ? Cite ? q ? or both ?
Thanks,
Ali.
@Ali: Does this help? (See the section titled "Changes in HTML5" near the bottom):
http://www.w3.org/TR/html-markup/cite.html
Hmm . Thanks a alot .
Hey Bob,can u post the link in the comments section ?? www.w3.org/TR.....??
Thank you Sir, i really like your tutorials and learning great.
Lesson number 3 was very comprehensive.
Please explain some some of the styles which are very important. such as
overflow:hidden . i am watching lesson number 5 for now.
my objective is to learn html and Css and thus design my blog the way i want -> <a href="http://TrixKing.blogspot.com">My Blog</a>
@kamran: This article seems to have some background good info related to overflow:hidden and why we need it ...
http://www.impressivewebs.com/clearing-floats-why-necessary/
BOB you are great!!!!! thanks alot
Bob,
Previous to starting this tutorial series I "thought" I knew how to design webpages. Halfway through video 1 I was very skeptical. Starting video 2 I even more skeptical, doubtful that I would actually learn anything.
Now, I am about to begin video 5, and I am very pleased to say I am hooked. You have convinced me that you are, indeed, very knowledgable, and I have no doubt that following you serie(s) will be very beneficial to me.
You are very humble, precise, and your lesson structure is excellent. Thank you very much to your contribution to the community. "Absolute Beginner" might be "selling yourself short." After finishing series I will absolutely be visiting your other works.
You are a blessing!
@Cody K Mercer: Wow, thanks for the nice things you said. Made my day. Glad the videos are helpful for you. Hope you continue to feel they're worthwhile!
Remove this comment
Remove this thread
close