Changing HTML tags for Responsive Web Development?

[Genesis]

Last night while I was doing some tutorials picked up that some of the HTML tags are in the process of changing, probably all part of the push for responsiveness and to cover all devices when coding.

I've picked up on the following two tag changes - does any one else know about other traditional HTML tags that have changed? Doesn't mean that the old tags won't work, but there is a push for changing them as per below:

<b></b> with <strong></strong>
<i></i> with <em></em>

 

[Gregoric]

<b></b> with <strong></strong>
<i></i> with <em></em>

Are you sure, that there are tags like <b> or <i>? I have never used such, I thought there are only <strong> or <em> in the HTML script, whereas the or are used within BBcode only.

About other such possible combinations, I do not use too much underline, or strikethrough (that are existent in the BBcode), but if I do, I choose to use CSS rules. Not sure, whether there are separate tags for these options in HTML (and their recommended equivalents in HTML5) or not.

 

[Peter]

I have seen this recommendation for many years so I don't think it's new.

If you use <b>, <i>, <u>, etc. you are saying how the text should look like in your HTML code but nowadays we usually do that with CSS instead. By using <strong> or <em> we are telling that the text have strong importance or emphatic stress. I'm not sure about the exact difference between these two but that's the words the W3C uses.

http://www.w3.org/TR/html-markup/strong.html
http://www.w3.org/TR/html-markup/em.html

I think this is more useful for screen readers, because they can use this information to emphasise certain words. I most often use <em> and <strong> out of habit but sometimes, rather inconsistently, I have been using <i> or <b> when the use is only stylistic.

 

[Genesis]

<b></b> with <strong></strong>
<i></i> with <em></em>

Are you sure, that there are tags like <b> or <i>? I have never used such, I thought there are only <strong> or <em> in the HTML script, whereas the or are used within BBcode only.

About other such possible combinations, I do not use too much underline, or strikethrough (that are existent in the BBcode), but if I do, I choose to use CSS rules. Not sure, whether there are separate tags for these options in HTML (and their recommended equivalents in HTML5) or not.

YES, there are <b> and <i> tags. Here's an HTML tag chart that includes both <strong> and <b> as well as <i> and <em> tags:
www.web-source.net/html_codes_chart.htm

 

[Gregoric]

Here's an HTML tag chart that includes both <strong> and <b> as well as <i> and <em> tags:
www.web-source.net/html_codes_chart.htm

That has surprised me a bit. I have searched through the internet a bit and have found that some websites categorise these two (among others like <s> etc.) as deprecated whereas other ones do not. That's weird a bit. Nevertheless, I have stumbled upon a thread on Stackoverflow, from which I have concluded that the <strong>/<em> are not exactly "modern" equivalents of <b>/<i> but since they were created for different reasons, they play different roles. Continuing, since the role played by <b>/<i> (i.e. bolding text or italicizing it) is now played by CSS, they are deprecated, whereas <strong>/<em> are used to emphasize the content (and not simply bold/italicize it) to be treated differently for example by search engines, they should be used. That is what I have concluded.

Here's the mentioned thread. http://stackoverflow.com/questions/271743/whats-the-difference-between-b-and-strong-i-and-em

 

[Peter]

The HTML5 specification contains a few examples of when to use <i> and <b>.

The examples below show uses of the i element:

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

In the following example, a dream sequence is marked up using i elements.

<p>Raymond tried to sleep.</p>
<p><i>The ship sailed away on Thursday</i>, he
dreamt. <i>The ship had many people aboard, including a beautiful
princess called Carey. He watched her, day-in, day-out, hoping she
would notice him, but she never did.</i></p>
<p><i>Finally one night he picked up the courage to speak with
her?</i></p>
<p>Raymond woke with a start as the fire alarm rang out.</p>

The following example shows a use of the b element to highlight key words without marking them up as important:

<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

In the following example, objects in a text adventure are highlighted as being special by use of the b element.

<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</p>

Another case where the b element is appropriate is in marking up the lede (or lead) sentence or paragraph. The following example shows how a BBC article about kittens adopting a rabbit as their own could be marked up:

<article>
 <h2>Kittens 'adopted' by pet rabbit</h2>
 <p><b class="lede">Six abandoned kittens have found an
 unexpected new mother figure ? a pet rabbit.</b></p>
 <p>Veterinary nurse Melanie Humble took the three-week-old
 kittens to her Aberdeen home.</p>
[...]

I have to admit that I have probably used <em> and <strong> wrongly many many times. Should probably start using <b> and <i> a lot more after reading these examples.

 

[Genesis]

Aha .... so this guy in the tutorial who suggested <b> and <i> tags are out didn't have an understanding of the tags. Probably should send him to your post Peter. Thanks for checking it out. :good:

 

[smalpierre]

