What is the purpose of using a visually striking and prominent HTML tag?

After 15 years of working in html development and managing multiple websites, I have come to realize that bold and italic tags essentially serve the same purpose. I can apply CSS styles to both to achieve similar effects. I have even experimented with making bold text display as block lettering or a different color, but I could have easily accomplished this by adding a class instead. So, why do these tags exist? How can I explain their differences to a new colleague learning html without simply dismissing them as unnecessary?

There is a common question about the distinctions between <b> and <strong>, <i> and <em>. However, the answers provided are outdated and no longer relevant to current html/css standards.

Despite an answer to this question receiving 425 upvotes, it is riddled with inaccuracies. It is important to note that bold and strong are not styles, but rather tags that can be styled. While I understand the consideration for accessibility in terms of readability, the creation of new formatting tags seems unnecessary to achieve this goal.

htmlcss

Answer №1

HTML5 emphasizes the importance of semantic distinctions, rather than purely visual ones as seen in the past.

In HTML5, elements like <b> and <i> have specific meanings, just as <strong> and <em> do. It's important to use them according to their intended purposes.

4.6.2 The em element :

The em element represents stress emphasis of its contents.

4.6.3 The strong element:

The strong element represents strong importance, seriousness, or urgency for its contents.

4.6.16 The i element:

The i element represents [...] otherwise offset from the normal prose [...], such as a taxonomic designation, a technical term, [...].

4.6.17 The b element:

The b element represents a span of text to which attention is being drawn for utilitarian purposes [...], such as key words in a document abstract, product names in a review [...].

HTML5's focus on semantic meaning is further highlighted by the distinction between the B and I elements, which are no longer solely tied to visual styling as in HTML4/pre-CSS:

Style sheets can be used to format b elements, just like any other element can be restyled. Thus, it is not the case that content in b elements will necessarily be boldened.

Adhering to the guidelines mentioned above,

Correct:

It is <strong>important</strong> to empty the <b>Dyson</b> before it overfills.
The <i>Heterocephalus glaber</i> was <em>shivering</em> in the cold.

Incorrect:

It is <b>important</b> to empty the <strong>Dyson</strong> before it overfills.
The <em>Heterocephalus glaber</em> was <i>shivering</i> in the cold.

The foundational content was sourced from this answer by voyager, which offers highly relevant insights. However, the linked answer may not directly address the original question it was responding to, potentially leading to oversight due to a mismatched title.

Answer №2

Exploring the distinction between html strong vs bold involves recognizing that the <strong> tag signifies the significance of emphasized text, whereas the <b> tag emphasizes text without implying importance. For instance, a clear contrast can be seen in the assistive technology settings utilized by individuals with visual impairments. When the text-to-speech functionality is activated with the "speaker" feature, words will be emphasized based on the strong tag's intonation. Similarly, the <i> and <em> tags exhibit analogous behavior, with the "speaker" emphasizing the em tag with intonation.

Answer №3

Is there a difference between the two tags? One is simply for styling elements, while the other serves a semantic purpose. In reality, most browsers will just automatically make text bold regardless of the tag used. So, in short, there's no need to stress over it. From what I understand, Google will treat both the strong and bold tags the same way.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

rectifying file extension hyperlinks

While designing a webpage on my MacBook's local server, I unintentionally omitted the ".css" file extension in the href attribute of a link to my locally stored stylesheet. The mistake went unnoticed until I transferred my files to an externally hoste ...

htmlhostingwebserver

What is the process for removing a full row from a table in PHP?

