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

GraphQL with React: The Complete Developers Guide

GraphQL with React: The Complete GraphQL Developers Guide Learn and master GraphQL by building real web apps with React and Node What Will I Learn? Build amazing single page applications with React JS and GraphQL Master fundamental concepts behind structuring GraphQL servers Realize the power of building flexible data schemas Be the engineer who explains how GraphQL works to everyone else, because you know the fundamentals so well Become fluent in the ecosystem supporting GraphQL, including the differences between Apollo and Relay Requirements Familiarity with React Description Note: This course assumes you are familiar with React ! If you're tired of spinning your wheels trying to figure out what type of backend server to use, this is the course for you. Authentication?  You will learn it.   Apollo Data?  Included.   Integration with React?  Of course! This GraphQL Developers Guide will get you up and running with Grap...

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...