HTML Text-Formating

HTML Text Formating

HTML provides various ways to format text, including headings, paragraphs, lists, bold and italic text, and more. In this tutorial, we will explore some of the common HTML text formatting tags and their usage.

Headings

Headings are used to create titles or subtitles for a page or section of a page. HTML provides six levels of headings, from <h1> to <h6>. <h1> is the largest and most important heading, while <h6> is the smallest.

HTML Code:

                          < !DOCTYPE html>
                          <html>
                              <head>
                                  <title>Page Title</title>
                              </head>
                              <body>
                                  <h1>This is a level 1 heading</h1>
                                  <h2>This is a level 2 heading</h2>
                                  <h3>This is a level 3 heading</h3>
                                  <h4>This is a level 4 heading</h4>
                                  <h5>This is a level 5 heading</h5>
                                  <h6>This is a level 6 heading</h6>
                              </body>
                          </html>

Paragraphs

Paragraphs are used to group together related text. To create a paragraph, use the <p> tag:

HTML Code:

                              < !DOCTYPE html>
                              <html>
                                  <head>
                                      <title>Page Title</title>
                                  </head>
                                  <body>
                                      <p>This is a paragraph of text.</p>
                                      <p>This is another paragraph of text.</p>
                                  </body>
                              </html>

Lists

HTML provides two types of lists: ordered lists and unordered lists.

Ordered Lists

Ordered lists are used to present a sequence of items in a numbered format. To create an ordered list, use the <ol> tag, and add each item as a <li> (list item) within the <ol>:

HTML Code:

                              < !DOCTYPE html>
                              <html>
                                  <head>
                                      <title>Page Title</title>
                                  </head>
                                  <body>
                                      <ol>
                                          <li>Item 1</li>
                                          <li>Item 2</li>
                                          <li>Item 3</li>
                                      </ol>
                                  </body>
                              </html>

Unordered Lists

Unordered lists are used to present a sequence of items in a bulleted format. To create an unordered list, use the <ul> tag, and add each item as a <li> (list item) within the <ul>:

HTML Code:

                              < !DOCTYPE html>
                              <html>
                                  <head>
                                      <title>Page Title</title>
                                  </head>
                                  <body>
                                      <ul>
                                          <li>Item 1</li>
                                          <li>Item 2</li>
                                          <li>Item 3</li>
                                      </ul>
                                  </body>
                              </html>

Links

Links are used to link to other web pages. To create a link, use the <a> tag, and add the link address in the href attribute:

HTML Code:

                              < !DOCTYPE html>
                              <html>
                                  <head>
                                      <title>Page Title</title>
                                  </head>
                                  <body>
                                      <a href="https://www.w3schools.com">Visit W3Schools.com!</a>
                                  </body>
                              </html>

Images

Images are used to add visual content to a web page. To add an image, use the <img> tag, and add the image address in the src attribute:

HTML Code:

                              < !DOCTYPE html>
                              <html>
                                  <head>
                                      <title>Page Title</title>
                                  </head>
                                  <body>
                                      <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
                                  </body>
                              </html>

Tables

Tables are used to present data in a tabular format. To create a table, use the <table> tag, and add each row as a <tr> (table row) within the <table>:

HTML Code:

                              < !DOCTYPE html>
                              <html>
                                  <head>
                                      <title>Page Title</title>
                                  </head>
                                  <body>
                                      <table>
                                          <tr>
                                              <th>Firstname</th>
                                              <th>Lastname</th>
                                              <th>Age</th>
                                          </tr>
                                          <tr>
                                              <td>John</td>
                                              <td>Doe</td>
                                              <td>50</td>
                                          </tr>
                                      </table>
                                  </body>
                              </html>

Forms

Forms are used to collect user input. To create a form, use the <form> tag, and add each input field as a <label> (label) and <input> (input field) within the <form>:

HTML Code:

                              < !DOCTYPE html>
                              <html>
                                  <head>
                                      <title>Page Title</title>
                                  </head>
                                  <body>
                                      <form action="/action_page.php">
                                          First name:<input type="text" name="firstname" value="John"><br>
                                          Last name:<input type="text" name="lastname" value="Doe"><br>
                                          <input type="submit" value="Submit">
                                      </form>
                                  </body>
                              </html>

Conclusion

HTML provides a variety of text formatting options to make your content more visually appealing and easy to read. By using the tags discussed in this tutorial, you can create headings, paragraphs, lists, bold and italic text, links, and images in your HTML documents.

« Previous Next »