Learn HTML Part 6: How to Make Italic and Bold Text in HTML

Learn HTML Part 6: How to Make Italic and Bold Text in HTML

Geekers - In an HTML document, of course, there is text that is italicized and bold according to the requirements and the applicable writing conditions. HTML itself has many elements in text formatting so that it is displayed in the browser in bold, italic, underlined, and so on.


In this material, I will explain how to make italic and bold text in HTML. In general, text formatting in bold can use the <b> tag and <strong> tag, while writing in italic can use the <i> tag and <em> tag.



Although the <b> tag and <strong> tag both display bold print in the browser, of course the way and purpose of their use is different. It is the same as using <i> tags and <em> tags. The use of <b>, <strong>, <i> and <em> tags is supported by many browsers including Google Chrome, Mozilla Firefox, Internet Explorer, Safari and so on.


In general, there are two elements in formatting, namely Logical Formatting and Physical Formatting. Physical Formatting is used to format text according to the characteristics of the text, while Logical Formatting is used to format text according to the content or contents of the text. <b> tag and <i> tag are Physical Formatting while <strong> tag and <em> tag are Logical Formatting. For more details about the four tags above, see the explanation below:


A. <b> tags and <strong> tags


Previously, it was suggested that the <b> tag be abandoned because it was replaced with CSS which handles display. But since the advent of HTML5, the <b> tag is considered a “stylistically offset� namely as a marker of a keyword or other text that is deemed necessary to be distinguished from other texts. Whereas strong in HTML5 is used to indicate that text is important and becomes a keyword in search engines (search engines). However, in HTML 4.01, the <strong> tag is used to define a strong emphasis on a text (emphasis).



The following is an example of using <b> and <strong> tags:

<!DOCTYPE html>

<html>

  <head>

   <title> Use of Bold Text Format<title>

  </head>

  <body>

   <b>Kekinian</b> is a website consisting of various <strong>articles about

IT</strong>.

  </body>

  </html>


The result after being displayed in the browser:


how to make text bold in html how to make text bold in html


Here I make Present with the <b> tag because it is considered a keyword and as a word that needs to be distinguished from the others. While "a collection of interesting essays"? made with the <strong> tag because it is considered as important text and used as keywords in search engines.



In CSS, browsers generally display <b> and <strong> elements with fixed values ie

font-weight : bold.


B. <i> tags and <em> tags


As with the <b> tag and <strong> tag, since the emergence of HTML5, the <i> tag has been recognized again but as a sign that the text is different from the others, such as for writing book titles, publishers, adaptation words, and so on.


While the <em> tag has the meaning of stress emphasis, which is stated as text that needs to get special emphasis or attention. The use of the <em> tag is very important as a keyword in Search Engines.


The following is an example of using the <i> and <em> tags:

<!DOCTYPE html>

<html>

 <head>

 <title>Italicized Text in HTML</title>

 </head>

 <body>

 <i>United Indonesia</i> is the title of a book that teaches us the meaning

 <em>nationalism</em>

 </body>

</html>


The result after being displayed in the browser:


how to make italics in html how to make italics in html


From the picture above it can be seen that “United Indonesia� written in italics using the <i> tag because it is a book title. Meanwhile, the word "nationalism"? italicized using the <em> tag because it is a word that needs emphasis and is considered important.



In CSS, browsers generally display <i> and <em> elements with a fixed value, namely font-style: italic. If you already understand the function of the four tags, please refer to the next HTML tutorial on how to make text with underlines and crossed out in HTML.

([24]Submit) Part 5: How to Make Paragraphs

([26]Submit) Part 7: Underline and Strikethrough

Share:

Top Ads

Responsive Ads

Bottom Ads

Responsive Ads