Skip to main content

6. HTML Text Formating

Web pages consist of content. That content must be formatted in some occasions to our needs. The way to do it is by using the Text Formatting elements as outlined bellow. Remember that every element has a start tag and an an tag.

<b>Bold text</b>
<strong>Important text</strong>
<ins>Inserted text</ins>
<i>Italic text</i>
<em>Emphasized text</em>
<sub>Subscript text</sub>
<sup>Superscript text</sup>
<mark>Marked text</mark>
<small>Small text</small>
<del>Deleted text</del>

<b> and <strong> elements


Both elements are quite the same in nature but different in coding so that the web developer makes a difference between them. The visual representation of the code is the same. the <strong> element stresses the importance of the content within that particular element.
<b>Some content</b>
<strong>Some content</strong>

 

<i> and <em>


<i>Some content</i>
<em>Some content</em>

Both elements display the text in italic but the code is different. The <em> element stresses the importance of the content within that particular element.

<ins> element


The <ins> element defines an inserted text (underline text)
<p>Some content is <ins>inserted</ins></p>

<sub> sub-scripted element


Let's say we want to present the number two sub-scripted in this example X2
<p>X<sub>2</sub></p>

HTML Text Formatting elements

<sup> super-scripted element


Let's say we want to present the number two super-scripted in this example X2
<p>X<sup>2</sup></p>

HTML Text Formatting elements

<del> element


Lets say we want to cross line the text developer bellow. To do that we use the <del> element
<p> I am a <del>developer</del></p>

HTML Text Formatting elements

<mark> element


If we want to highlight a portion of a text within paragraph then we use <mark> element for that purpose
<p> I am a <mark>web developer</mark></p>

HTML Text Formatting elements

<small> element


How great would it be if you can manipulate with the size of a text within a heading for an instance
<h1> I am a <small>web developer</small></h1>

HTML Text Formatting elements

Notice how the web developer text is a bit smaller

To recap we learned about the following HTML Text Formatting elements. We can use them anywhere within the <body> of the web pages.
<b>Bold text</b>
<strong>Important text</strong>
<ins>Inserted text</ins>
<i>Italic text</i>
<em>Emphasized text</em>
<sub>Subscript text</sub>
<sup>Superscript text</sup>
<mark>Marked text</mark>
<small>Small text</small>
<del>Deleted text</del>

 

Comments

Popular posts from this blog

Oracle DBA 11g/12c - Database Administration for Junior DBA

Oracle DBA 11g/12c - Database Administration for Junior DBA Learn to become an Oracle Database Administrator (DBA) in 6 weeks and get a well paid job as a Junior DBA What Will I Learn? Final Goal: Get a job as an Oracle Database Administrator (Oracle DBA) As a Oracle Database Administrator (Oracle DBA), you would be able understand the Database Architecture, which will help you to perform your DBA duties with better understanding. As a Oracle Database Administrator (Oracle DBA), you would be able to Install the necessary Oracle Software/Database As a Oracle Database Administrator (Oracle DBA), you would be able to Administer User accounts in the Database As a Oracle Database Administrator (Oracle DBA), you would be able to Manage Tablespace's to provide required space for the data As a Oracle Database Administrator (Oracle DBA), you would be able perform Backup and Recovery as needed. As a Oracle Database Administrator (Oracle DBA), you would be able to diagnose ...

Docker Mastery: The Complete Toolset From a Docker Captain

Docker v17.09 Latest! Build, compose, deploy, and manage Docker containers from development to DevOps based Swarm clusters What Will I Learn? How to use Docker and Compose on your machine for better software building and testing. Build a fancy multi-node Swarm cluster for production deployments! Skills to build advanced development environments with your code running in containers. Update and change your Swarm Services without downtime using rolling updates. Hand's-on with best practices for making files and Compose files like a Pro! Experience using multi-host logging and event monitoring for Docker Swarm. Build and publish your own custom images. Understand the new Windows Containers, and try your hand at ARM Containers. Requirements No paid software required - Just install your favorite text editor and browser! Local admin access to install Docker for Mac/Windows/Linux. Understand terminal or command prompt basics. Li...

Gut Healing Protocol Online Course

Gut Healing Protocol Online Course An 8 Week, Holistic Program For You To Re-balance Your Gut What Will I Learn? Apply an effective gut healing program without missing out on life! Tailor a gut healing program to suit their unique body! Requirements Students should be ready to listen to their body - a very basic understanding of nutrition may help. Description The GHP Online Program with gut-health researcher Kale Brock is a holistic, 8 week kickstarter program for you to rebalance your gut health. By doing so you'll optimise your immune system, digestion & weight management. This comprehensive, gentle, relaxed approach to discovering gut health has seen thousands of individuals achieve abundant energy levels, glowing skin & clarity of mind. Through easy to follow video content with a sound scientific basis, participants are educated on the foundational underpinnings of the gut & microbiome. We delve into the history of antibiotics & their eff...