– Styling and Structuring Web Page Content
When you build a web page using HTML, the way your content is structured and styled plays a huge role in how users experience it. While CSS is used for detailed design, HTML provides several basic formatting tags that help you emphasize and organize content right out of the box.
In this blog, we’ll cover HTML basic tags, formatting tags, and a bit about HTML color coding — perfect for beginners learning how to bring life to plain text.
What Are HTML Formatting Tags?
Formatting tags in HTML are used to:
- Make text bold, italic, or underlined
- Highlight or color text
- Mark important sections
- Organize content semantically
These tags don’t require any external styling and are supported by all browsers.
Basic HTML Tags You Should Know
Here are some essential HTML tags used to create the structure of a web page:
| Tag | Description |
| <html> | Root element of an HTML document |
| <head> | Contains meta information like title, links, etc. |
| <title> | Sets the page title in the browser tab |
| <body> | Main content area shown to the user |
| <h1> to <h6> | Headings (h1 is largest, h6 is smallest) |
| <p> | Paragraph tag |
| <br> | Line break (no closing tag) |
| <hr> | Horizontal line (no closing tag) |
HTML Basic Formatting Tags
Below are commonly used tags to format text:
| Tag | Purpose | Example |
| <b> | Bold text | <b>Bold Text</b> |
| <strong> | Important text (bold + semantic) | <strong>Important!</strong> |
| <i> | Italic text | <i>Italic Text</i> |
| <em> | Emphasized text (italic + semantic) | <em>Emphasized Text</em> |
| <u> | Underlined text | <u>Underlined Text</u> |
| <mark> | Highlighted text | <mark>Highlighted</mark> |
| <small> | Smaller text | <small>Fine print</small> |
| <del> | Strikethrough (deleted) | <del>Old Price</del> |
| <ins> | Inserted (underlined) text | <ins>New Text</ins> |
| <sub> | Subscript | H<sub>2</sub>O |
| <sup> | Superscript | x<sup>2</sup> |
HTML Color Coding
While CSS is ideal for styling, you can use the style attribute directly in HTML to apply basic color coding.
✅ Example:
html
CopyEdit
<p style=”color:blue;”>This text is blue.</p>
<p style=”background-color:yellow;”>This has a yellow background.</p>
<h2 style=”color:#ff6600;”>Orange Heading</h2>
You can use:
- Color names: red, green, blue, etc.
- Hex codes: #FF0000 for red, #000000 for black
- RGB values: rgb(255,0,0) for red
Bonus: Combining Tags
You can combine formatting tags to create rich effects:
html
CopyEdit
<p><strong><em>This is bold and italic text.</em></strong></p>
Best Practices for Formatting in HTML
- Use semantic tags like <strong> and <em> for accessibility and SEO.
- Avoid using too many inline styles; prefer CSS for layout and design.
- Use consistent heading levels (don’t skip from <h1> to <h4>).
Conclusion
HTML formatting tags give you the power to make your web page readable, organized, and visually appealing — even before diving into CSS. Mastering these tags is essential for anyone beginning their journey in web development.
“Start simple. Even the most beautiful websites are built with basic HTML at the core.”
