Formatting tags in HTML
Table of contents
No headings in the article.
If I want to make the text Bold, we have two tags <b> and <strong>
<b> - Bold
<b> is used to draw the reader's attention to the element's content below
we have used class as an in-line attribute in <b> tag, we will discuss class in CSS-related blogs
<body>
<p>Botany, also called plant science(s), <b class="BIO">plant biology or phytology</b>, is the science of plant life and a branch of biology. A botanist, plant scientist or phytologist is a scientist who specialises in this field.</p>
</body>
<b> cannot be used to represent headings and title
as best practice <b> can be used when it serves some semantic information like class
CSS can be used to make bold instead of <b> tag, as this is depreciated from HTML4
<strong> - Strong
the strong element indicates it content has strong importance or seriousness or urgency
<body>
<p> <b> A cough is your body's way of responding when something irritates your throat or airways.</b> An irritant stimulates nerves that send a message to your brain. The brain then tells muscles in your chest and abdomen to push air out of your lungs to force out the irritant.</p>
<p>cought syrup: a medicated, syruplike fluid, usually flavored and nonnarcotic or mildly narcotic, for relieving coughs or soothing irritated throats. <strong>drinking syrup beyond given doses leads to choronic disease <br> Do not use </strong>cough and cold products in <strong> children under 2 years of age </strong> unless directed by a physician.</p>
</body>
explanation about cough must draw the reader's attention whereas cough syrup taken beyond prescribed doses should be treated as serious or urgent content
<i> - Italic text
<i> tag is used to denote content that is different from normal text such as idiomatic text, definition, and technical terms, before HTML4 this <i> was used only for presentational change similar to <b> to display bold text but now <i> comes with semantic meaning and mostly CSS is used for presentation changes in the text.
<p>The term "botany" comes from the Ancient Greek word <i lang="la"> βοτάνη (botanē) </i>meaning <i>βοτάνη</i> is in turn derived from <i>βόσκειν (boskein)</i>,Botany originated in prehistory as herbalism with the efforts of early humans </p>
sometimes <i> can be used to denote text from a different language using attribute lang like above
<em> Emphasis
<em> is used for words which have stress emphasis content compared to surreounding text, which could a word or words of a sentence
<p>Hang him <em> don't </em> leave him </p>
the output of <em> is always in italic but one should not use it for italic styling purpose as semantics is different, for styling only CSS be used, to mark as strong importance or urgency then <strong> can be used.
<small> - small text
<small> is used on content to emphasize information that has secondary significance, such as terms and conditions, copyright, disclaimers
<small> reduce the font size by one unit like from medium to small, small to x-small however based on the font used the size may vary, arial looks small than times roman and larger than Verdana
<small> tag has in-line display property and no specific attributes support global attributes such as class, dir, or style(when learning CSS we will explore all these topic)
<p>This webpage has information related to small tag <br>
<small>© copyright reserved </small> </p>
however, in case of <small> tag is used as a nested tag then font size can be varied depending on the parent element
<p style="font-size: 20px;">small tag font size may vary based on parent text font size <br>
<small>this is small text inside parent p <br>
<small> this is small text 2 inside small tag</small></small></p>
<p> display in size of 20 and nested tag <small> is further reduced based on parent <p> tag and another nested <small> is further reduced from parent <small>
<small> increase it's font size when parent <p> is increased, size of <small> is directly proportional to <p>
Note: <small> cannot reduce size below the minimum required browser font size, let's see how?
<p >small tag font size may vary based on parent text font size <br>
<small>this is small text inside parent p <br>
<small> this is small text 2 inside small tag
<small>this is small text 3 <br>
<small>this is small 4 <br>
<small> this is small text 5 <br>
<small>this is small text 6 <br>
<small>this is small text 7 <br>
<small> this is small text 8 <br>
<small>this is small text 9 <br>
<small>this is small text 10 <br>
<small>this is small text 11 <br>
<small> this is small text 12 <br>
<small>this is small text 13 <br></small>
</small>
</small>
</small>
</small>
</small>
</small>
</small>
</small>
</small>
</small>
</small></small></p>
whenever using <small> as a separate element, changing any other element font size will not affect <small> content
<sub> - subscript
As the name suggests content inside <sub> is smaller in size and appears below normal text, this tag comes in <body> tag and in-line display property which has only global attributes
Mostly <sub> is used in mathematical and chemical formulas, footnotes
<p>Chemical formula for <b>water: </b> is H <sub>2</sub>O </p>
Foot note can be prescribes like below
<p>Seasons remind us that change is the law of nature and a sign of progress. In India, there are mainly six seasons as per the ancient Hindu calendar <em> (the Lunisolar Hindu)</em>. <br> These seasons include Vasant Ritu ( <strong> Spring </strong><sub>1</sub> ), Grishma Ritu <strong>(Summer <sub>2</sub> </strong>), Varsha Ritu ( <strong> Monsoon <sub>3</sub> </strong>), Sharad Ritu ( <strong> Autumn <sub>4</sub> </strong>), Hemant Ritu (Pre-Winter) and Shishir Ritu (Winter).</p>
<sup> - Superscript
<sup> is used to define a text as superscript in HTML which is solely for typographical representations. A superscript text that appears half above the baseline text and rendered in smaller-size text
<sup> can be used in the following(not limited to this)
exponents: The most common use of superscript is to display power of the number, like 2 to the power 3.
superior lettering: In typography and handwriting superior letter is a lowercase letter that places above baseline text and is made smaller than the ordinary letter, these are commonly used in French, Spanish, and Italian and their appearance in English is diminished.
Most commonly used are Me for 'Maestro' and Mgr stands for monseigneur.
Ordinal numbers: We can write 4th instead of fourth
ARAI Concerns
As there is no other way to show power or exponent in HTML, we have to use the <sup> tag, here it is a superscript tag, not an exponent tag, when we use screen readers for HTML text 2<sup>3</sup>, we cannot expect the browser to read "two superscript three" or "two to the power three" if it does then superior lettering will sound odd.
<ins> - Insert
<ins> HTML elements represent the block of text which has been recently inserted into the document, the inserted line will come with an underline however this can be changed using the CSS text-decoration property.
<ins> has two attributes called cite and datetime along with global attributes
attributes come with name and value pair where the value will be entered inside double quotes
<ins> is more effective when combined with <del> because <del> displays the text which has been deleted and <ins> denotes which text has been inserted kind of replacing the old text
cite: cite attribute can have a URL to another document or site which explains why this text is inserted
datetime: attribute has data and time information along with optional time information, if the browser cannot interpret datetime then the element does not have an associated timestamp
<p> <b>HTML</b> is <ins>Hyper Text Markup Language </ins>developed for <ins>structure</ins> the content of page rather than presentation <br>
HTML file name extention is <del>htm</del> <ins cite="https://www.w3.org/" datetime="2023-02-07T14:17:20Z">which is before HTML5, now as per consortium, new extension is html</ins> </p>
Concerns:
Most screen reader software does not detect ins elements by default, we need to announce using CSS content property along with:: before and:: after pseudo-elements
<u> - Underline: <u> HTML element represents a range of text rendered in such a way as to indicate non-textual annotation, this may be rendered with simple solid underline, which can be altered using CSS
<u> was deprecated in HTML4 however in version HTML5 <u> has been restored with the semantic meaning of markdown text which is a nontextual annotation
mostly <u> used to denote misspelled words in certain cases <u> cannot be used for text which is not having any semantic meaning instead CSS text-deacoration property can be achieved
<p>my name is goudham which is always mispelled as <u style="text-decoration: red underline;">goutham or gautham</u></p>
<del> - Delete: <del> HTML element represents a block of text which are removed from the document, tracking the changes, <del> is more efficient when combined with <ins> tag
<del> has two attributes: cite -> can specify URL or other source explains why a block of text is deleted then datetime -> used to specify when text has been deleted which has date and optional time value.<p>the underline tag has been <del> deprecated in version HTML4</del> <ins> restored in HTML5 with semantic meaning </ins></p>
<p>the underline tag has been <del datetime="2023-02-07T18:11:59Z"> deprecated in version HTML4</del> <ins> restored in HTML5 with semantic meaning </ins></p>
<mark> - Mark: <mark> HTML elements represent text which is marked or highlighted for quick reference inside another element, it must specify with opening and closing tag.
by default highlighted color will be yellow, and we can change color and even shapes using CSS property
in simple words, in childhood days we use to highlight text which is relevant using pen, similarly, on a web page we can use <mark> to mark the text for relevance. kindly note we should not use <strong> tag for mark as strong is meant for text importance and <mark> meant for text relevance
<p>Live sever in VS code is to <mark style="background-color: blueviolet;">nofity</mark> web page when there is <mark>change of state in RAM</mark> </p>
<mark> supports all triggering events like onclick, onload, onfocus.