Is there a way to add a delete button to delete an entire row in a MySQL database? Below you can find the code and instructions on how to delete a row using the ID, which is the primary key. <?php mysql_connect('localhost', 'off', ...

phphtmlmysql

Missing arrow icon in Bootstrap 4 navbar menu and sub menu

I am attempting to use the navbar component from Twitter Bootstrap 4 with a nested sub menu, but the arrow in the menu item that has a sub menu is not appearing at all, and I am unsure why. Here is where the arrow appears: https://i.sstatic.net/J6xI4.jpg ...

htmlcssbootstrap-4asp.net-core-2.0

JavaScript - Removing Content from an Element

I have a coding script that adds an image preview of uploaded images. The issue I am facing is that the previous image does not clear when the form is filled out again. The id of the div where thumbnail images are being displayed is "thumbnail". Can someo ...

javascriptphphtmldom

Organize JSON information in a tabular layout

After resolving my previous issue, I am now attempting to store JSON data in cookies and then retrieve it to organize the variables in tabular form. However, I am uncertain about how to go about arranging it. View the demonstration here ...

javascriptjqueryhtmljson

Looking for assistance in identifying the cause of CSS malfunction in Internet Explorer

I am encountering some challenges with the CSS on my website. I developed the site without considering Internet Explorer, and now that I am trying to address IE bugs, it feels like a daunting task. How do you approach debugging in situations like these? ...

css

Extract particular details from my database

I need help creating a table to display all chat messages sent to the server. I have the table set up, but now I want to make it so that when I click on a user's name like 'demo', it will show me all the chat messages sent by that specific u ...

phphtmlmysql

Emphasize the CSS property and give it top priority

I am struggling with setting the highest priority for the background of the <h1> element. Specifically, I want the background color specified for the <h1> to show instead of what is specified for the <a> element. h1{ background-color:b ...

htmlcss

Utilize the id in AngularJS to bring attention to a specific row within a table

I am brand new to using angularjs. I currently have a table structured like this: HTML <table class="table table-striped" id="manageResumeTable"> <thead class="text-center text-info text-capitalize"> <th class="text-center col- ...

javascriptjqueryhtmlcssangularjs

Giving identification to a pair of elements located within the same column

Struggling with assigning IDs to two elements in a single column - a dropdown and a text element. Managed it in the first scenario, but encountering issues in the second one. Seeking assistance on this matter. Scenario 1: <td> <sele ...

javascriptjqueryhtmlcss

javascript popup appears twice in IE when using PHP

After testing this script on multiple browsers, an issue arises when using IE. In all other browsers, the form submission alert only appears once. However, in Internet Explorer, the alert pops up twice. What could be causing this discrepancy? <!DOCTYP ...

javascriptphphtml

What CSS property can be used to make short words wrap to the next line?

Is it possible to automatically identify if a line of text ends with a short word and then move it to the next line, so that the text flows smoothly? This would ensure a more organized layout. For instance, I envision the following text: Cascading Style ...

htmlcss

encountering difficulty incorporating menu.php within main.php

I'm currently working on integrating the menu.php file into my main.php. Here is what I have accomplished so far: Main.php <html> <body> <?php include("menu.php"); ?> <p>This is an example to demonstrate how ...

phphtmlinclude

Struggling to find the width of an SVG text box or add line breaks after a specific number of characters?

I am currently working on creating an SVG text box using the amazing Raphael library. The content inside this text box comes from a dynamic string that is extracted from an XML document. There are times when this string turns out to be longer than the can ...

javascripthtmlsvgraphael

What is the best method for effectively organizing and storing DOM elements alongside their related objects?

In order to efficiently handle key input events for multiple textareas on the page, I have decided to create a TextareaState object to cache information related to each textarea. This includes data such as whether changes have been made and the previous co ...

javascripthtml

Getting the value of radio button groups in C# - A complete guide

Here is the HTML code: <form runat="server"> <table> <tr> <td> From Date: </td> <td> <input type="text" runat="ser ...

c#htmlasp.net

CSS - borders are overlapping with one another

Encountering an issue where the bottom border is overlapping the right border on the same element. Here's a visual representation of the problem: The green right border's bottom is appearing distorted due to the presence of the gray border at t ...

htmlcss

Embracing this web design framework with Rails

Hey there, I am currently trying to integrate a free CSS/HTML/JavaScript template into my Rails project. You can download the template from here. The template consists of an index page, a single CSS file, and two JavaScript files. To implement this templa ...

htmlcssruby-on-railsruby-on-rails-5

Challenges with personalized music player

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/CSS"> #custom{ font-family: monospace; font-size: 16px; max-width: 650px; ...

javascriptcsshtmlaudio

Transitioning background with background sizing set to cover

I have been searching for an answer to this question, but haven't found one yet. Currently, I have a series of divs with background-images set to 'background-size: cover'. My goal is to make the images zoom in and grow on hover. However, i ...

htmlcsstransitionbackground-size