{"id":87,"date":"2025-11-28T15:39:20","date_gmt":"2025-11-28T15:39:20","guid":{"rendered":"https:\/\/blogen.oplenyx.com\/?p=87"},"modified":"2025-12-04T15:16:31","modified_gmt":"2025-12-04T15:16:31","slug":"html-tags-how-to-format-text-in-html","status":"publish","type":"post","link":"https:\/\/www.oplenyx.com\/blog\/en\/html-tags-how-to-format-text-in-html\/","title":{"rendered":"HTML tags: How to format text in HTML"},"content":{"rendered":"\n<p>In this post, we&#8217;ll learn how to format text in HTML, and we&#8217;ll explain it in detail. Before we begin, welcome to our website. Welcome!<\/p>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-link-color wp-elements-dca794921bb1d5e9d2bc9e55c45a9ed6\">Note: Before starting the explanation, I would like to tell you that you can do without these elements that I will explain, by using the CSS styling language.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements\/b\" target=\"_blank\" rel=\"noreferrer noopener\">Bold<\/a> element:<\/h2>\n\n\n\n<p>The <strong>&lt;b&gt;<\/strong> tag is primarily used to draw the reader&#8217;s attention to the element&#8217;s content. Formerly known as the bold element, it displays the element&#8217;s text in bold in the browser.<\/p>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>&lt;b&gt;Element content&lt;\/b&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements\/strong\" target=\"_blank\" rel=\"noreferrer noopener\">Strong<\/a> element :<\/h2>\n\n\n\n<p>The <strong>&lt;strong&gt;<\/strong> tag is used in content of great importance or urgency, and the text of the element is displayed in bold on the browser.<\/p>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>&lt;strong&gt;Element content&lt;\/strong&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements\/i\" target=\"_blank\" rel=\"noreferrer noopener\">Italic<\/a> element:<\/h2>\n\n\n\n<p>The <em><strong>&lt;i&gt;<\/strong><\/em> tag is used as separate text on top of regular text, such as idiomatic texts or classificatory labels, and the element&#8217;s text is displayed in italics on the browser.<\/p>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>&lt;i&gt;Element content&lt;\/i&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements\/em\" target=\"_blank\" rel=\"noreferrer noopener\">Emphasis <\/a>element:<\/h2>\n\n\n\n<p>The <strong><em>&lt;em&gt;<\/em><\/strong> tag is used in text that needs emphasis from the reader, in other words, it needs to be stressed, and the element&#8217;s text is displayed to the browser in italics.<\/p>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>&lt;em&gt;Element content&lt;\/em&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements\/em\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements\/u\" target=\"_blank\" rel=\"noreferrer noopener\">Underline<\/a> element:<\/h2>\n\n\n\n<p>The <strong>&lt;u&gt;<\/strong> tag is used in non-textual content that requires visual checking by the reader, such as spelling mistakes, foreign terms, and unfamiliar phrases. When displayed on the browser, a line is displayed under the text containing the element.<\/p>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>&lt;u&gt;Element content&lt;\/u&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements\/s\" target=\"_blank\" rel=\"noreferrer noopener\">Strikethrough<\/a> element:<\/h2>\n\n\n\n<p>The <strong>&lt;s&gt;<\/strong> tag is used for text that is no longer relevant or inaccurate in the document, and when viewed in a browser, a center line is added to the text inside the element.<\/p>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>&lt;s&gt;Element content&lt;\/s&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements\/ins\" target=\"_blank\" rel=\"noreferrer noopener\">Inserted Text<\/a> element:<\/h2>\n\n\n\n<p>The <strong>&lt;ins&gt;<\/strong> tag is used as a range of text added to the document. When viewed in a browser, a line is added under the text in the element.<\/p>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>&lt;ins&gt;Element content&lt;\/ins&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements\/del\" target=\"_blank\" rel=\"noreferrer noopener\">Deleted Text<\/a> element:<\/h2>\n\n\n\n<p>The <strong>&lt;del&gt;<\/strong> tag is used as a range of deleted text from the document. When viewed in a browser, a center line is added to the text within the element.<\/p>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>&lt;del&gt;Element content&lt;\/del&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements\/small\" target=\"_blank\" rel=\"noreferrer noopener\">Small<\/a> element:<\/h2>\n\n\n\n<p>The <strong>&lt;small&gt;<\/strong> <small>tag is used in side comments and small texts such as copyright notices, and when viewed in a browser, the element&#8217;s content is displayed in small print.<\/small><\/p>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>&lt;small&gt;Element content&lt;\/small&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements\/mark\" target=\"_blank\" rel=\"noreferrer noopener\">Mark<\/a> element:<\/h2>\n\n\n\n<p>The <strong>&lt;mark&gt;<\/strong> tag is used for text that is highlighted, such as text that needs to be important, and when displayed on the browser, the text in the element is displayed with a yellow background.<\/p>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>&lt;mark&gt;Element content&lt;\/mark&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements\/sub\" target=\"_blank\" rel=\"noreferrer noopener\">Sub<\/a> element:<\/h2>\n\n\n\n<p><sub>The <strong>&lt;sub&gt;<\/strong> tag is used in texts that need to appear as subtext in a small size, such as partial formatting. When displayed on the browser, the text in the element is displayed as subtext in a small size.<\/sub><\/p>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>&lt;sub&gt;Element content&lt;\/sub&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements\/sup\" target=\"_blank\" rel=\"noreferrer noopener\">Sup<\/a> element:<\/h2>\n\n\n\n<p><sup>The <strong>&lt;sup&gt;<\/strong> tag is used for texts that need to appear as top text, such as mathematical equations, and when viewed in the browser, the text in the element is displayed as top text in a small size.<\/sup><\/p>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>&lt;sup&gt;Element content&lt;\/sup&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">How to use text formatting tags in an <a href=\"https:\/\/www.oplenyx.com\/blog\/en\/create-or-open-an-html-file-in-visual-studio-code\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML page<\/a>:<\/h2>\n\n\n\n<pre class=\"wp-block-code alignwide\"><code>&lt;DOCTYPE html!&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;meta charset=\"utf-8\" \/&gt;\n    &lt;title&gt;Page or Website Name&lt;\/title&gt;  \n  &lt;\/head&gt;\n\n  &lt;body&gt;\n    &lt;h1&gt;&lt;em&gt;What is Lorem Ipsum?&lt;\/em&gt;&lt;\/h1&gt;\n    &lt;p&gt;\n      &lt;strong&gt;Lorem Ipsum&lt;\/strong&gt; is simply dummy text of the printing\n      and typesetting industry.\n      Lorem Ipsum has been the industry's standard dummy text ever since\n      the 1500s, when an unknown printer took a galley of type and scrambled it\n      to make a type specimen book. It has survived not only five centuries, \n      but also the leap into electronic typesetting, remaining essentially \n      unchanged. It was popularised in the 1960s with the release of Letraset\n      sheets containing Lorem Ipsum passages, and more recently with desktop \n      publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-link-color wp-elements-f44db72d38df927aaf3ab2214ffb6573\">Note: When you insert an element inside another element in HTML, always make sure to close the inner element before the outer one. For more details, pay close attention to the HTML page listed above.<\/p>\n\n\n\n<p>Here we have reached the end of this post, in which we learned How to format text in HTML.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this post, we&#8217;ll learn how to format text in HTML, and we&#8217;ll explain it in detail. Before we begin, welcome to our website. Welcome! Note: Before starting the explanation, I would like to tell you that you can do without these elements that I will explain, by using the CSS styling language. The Bold&hellip;&nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[3],"tags":[],"class_list":["post-87","post","type-post","status-publish","format-standard","hentry","category-html-essentials"],"_links":{"self":[{"href":"https:\/\/www.oplenyx.com\/blog\/en\/wp-json\/wp\/v2\/posts\/87","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oplenyx.com\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.oplenyx.com\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.oplenyx.com\/blog\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oplenyx.com\/blog\/en\/wp-json\/wp\/v2\/comments?post=87"}],"version-history":[{"count":18,"href":"https:\/\/www.oplenyx.com\/blog\/en\/wp-json\/wp\/v2\/posts\/87\/revisions"}],"predecessor-version":[{"id":200,"href":"https:\/\/www.oplenyx.com\/blog\/en\/wp-json\/wp\/v2\/posts\/87\/revisions\/200"}],"wp:attachment":[{"href":"https:\/\/www.oplenyx.com\/blog\/en\/wp-json\/wp\/v2\/media?parent=87"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.oplenyx.com\/blog\/en\/wp-json\/wp\/v2\/categories?post=87"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.oplenyx.com\/blog\/en\/wp-json\/wp\/v2\/tags?post=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}