Sign in
Log inSign up

Text formatting in HTML

Satish Maurya's photo
Satish Maurya
·Aug 13, 2021·

2 min read

description list <dl>

Each term is wrapped in a <dt> (description term) element, and each description is wrapped in a<dd> (description definition)

<dl> <dt>air</dt> <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis eum </dd> <dt>water</dt> <dd>Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo quae delectus! </dd> <dt>soil</dt> <dd>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure consequuntur harum possimus?</dd> </dl>

image.png

abbreviations

<p>We use <abbr title="casceding style sheets">CSS</abbr> to style our web documents.</p>

<p>I think <abbr title="pollution">pol</abbr> is the main cause of lungs deseases</p>

image.png

marking contacts

<address><p>DLW, varanasi, uttarpradesh, india</p> </address>

image.png

subscript and superscript

<p>i bought my new car on 22<sup>th</sup> of feb 2021.</p>

<p>Caffeine's chemical formula is C<sub>6</sub>H<sub>12</sub>O<sub>6</sub</p>

image.png

showing code in HTML

  1. code <code> for marking pieces of code

  2. pre <pre> for retaining whitespace along with code

  3. kbd <kbd> For marking up keyboard input entered

  4. samp <samp> For marking up the output of a computer program.

<code>var para = document.querySelector('p'); para.onclick = function() { alert('you are on code page'); }</code>

<pre> var para = document.querySelector('p'); para.onclick = function() { alert('ypu are on code page'); } </pre>

<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> <kbd>A</kbd></p>

<samp>PING mozilla.org (63.245.215.20): 56 data bytes 64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp>

image.png

marking time and date

HTML also provides the <time> element for marking up times and dates in a machine-readable format.

<time datetime="2021-01-23">23 January 2021</time>

image.png