Working with Paragraphs and Text - 05

Download this episode

Download Video

Download captions

Download Captions

Description

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

Tag:

HTML5

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      gergob

      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.   

    • User profile image
      pipo

      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.

    • User profile image
      BobTabor

      @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!

    • User profile image
      grahama

      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.

    • User profile image
      BobTabor

      @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

    • User profile image
      Rafael Oliveira

      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. ;)

    • User profile image
      munto

      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?

    • User profile image
      munto

      You'll be glad to know I've worked it out Wink

      Cool.........

       

       

    • User profile image
      Phil

      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

    • User profile image
      Ashuu

      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!!

    • User profile image
      Blaine

      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.

    • User profile image
      Blaine

      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

    • User profile image
      BobTabor

      @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?  Wink

      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?  Big Smile

    • User profile image
      Blaine

      I do believe I am now a faithful. Hadn't thought of what the future may bring. Thanks for replying.

    • User profile image
      Lana

      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).

    • User profile image
      BobTabor

      @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).

    • User profile image
      Moyacoub

      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

       

    • User profile image
      BobTabor

      @Moyacoub: In 2013 I will be creating that content in VB.  Keep checking back!

    • User profile image
      marcosantos

      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

    • User profile image
      BobTabor

      @marcosantos: See the very last video in this series where I give you recommendations for my favorite books.  Smiley

    • User profile image
      Purva_​Hattekar

      @BobTabor:Hello Sir, I want to become a programmer. Can U please guide me. Smiley
      I am in B.Tech 3rd Year, CSE.

    • User profile image
      BobTabor

      @Purva_Hattekar: That's what I do ... how can I help you?

    • User profile image
      Ali

      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.

    • User profile image
      BobTabor

      @Ali: Does this help?  (See the section titled "Changes in HTML5" near the bottom):

      http://www.w3.org/TR/html-markup/cite.html

    • User profile image
      Ali

      Hmm . Thanks a alot .

    • User profile image
      Awesome

      Hey Bob,can u post the link in the comments section ?? www.w3.org/TR.....??

    • User profile image
      kamran

      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>

    • User profile image
      BobTabor

      @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/

    • User profile image
      Gilbert

      BOB you are great!!!!! thanks alot

    • User profile image
      Cody K Mercer

      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!

    • User profile image
      BobTabor

      @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!

    • User profile image
      DHCPete

      My 9yr old daughter wanted to present her homework as a web page after a fellow student did. And so the homework wars began! I said we could start building her a site and we've been using these recordings along-side VS Express 2012 Web to show her how she can do this both in text editors and graphically and so I can stress the importance (and difference) of content v. layout and HTML v. CSS. Might as well start teaching best practice ;-) Now, I'm an MS Configuration Manager guy and she's a complete noob. I understand this stuff (I said understand, not know!) and she's starting from scratch. I have to say, the videos are clean, precise, methodical and well presented. There's little that without a small bit of fatherly explanation and analogy that she's not understood.

      Who knows where this will lead to? Well done, Sir. :-)

    • User profile image
      BobTabor

      @DHCPete: A tip of the hat to you.  As the father of a recent high school graduate who will soon be leaving for college I can tell you exactly what this will lead to ... this one-on-one time is first and foremost great dad-and-daughter time.  And beyond that, the rest will take care of itself.  Keep it light, keep it fun and soak it all up, my friend.  It goes by way too fast.  Sad

    • User profile image
      Manuel from Puerto Rico

      Bob, As always your presentation style is bar none. I have learned so much in such a short time. I have been looking at the comments after the videos and have learned even more from the others that have seen the videos. I was starting video 6 when I noticed there are no comments. Were these deleted? Sincerely hope the other videos have comments since they give support to the videos and to your skill in teaching. Looking forward to your comments. Manuel

    • User profile image
      BobTabor

      @Manuel from Puerto Rico: Thanks for the heads up ... after 30 days of inactivity the comments will automatically lock.  I've asked Channel9 to remove this feature, at least for this series, however they don't have the functionality to restrict that feature on a per series basis.  So, every once in a while some threads get locked and I have to unlock them manually by writing a comment.  So, I need to go and do that now.  Again, thanks for calling this to my attention.

    • User profile image
      Ruud Kuin

      Hi Bob,

      In this lesson you cover the differences between <p> and <br>, would it be correct to see <p> as a hard return and <br> as a soft return?

      Best regards, Ruud

    • User profile image
      BobTabor

      @Ruud Kuin: Hi Ruud, hope all is well.  Yes, perhaps that is a good way to think about it.  Keep in mind, the CSS is what gives the visual quality to the breaks ... the HTML provides the semantic meaning.  It is possible to add CSS to make the line break look like a paragraph, and vice versa (I have no idea why you would want that ... but it can be done.)

    • User profile image
      Mphatheleni

      IT WILL BE GOOD TO SAY THAT ALL YOUR LESSONS ARE GREAT, I HAVE WATCHED EACH AND EVERYONE OF THEM, YOU ARE MY ONLINE MENTOR!! THANK YOU VERY MUCH FOR THIS WONDERFUL PRECIOUS LESSONS.

    • User profile image
      atif12

      Adobe dreamweaver ?Should i use for easy

    • User profile image
      atif12

      What's on your back of your computer on the corner of your head?

    • User profile image
      keikomushi

      I love Bob's approach to this series. While other courses often take some time to deal with semantics, he did so from the get-go and has covered some other stuff on top of this. I would like to thank Bob for creating these tutorials. I still have a way to go before I am finished the series, but its great having some of those questions I'd been left with after a previous course answered so early in this series. 

      Just in case anyone is interested, I am using Aptana Studio for my web creation. I've tried using Notepad++ but found myself a little jealous of folks with products such as Adobe Dreamweaver. Its a free cross-platform product that is panning out nicely so far. There are a few other programs out there as well. I plan on giving Maya, WDL Website Builder 4 and Brackets a go soon as well to compare them with my current choice. 

    • User profile image
      BobTabor

      @keikomushi: Awesome feedback.  Thank you.  I'd love to ask which courses you've taken, but I suppose that wouldn't be polite (for their sake)  Smiley  Anywho, glad this course helped fill in a few gaps.  Best wishes to you!

    • User profile image
      Thanos​Kokkalis

      Mister Bob Tabor i wanna thank you allot for your lessons.

      I was studying programmer in early 2000. After some years that i worked as data entry/end user i can say that i had lost contact with everything, so i deside to strart from scratch once again Thank you allot because i feel that my mind is revived and i feel start thinking again as a programmer/analyst.

      P.S. i cant understand the use of <span> and <ruby>

      I m sorry about my pure English.

    • User profile image
      Clint

       @ThanosKokkalis: Ruby annotations are used for East Asian typography http://www.w3schools.com/tags/tag_ruby.asp

      spans are typically used to provide a hook into a paragraph.  http://www.w3schools.com/tags/tag_span.asp 

    • User profile image
      Thanos​Kokkalis

      @Clint: 2 thumbs up!!! Wink

    • User profile image
      efbolton

      excellent tutorials - many thxs!  per yr 12/12/12 (2:20pm) comment  r u still looking to provide VB tutorials?

    • User profile image
      BobTabor
    • User profile image
      efbolton

      @BobTabor: those r interesting (thx u!) but like moyacoub (ref his comment dec 12 2012 at 11:03am & below) I was looking for more advanced incl mvc 5 & windows 8 apps. i noticed that ms no longer has a cert path for vb so fear that it may b a short time b4 its deprecated in lieu of c#. also do u plan to provide more content on yr other website learnvisualstudio.net ?  fee seems INCREDIBLY reasonable!  KUDOS AGAIN ON YR GREAT WORK HERE!


      ----------------------

      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

    • User profile image
      Clint

      @efbolton: VB isn't deprecated.  For Windows 8, there are over 100 VB samples on dev.windows.com.  http://code.msdn.microsoft.com/windowsapps/site/search?f%5B0%5D.Type=ProgrammingLanguage&f%5B0%5D.Value=VB&f%5B0%5D.Text=VB.NET

      Channel 9 even created a fundamental series + windows 8 development with VB for absolute beginners.

    • User profile image
      Wendy

      Thanks Bob, its obvious that you have complete mastery yet, you teach at such a basic level that I, completely new to the subject matter can grasp this easily. Great communication skills! I have tried programming classes before and have always been lost after the first hour because instructors can't seem to teach without assuming preexisting knowledge from their students. The way you define and explain from the ground up, makes me think I can really learn this.

    • User profile image
      efbolton

      @Clint: appreciate the link  thxs! hope yr right on vb -i've been loyal to ms all the way back to when the choice was qb45 vs turbo (now power) basic!

    • User profile image
      Clint

      @efbolton: the next generation compiler [Codenamed Roslyn] supports VB.  http://blogs.msdn.com/b/vbteam/archive/2013/12/16/throwing-the-big-switch-on-roslyn-matt-gertz-vs-managed-languages-development-manager.aspx

      Without a doubt, you'll have to learn to read C# since a lot of community samples are in c# but VB is supported.

    • User profile image
      BobTabor

      @Wendy: You *can* learn this and much more ... if you've gotten this far, the hard part is behind you!  It's just a simple (albeit tedious) matter of adding more details.  When I got started in programming, I had to learn to stick with problems longer than I was used to.  There are some geniuses out there (like @Clint) that can pick things up incredibly fast.  I *wasn't* one of those people when I first started, but the more you learn the more you have to compare new ideas to ... "Oh, I see ... it's just like this other thing I already know, with this one twist."  Keep pushing forward even if it's only an inch at a time ... you're building momentum by taking daily baby steps.  Good luck!

    • User profile image
      goharbarki

      A lot of thanks sir bobTabor ...its very helpful for me...sir what is email id  .........|-)

    • User profile image
      anas

      heads off sir bob

      thanks for supporting us

    • User profile image
      Random​Tangents
    • User profile image
      Saikat Das

      Hi Bob,
      Two things I noticed and pondered while watching this video -

      1) The "../" takes us up one folder level and not to the parent folder as you mentioned. This is congruent with the "cd .." command that is used in cmd while traversing folder levels.

      2) This is a doubt that's been bugging me. Which tags must absolutely have the </tag_name> ending and which tags can do without it? I noticed <br> doesnt require it and neither does <a name="some_name">. Is there a way to easily identify between the two types?

      Thanks for all the help and inspiration. Been an avid follower of your courses ever since I watched you C# Fundamentals - Development for Absolute Beginners

    • User profile image
      Saikat Das

      Edit:
      Hey Bob,

      It's me again. I just realised that when you say parent, you mean its immediate parent, and not some global parent thing, which was what I'd first inferred. My bad!
      Be grateful, if you'd answer my second question though.

      Thanks again. :-)

    • User profile image
      BobTabor
    • User profile image
      Saikat Das

      Hey Bob,

      So I went through the article that you provided and basically what I got out of it is that self closing tags are parsed by an HTML5 capable browser and it inserts the closing tags itself as it deems necessary but the self-closing of the tag itself doesnt have any utility.

      However, my question was whether there's a definitive rule as to which tags should absolutely and necessarily be closed and which can do without. Though, after having gone through the article a few times, my understanding is that void HTML elements don't require to be closed with a closing tag. All other tags need to be closed with a closing tags.

      I'd appreciate your comments on the above inference.

      Thanks Bob.

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.