I don't use those tags - maybe I should though. I've been using span tags and a css class. Who knows - maybe I want to change bold text to a different font in italic instead at some point has been my reasoning.

 

[strokerace]

Aha .... so this guy in the tutorial who suggested <b> and <i> tags are out didn't have an understanding of the tags. Probably should send him to your post Peter. Thanks for checking it out. :good:

Those tags are ok. They can still be used and are better tags then Strong and EM.

<b> is for bold and <i> is for italic

 

[Genesis]

Aha .... so this guy in the tutorial who suggested <b> and <i> tags are out didn't have an understanding of the tags. Probably should send him to your post Peter. Thanks for checking it out. :good:

Those tags are ok. They can still be used and are better tags then Strong and EM.

<b> is for bold and <i> is for italic

Was happy to see that. HTML has been the one place where everything always stayed the same. Relieved at least something has survived all of the responsive hype.

 

[strokerace]

Aha .... so this guy in the tutorial who suggested <b> and <i> tags are out didn't have an understanding of the tags. Probably should send him to your post Peter. Thanks for checking it out. :good:

Those tags are ok. They can still be used and are better tags then Strong and EM.

<b> is for bold and <i> is for italic

Was happy to see that. HTML has been the one place where everything always stayed the same. Relieved at least something has survived all of the responsive hype.

What has been going on is the young kids that are starting to become coders and working on these things don't understand how the old system works and wanted to change thing to make them look l33t amongst their friends. Yet, in doing so, they are screwing things up and opening up huge security holes in all platforms. They all failed to understand the concept that the older generation was taught. K.I.S(Keep It Simple). To them, simple was not cool or they had a hard time understanding how so little did so much. They also thought that they were a new generation and had new skills that they would try to out shine those who invented the stuff. For an example, HTML5. There is no such thing, or its no different then HTML1. Even with PHP they are trying to do the samething to it. In php5.4, they remove register_globals. Their excuse was it was insecure. Yet, I have my CMS using registers on it and its very secure. I even had some hackers try to break it. In theory, its not the code that is the issue, its the persons writing it. Now, it PHP 5.4 you need to add a line in every file to reconnect to the database. Again, its just adds more code that was never needed before. Samething with MYsqli. Its exactly the same as MYSql. Not much different. Its was just changed because some n00b didn't understand how it work and wanted it to change.

FYI, My cms still works in PHP5.5 without any changes. So, I don't think the devs know what they are doing with updating PHP any more.

 

[Genesis]

Aha .... so this guy in the tutorial who suggested <b> and <i> tags are out didn't have an understanding of the tags. Probably should send him to your post Peter. Thanks for checking it out. :good:

Those tags are ok. They can still be used and are better tags then Strong and EM.

<b> is for bold and <i> is for italic

Was happy to see that. HTML has been the one place where everything always stayed the same. Relieved at least something has survived all of the responsive hype.

What has been going on is the young kids that are starting to become coders and working on these things don't understand how the old system works and wanted to change thing to make them look l33t amongst their friends. Yet, in doing so, they are screwing things up and opening up huge security holes in all platforms. They all failed to understand the concept that the older generation was taught. K.I.S(Keep It Simple). To them, simple was not cool or they had a hard time understanding how so little did so much. They also thought that they were a new generation and had new skills that they would try to out shine those who invented the stuff. For an example, HTML5. There is no such thing, or its no different then HTML1. Even with PHP they are trying to do the samething to it. In php5.4, they remove register_globals. Their excuse was it was insecure. Yet, I have my CMS using registers on it and its very secure. I even had some hackers try to break it. In theory, its not the code that is the issue, its the persons writing it. Now, it PHP 5.4 you need to add a line in every file to reconnect to the database. Again, its just adds more code that was never needed before. Samething with MYsqli. Its exactly the same as MYSql. Not much different. Its was just changed because some n00b didn't understand how it work and wanted it to change.

FYI, My cms still works in PHP5.5 without any changes. So, I don't think the devs know what they are doing with updating PHP any more.

Well said. One thing for sure. All of these new generation chaos of added stuff is creating plenty of opportunities for making money. Someone manages to shine a torch ray on a dark corner of the mess, and he can sell that capability for X license fee.

You're so right about security problems. Word Press is a great example of that. Try to check the templates and CSS these days and I haven't seen so much of a mess before. Guess the messier, the more impressive it must look, but not to me. I agree with you, all of that creates vulnerabilities. Hand coding along simple lines is still the best. If one has enough integrity not to want to play the traffic and responsiveness game.

 

[smalpierre]

I still think that markup should describe what you're displaying, not how it appears on a page, or it's styling. Then again, I'm the guy that takes dang graphics peoples unusable image sizes and constrains it with width values in the tag when its the easiest way at the moment haha