HTML: <strong> tag
In this series of learning HTML, we will teach you how to use an HTML strong tag with proper syntax and lots of examples. Let’s start on the HTML strong tag.
Description of HTML strong tag
The HTML strong tag is used to define text that should be emphasized and displayed as bold. It is typically used to highlight important words or phrases within a sentence or paragraph.
Here’s an example of how to use the strong tag in HTML:
<p>Our company offers <strong>free</strong> shipping on all orders over $50.</p>In this example, the word “free” is emphasized and displayed in bold using the strong tag. When rendered in a web browser, it might look something like this:
Our company offers free shipping on all orders over $50.
Note that the strong tag is often used interchangeably with the em tag, which is used to define emphasized text that should be displayed in italics. Both tags serve to emphasize text, but the strong tag is typically used for text that is more important or critical than the surrounding text, while the em tag is used for text that is stylistically different.
Syntax of HTML strong tag
The HTML <strong> tag is used to indicate strong emphasis on a text. The syntax of the <strong> tag is as follows:
<strong>text</strong>Here, the opening tag <strong> is used to indicate the start of the emphasized text, and the closing tag </strong> is used to indicate the end of the emphasized text.
Example:
<p>This is <strong>important</strong> information.</p>In this example, the <strong> element is used to indicate that the word “important” should be emphasized. When rendered in a web browser, the word “important” will appear in a bold font, indicating its importance.
Global Attributes
The <strong> tag is an inline element in HTML used to indicate that the enclosed text should be given strong importance, typically displayed in bold font.
It doesn’t have any global attributes specific to it, but it inherits global attributes like class, id, title, style, accesskey, contenteditable, dir, hidden, lang, spellcheck, tabindex, translate.
Here’s a brief description of some of the commonly used global attributes that can be used with the <strong> tag:
class: Specifies one or more class names for an element, which can be used to apply styles to the element using CSS.id: Specifies a unique identifier for an element, which can be used to target the element with JavaScript or CSS.title: Specifies extra information about an element, which is typically displayed as a tooltip when the user hovers over the element.style: Specifies inline CSS styles for an element, which can be used to apply custom styles to the element.accesskey: Specifies a keyboard shortcut for an element, allowing the user to activate the element using a specific key combination.contenteditable: Specifies whether the content of an element is editable by the user.dir: Specifies the direction of text within an element, either “ltr” for left-to-right or “rtl” for right-to-left.hidden: Specifies that an element should be hidden from view.lang: Specifies the language of the content within an element, using a language code such as “en” for English.spellcheck: Specifies whether spell checking should be enabled for the content within an element.tabindex: Specifies the order in which elements should receive focus when the user navigates using the keyboard.translate: Specifies whether the content within an element should be translated.
Event Attributes
The <strong> tag in HTML is an inline element that is used to indicate that the enclosed text should be given strong importance, typically displayed in bold font. It does not have any specific event attributes associated with it, but it can inherit event attributes from its parent elements.
Here are some commonly used event attributes that can be used with the parent element of the <strong> tag to trigger JavaScript functions:
onmouseover: Specifies a JavaScript function to be executed when the mouse pointer moves over the element.onmouseout: Specifies a JavaScript function to be executed when the mouse pointer moves out of the element.onclick: Specifies a JavaScript function to be executed when the element is clicked.ondblclick: Specifies a JavaScript function to be executed when the element is double-clicked.onkeydown: Specifies a JavaScript function to be executed when a key is pressed down while the element has focus.onkeyup: Specifies a JavaScript function to be executed when a key is released while the element has focus.onfocus: Specifies a JavaScript function to be executed when the element receives focus.onblur: Specifies a JavaScript function to be executed when the element loses focus.onload: Specifies a JavaScript function to be executed when the element has finished loading.onunload: Specifies a JavaScript function to be executed when the element is about to be unloaded.onsubmit: Specifies a JavaScript function to be executed when the user submits a form.onreset: Specifies a JavaScript function to be executed when the user resets a form.
Other Attributes
The <strong> tag in HTML is an inline element used to indicate that the enclosed text should be given strong importance, typically displayed in bold font. Apart from global and event attributes, the <strong> tag can also have some specific attributes that are used to define or modify its behavior. However, there are no specific attributes other than global attributes that are associated with the <strong> tag.
The <strong> tag is a semantic tag that conveys meaning about the importance of the enclosed text, and it is recommended to use it for text that is conceptually important and not just for making the text bold. As a semantic tag, it is primarily used to improve the accessibility and search engine optimization (SEO) of the webpage.
In general, it is recommended to use CSS to style the text rather than relying on HTML attributes. This approach allows for greater flexibility and consistency in the presentation of the content across different devices and screen sizes.
Important Notes on HTML strong tag
Here are some important notes on using the <strong> tag in HTML:
- The
<strong>tag should be used for text that is conceptually important, not just for making the text bold. This helps to improve the accessibility and SEO of the webpage. - The
<strong>tag is an inline element that is used to indicate that the enclosed text should be given strong importance, typically displayed in bold font. - The
<strong>tag does not have any specific attributes other than the global attributes inherited from its parent elements. - It is recommended to use CSS to style the text rather than relying on HTML attributes. This approach allows for greater flexibility and consistency in the presentation of the content across different devices and screen sizes.
- In addition to the
<strong>tag, there are other semantic tags in HTML that can be used to convey meaning about the content of the webpage, such as<em>for emphasizing text and<h1>to<h6>for headings.
Browser Compatibility
The HTML strong tag has essential support with the following browsers:
- Chrome
- Internet Explorer (IE)
- Opera
- Safari (WebKit)
- Firefox (Gecko)
- Android
- Firefox Mobile (Gecko)
- Edge Mobile
- Opera Mobile
- Safari Mobile
Examples of HTML strong tag
HTML 4.01 Transitional Document
Here’s an example of how to use the <strong> tag in an HTML 4.01 Transitional document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example using strong tag</title>
</head>
<body>
<h1>Welcome to our website!</h1>
<p>Our company provides <strong>quality</strong> products at <strong>affordable</strong> prices.</p>
<p>Our team consists of <strong>experienced</strong> professionals who are dedicated to providing excellent service.</p>
<p>Don't hesitate to contact us for any inquiries or to place an order!</p>
</body>
</html>In this example, we have a basic HTML 4.01 Transitional document that includes a <title> element in the <head> section and some content in the <body> section. We use the <h1> tag to create a main heading for the page, and then we use the <p> tag to create three paragraphs of text.
Within each paragraph, we use the <strong> tag to emphasize certain words and phrases. By enclosing text within the <strong> tag, we are indicating to the browser that this text should be displayed in a bold font and that it is conceptually important.
When we view this document in a web browser, we will see that the text within the <strong> tags is displayed in a bold font, which helps to draw attention to the emphasized words and phrases. This makes the content easier to read and understand, and it can also help to improve the accessibility and SEO of the webpage.
Note that the HTML 4.01 Transitional document type declaration and the syntax of the example are slightly different from the HTML5 example, but the usage of the <strong> tag remains the same.
XHTML 1.0 Transitional Document
Here’s an example of how to use the <strong> tag in an XHTML 1.0 Transitional document:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example using strong tag</title>
</head>
<body>
<h1>Welcome to our website!</h1>
<p>Our company provides <strong>quality</strong> products at <strong>affordable</strong> prices.</p>
<p>Our team consists of <strong>experienced</strong> professionals who are dedicated to providing excellent service.</p>
<p>Don't hesitate to contact us for any inquiries or to place an order!</p>
</body>
</html>In this example, we have an XHTML 1.0 Transitional document that includes an XML declaration at the beginning to specify the encoding, a DOCTYPE declaration to specify the document type, and the use of XML namespace. We use the <title> element in the <head> section and some content in the <body> section. We use the <h1> tag to create a main heading for the page, and then we use the <p> tag to create three paragraphs of text.
Within each paragraph, we use the <strong> tag to emphasize certain words and phrases. By enclosing text within the <strong> tag, we are indicating to the browser that this text should be displayed in a bold font and that it is conceptually important.
When we view this document in a web browser, we will see that the text within the <strong> tags is displayed in a bold font, which helps to draw attention to the emphasized words and phrases. This makes the content easier to read and understand, and it can also help to improve the accessibility and SEO of the webpage.
Note that the syntax of this example is slightly different from the HTML4.01 and HTML5 examples, but the usage of the <strong> tag remains the same.
XHTML 1.0 Strict Document
Here’s an example of how to use the <strong> tag in an XHTML 1.0 Strict document:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example using strong tag</title>
</head>
<body>
<h1>Welcome to our website!</h1>
<p>Our company provides <strong>quality</strong> products at <strong>affordable</strong> prices.</p>
<p>Our team consists of <strong>experienced</strong> professionals who are dedicated to providing excellent service.</p>
<p>Don't hesitate to contact us for any inquiries or to place an order!</p>
</body>
</html>
In this example, we have an XHTML 1.0 Strict document that includes an XML declaration at the beginning to specify the encoding, a DOCTYPE declaration to specify the document type, and the use of XML namespace. We use the <title> element in the <head> section and some content in the <body> section. We use the <h1> tag to create a main heading for the page, and then we use the <p> tag to create three paragraphs of text.
Within each paragraph, we use the <strong> tag to emphasize certain words and phrases. By enclosing text within the <strong> tag, we are indicating to the browser that this text should be displayed in a bold font and that it is conceptually important.
When we view this document in a web browser, we will see that the text within the <strong> tags is displayed in a bold font, which helps to draw attention to the emphasized words and phrases. This makes the content easier to read and understand, and it can also help to improve the accessibility and SEO of the webpage.
Note that the syntax of this example is slightly different from the HTML4.01 and HTML5 examples, but the usage of the <strong> tag remains the same. The main difference between XHTML 1.0 Strict and other versions is that it enforces stricter rules for document structure and syntax.
XHTML 1.1 Document
Here’s an example of how to use the <strong> tag in an XHTML 1.1 document:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example using strong tag</title>
</head>
<body>
<h1>Welcome to our website!</h1>
<p>Our company provides <strong>quality</strong> products at <strong>affordable</strong> prices.</p>
<p>Our team consists of <strong>experienced</strong> professionals who are dedicated to providing excellent service.</p>
<p>Don't hesitate to contact us for any inquiries or to place an order!</p>
</body>
</html>In this example, we have an XHTML 1.1 document that includes an XML declaration at the beginning to specify the encoding, a DOCTYPE declaration to specify the document type, and the use of XML namespace. We use the <title> element in the <head> section and some content in the <body> section. We use the <h1> tag to create a main heading for the page, and then we use the <p> tag to create three paragraphs of text.
Within each paragraph, we use the <strong> tag to emphasize certain words and phrases. By enclosing text within the <strong> tag, we are indicating to the browser that this text should be displayed in a bold font and that it is conceptually important.
When we view this document in a web browser, we will see that the text within the <strong> tags is displayed in a bold font, which helps to draw attention to the emphasized words and phrases. This makes the content easier to read and understand, and it can also help to improve the accessibility and SEO of the webpage.
Note that the syntax of this example is slightly different from the HTML4.01 and HTML5 examples, but the usage of the <strong> tag remains the same. The main difference between XHTML 1.1 and other versions is that it is designed to work with XML-based web technologies and has stricter syntax and structural requirements.