HTML Formatting

In today's digital world, being an expert in web development opens doors to countless opportunities. With my extensive experience in the industry, I've seen firsthand the importance of mastering fundamental skills like HTML formatting. HTML serves as the building block of every website, making it essential for anyone serious about succeeding in this field.

Throughout my career, I've dedicated myself to mastering HTML, learning its ins and outs to create websites that not only meet but exceed expectations. Now, I'm excited to share my knowledge with you. Let’s cover the basics of HTML formatting in this tutorial here.

What is HTML Formatting?

Let us start with a basic understanding of what HTML formatting is.

HTML formatting is the practice of using HTML (Hypertext Markup Language) tags to structure and style material on a website. These tags define the layout, look, and organization of text, images, links, and other elements on a webpage. 

HTML formatting allows developers to generate visually beautiful and well-structured information that consumers can read and navigate with ease.

Physical and Semantic tags in HTML

There are two types of HTML formatting tags, they are physical and semantic. Let me explain the differences between the two.

HTML Text Formatting tags

HTML text formatting is done through the use of several tags provided to us. Each individual tags provide a unique functionality. Here, let us discuss the text formatting tags in HTML with example to learn them better.

Bold text

In HTML, we can make the text bold on a web page using the <b> tag or bold tag. This emphasizes the important part of the sentence or text. This tag is one of the HTML formatting elements. Let me show you how to use the tag in HTML using an example.

Code:

Here, we have used the bold tag or <b> to make the words “bold tag” in the second paragraph bold. Similarly in the above example, we have also shown that we can use the <strong> tag to achieve the same effect. A point to note here is that <b> tag is just a physical tag but <strong> tag is a semantic tag.

Italic text

To make a certain part of the text italic, we use the italic tag ( <i>). It is a physical tag. Let me show you how to use it with the help of an example.

Code:

In the above example, “ italic text ” is a part of the paragraph that has been italicized with the use of the <i> tag as you can see.

Underlined text

We can underline texts in HTML as well to emphasize important text. We can use the <u> tag to underline the text we want underlined. Let me show with the help of an example.

Code:

In the above example, we have used the <u> tag to underline “underlined text” in the paragraph.

Strike text

When we want to show that some content is deleted or is not supposed to be there, we generally use the strike tag. This puts a thin line over the text, striking it out. Let me explain with the help of an example.

Code:

In the above example, we have two paragraphs. In the first one we have used the <s> tag while in the second paragraph, we have used the <strike> tag. Both can be used to gain the same effect.

Monospaced font

The majority of fonts we use today are known as variable-width fonts because distinct letters have different widths (for example, 'm' is wider than 'i'). Every letter is of the same width in a monospaced font. This is used to create a certain aesthetic. Let me explain with the help of an example.

Code:

As you can see in the above example, I have used the <tt> tag to make “monospaced” in the paragraph use the effect. However, you should note that we no longer usually use <tt> in HTML as it is deprecated but we can use the same effect from CSS. Let me show you how with the help of an example.

Code:

Here, we have used internal CSS to define the font in the <style> tag at the beginning of the program. Then, later on, we used the <pre> tag to enforce the style attributes in the paragraph “This part of the content will be monospaced.”

Subscript and Superscript

We use <sub> and <sup> to have the effect of subscript and superscript respectively in HTML. Although these two tags are often used for subscript and superscript, their actual rendering can vary slightly depending on the web browser and font used. Let me explain with the help of an example.

Code:

In the above example, it is clearly denoted that we have used the <sub> tag to denote subscript in the formula of water. In the next paragraph, I have used the <sup> tag to write the formula of relativity.

Table formatting in HTML

Just like texts, we can also change basic HTML table format with the help of useful tags. Let me explain with the help of an example.

Code:

In the above example, We have used the following formatting tags.

• We have used <style> tag to incorporate CSS.
• We have used <caption tag for putting the caption of the table.
• The concept of ‘nth-child’ has been used to color the odd rows.
• We have used the <tfoot> tag to put the footer.

Whether you're just starting your journey in the tech world or you're a seasoned professional keeping up with the latest trends, online software development courses offer invaluable insights, practical knowledge, and hands-on projects to boost your skills and advance your career. 

In Conclusion

HTML formatting is crucial for creating visually appealing and well-structured web content. Using HTML tags and CSS, developers may improve the presentation of text, graphics, and other elements on web pages, making them more engaging and user-friendly.

If you want to learn more about HTML, I would recommend getting a professional online certification. upGrad can be your go-to option for this. With courses in collaboration with some of the best universities, you’ll have the opportunity to learn from industry experts in the field of computer science.

Frequently Asked Questions

1. What is HTML formatting?

HTML formatting refers to how content is organized and presented on a web page using HTML (Hypertext Markup Language) tags. These tags specify the layout, appearance, and style of text, images, links, and other elements on a web page.

2. What is the correct HTML format?

The proper HTML format for website starts with the basic components such as <!DOCTYPE>, <html>, <head> <body>. Custom elements can be added later.

3. How do you add formatting to HTML?

HTML can be formatted with HTML elements such as <strong> for bold text, <u> for underlining, <em> for emphasizing elements like headings, paragraphs, and so on. We can use CSS for more advanced formatting including colors, fonts, margins, padding, and layout.

4. How do you create an HTML format?

We can use tags like <html>, <head>, <!Doctype>, <body> for the basic formatting. To add content, we can use tags like <h1> to <h6> for headings, <p> for paragraphs, <img> for images.

5. Is HTML a formatting language?

No, HTML is not primarily a formatting language. It is a markup language used to structure and organize material on web pages. HTML contains components for basic text formatting.

6. What is the first format of HTML?

Tim Berners-Lee introduced the original coding format in HTML, HTML 1.0, in 1991. This early version of HTML supported basic formatting elements like headings, paragraphs, lists, links, and images.

7. What is the structure of HTML?

The simple HTML format is.

• <!DOCTYPE>
• <html>
• <head>
• <body?

This is only an HTML format example, there are more tags used when creating a full-fledged website.

8. Is HTML an open format?

Yes, Hypertext Markup Language (HTML) is an open format. It is a World Wide Web Consortium (W3C) standard, and its specifications are freely accessible.