About Metacubic

Metacubic is a leading mobile app and enterprise software development company! – expert in development, customization, and integration of complex enterprise-level solutions, business intelligence analytics, advanced web and mobile solutions since 2016. Metacubic offers winning app strategies, stunning app designs, powerful agile app development and stand-out launch marketing. One of the pioneers in mobile app development services, we have worked for clients that include individuals, startups, and organizations.

Contact Info
+1(302)520-2460 info@metacubic.com Suite B #305 2803 Philadelphia Pike Claymont, DE 19703 United States
Text Formatting

Text Formatting in HTML

Text Formatting in HTML

Text formatting in HTML allows web developers to control the appearance of text on a web page. Whether you want to emphasize certain words, create headings, or apply various styles to your text, HTML provides a range of tags and attributes to achieve your formatting goals.

1. Headings

HTML offers six levels of headings, from <h1> (the highest level) to <h6> (the lowest level). These headings are used to structure the content of your web page, with <h1> typically representing the main title or heading and <h2> through <h6> used for subheadings or sections. Here’s an example:

<h1>Main Heading</h1>
<h2>Subheading 1</h2>
<h2>Subheading 2</h2>

2. Paragraphs

The <p> tag is used to create paragraphs. It automatically adds space before and after the text, making it a suitable choice for regular text content.

<p>This is a paragraph of text. It can be as long or as short as needed.</p>

3. Bold Text

To make text bold, you can use the <strong> or <b> tags. Both tags are used for semantic text, but they have slightly different implications for screen readers and search engines.

<p>This text is <strong>bold</strong>.</p>

4. Italic Text

To italicize text, you can use the <em> or <i> tags. Like with bold text, these tags have semantic differences but achieve the same visual effect.

<p>This text is <em>italicized</em>.</p>

5. Underlined Text

HTML doesn’t have a dedicated tag for underlining text, but you can achieve it using CSS (Cascading Style Sheets) by setting the text-decoration property to “underline.”

<p>This text is <span style="text-decoration: underline;">underlined</span>.</p>

6. Strikethrough Text

For strikethrough text, again, HTML doesn’t have a specific tag. You can apply it using CSS by setting the text-decoration property to “line-through.”

<p>This text is <span style="text-decoration: line-through;">strikethrough</span>.</p>

7. Superscript and Subscript

To create superscript and subscript text, use the <sup> and <sub> tags, respectively. These are often used for footnotes, mathematical expressions, or chemical formulas.

<p>Water's chemical formula is H<sub>2</sub>O, and E=mc<sup>2</sup> is a famous equation.</p>

8. Text Color

You can change the color of text using the color property in CSS or inline styles. Here’s an example of inline styling:

<p>This text is <span style="color: blue;">blue</span>.</p>

9. Text Size

To adjust the size of text, use the font-size property in CSS or HTML attributes like style. Be cautious when changing text size to ensure readability.

<p>This text is <span style="font-size: 24px;">larger</span> than the rest.</p>

10. Font Family

To specify a specific font family for your text, you can use the font-family property in CSS. Ensure that the chosen font is accessible and widely supported.

<p style="font-family: 'Arial', sans-serif;">This text uses the Arial font.</p>

11. Text Alignment

Use CSS to control text alignment within elements. The text-align property can be set to “left,” “center,” “right,” or “justify.”

<p style="text-align: center;">This text is centered.</p>

12. Line Breaks

HTML includes the <br> tag for inserting line breaks. It’s useful when you want to force text onto a new line within a paragraph or other text container.

<p>This is a line of text.<br>And this is on a new line.</p>

13. Horizontal Rules

The <hr> tag creates a horizontal rule, often used to separate content sections visually.

<p>This is some content above the rule.</p>
<p>This is content below the rule.</p>

14. Blockquotes

To indicate quoted text or excerpts, use the <blockquote> element. You can also include a citation with the <cite> element within it.

This is a quoted text.
<cite>— John Doe</cite>

15. Code and Monospace Text

To display code or text in a monospace (fixed-width) font, use the <code> or <pre> elements. <code> is for inline code, while <pre> is used for displaying code blocks with preserved formatting.

<p>Use the `<code>` element for inline code.</p>

function greet() {
console.log("Hello, world!");

16. Abbreviations and Acronyms

HTML provides the <abbr> element to define abbreviations and acronyms. The title attribute can be used to provide the full explanation when users hover over the abbreviation.

<p>HTML stands for <abbr title="Hypertext Markup Language">HTML</abbr>.</p>

17. Marked or Highlighted Text

The <mark> element is used to highlight or mark text within a paragraph or block of content. It’s often used for indicating search results.

<p>This is some <mark>highlighted</mark> text.</p>

18. Superscript and Subscript

In addition to the previously mentioned <sup> and <sub> tags, you can also use <sup> and <sub> within text to create small characters for things like mathematical expressions or chemical formulas.

<p>The formula for water is H<sub>2</sub>O, and 10<sup>2</sup> equals 100.</p>

19. Text Transformation

HTML provides the text-transform property in CSS to change the case of text, making it uppercase, lowercase, or capitalized.

<p style="text-transform: uppercase;">This text is in uppercase.</p>
<p style="text-transform: lowercase;">THIS TEXT IS IN LOWERCASE.</p>
<p style="text-transform: capitalize;">this text is capitalized.</p>

20. Non-Breaking Space

To prevent the browser from breaking a line at a specific space, you can use the non-breaking space character &nbsp;.

<p>This is some text that&nbsp;cannot be broken.</p>


HTML provides a versatile set of tags and attributes for text formatting, allowing web developers to create visually appealing and structured content. By using these HTML elements in combination with CSS, you can tailor the appearance of text to meet your design and readability requirements, making your web pages engaging and user-friendly.

Post a Comment