Konda 👨‍💻 Coder: HTML-BASIC FORMATTING TAGS

HTML basic formatting tags are essential for structuring and styling text content within a web page. Below is an overview of these tags, categorized by their functions: basic tags, formatting tags, and color coding.

HTML Basic Tags

Paragraph
- <p>: Defines a paragraph.
```
<p>This is a paragraph.</p>
```
Headings
- <h1> to <h6>: Defines HTML headings, where <h1> is the highest (or most important) level and <h6> is the lowest.
```
<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
```

Line Break

<br>: Inserts a single line break.


<p>This is a line.<br>This is another line.</p>

Horizontal Rule
- <hr>: Inserts a horizontal rule (a thematic break).
```
<hr>
```

HTML Formatting Tags

Bold
- <b>: Defines bold text.
```
<b>This text is bold</b>
```
Italic
- <i>: Defines italic text.
```
<i>This text is italic</i>
```
Underline
- <u>: Defines underlined text.
```
<u>This text is underlined</u>
```
Strong
- <strong>: Defines important text (typically rendered as bold).
```
<strong>This text is strong</strong>
```
Emphasis
- <em>: Defines emphasized text (typically rendered as italic).
```
<em>This text is emphasized</em>
```
Small
- <small>: Defines smaller text.
```
<small>This text is small</small>
```
Subscript
- <sub>: Defines subscripted text.
```
H<sub>2</sub>O
```
Superscript
- <sup>: Defines superscripted text.
```
E=mc<sup>2</sup>
```
Mark
- <mark>: Defines marked or highlighted text.
```
<mark>This text is marked</mark>
```
Deleted Text
- <del>: Defines deleted (struck-through) text.
```
<del>This text is deleted</del>
```
Inserted Text
- <ins>: Defines inserted (underlined) text.
```
<ins>This text is inserted</ins>
```
Code
- <code>: Defines a piece of computer code.
```
<code>let x = 5;</code>
```

HTML Color Coding

Text Color

Using the style attribute with the color property to set the color of text.


<p style="color: red;">This text is red.</p>
<p style="color: #00FF00;">This text is green.</p>

Background Color

Using the style attribute with the background-color property to set the background color.


<p style="background-color: yellow;">This text has a yellow background.</p>
<p style="background-color: #0000FF;">This text has a blue background.</p>

Color Names and Codes

Colors can be specified by name, hex code, RGB, RGBA, HSL, and HSLA values.


<p style="color: blue;">Color by name</p>
<p style="color: #ff6347;">Color by hex code</p>
<p style="color: rgb(255, 99, 71);">Color by RGB</p>
<p style="color: rgba(255, 99, 71, 0.5);">Color by RGBA</p>
<p style="color: hsl(9, 100%, 64%);">Color by HSL</p>
<p style="color: hsla(9, 100%, 64%, 0.5);">Color by HSLA</p>

Here's an example HTML document using some of these basic formatting tags:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Basic Formatting Example</title>
</head>
<body>
  <h1>This is a Heading 1</h1>
  <h2>This is a Heading 2</h2>
  <p>This is a paragraph with <b>bold</b>, <i>italic</i>, and <u>underlined</u> text.</p>
  <p>This text is <strong>strong</strong> and this is <em>emphasized</em>.</p>
  <p><small>This is smaller text.</small></p>
  <p>This is subscript: H<sub>2</sub>O and this is superscript: E=mc<sup>2</sup>.</p>
  <p><mark>This text is highlighted.</mark></p>
  <p><del>This text is deleted</del> and <ins>this text is inserted</ins>.</p>
  <p>This is a line of <code>code</code>.</p>
  <p style="color: red;">This text is red.</p>
  <p style="background-color: yellow;">This text has a yellow background.</p>
</body>
</html>

This document covers the use of basic tags, formatting tags, and color coding within HTML.

Konda 👨‍💻 Coder

Pages

Thursday, June 13, 2024

HTML-BASIC FORMATTING TAGS

HTML Basic Tags

HTML Formatting Tags

HTML Color Coding

No comments:

Post a Comment