Scribd
Upload
5 views9 pages

HTML Formatting

The document provides an overview of HTML formatting, detailing various tags used to format text, such as <b>, <strong>, <i>, and <em>. It also explains the use of HTML for creating images and tables, including the relevant tags and attributes for structuring and styling them. Additionally, it emphasizes the shift from using HTML attributes to CSS for styling purposes.

Uploaded by

manveetsidhu2025
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views9 pages

HTML Formatting

The document provides an overview of HTML formatting, detailing various tags used to format text, such as <b>, <strong>, <i>, and <em>. It also explains the use of HTML for creating images and tables, including the relevant tags and attributes for structuring and styling them. Additionally, it emphasizes the shift from using HTML attributes to CSS for styling purposes.

Uploaded by

manveetsidhu2025
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

HTML Formatting

HTML Formatting is a process of formatting text for better look and feel.
HTML provides us ability to format text without using CSS. There are many
formatting tags in HTML. These tags are used to make text bold, italicized, or
underlined. There are almost 14 options available that how text appears in
HTML and XHTML.

In HTML the formatting tags are divided into two categories:

o Physical tag: These tags are used to provide the visual appearance to
the text.
o Logical tag: These tags are used to add some logical or semantic value
to the text.

lement name Description

<b> This is a physical tag, which is used to bold the text written between it.

<strong> This is a logical tag, which tells the browser that the text is important.

<i> This is a physical tag which is used to make text italic.

<em> This is a logical tag which is used to display content in italic.

<mark> This tag is used to highlight text.

<u> This tag is used to underline text written between it.

<tt> This tag is used to appear a text in teletype. (not supported in HTML5)

<strike> This tag is used to draw a strikethrough on a section of text. (Not supported i
HTML5)

<sup> It displays the content slightly above the normal line.

<sub> It displays the content slightly below the normal line.

<del> This tag is used to display the deleted content.


<ins> This tag displays the content which is added

<big> This tag is used to increase the font size by one conventional unit.

<small> This tag is used to decrease the font size by one unit from base font size.

o 1) Bold Text
HTML<b> and <strong> formatting elements

The HTML <b> element is a physical tag which display text in bold font,
without any logical importance. If you write anything within <b>............</b>
element, is shown in bold letters.

See this example:

The HTML <strong> tag is a logical tag, which displays the content in bold
font and informs the browser about its logical importance. If you write
anything between <strong>???????. </strong>, is shown important text.

See this example

1. <p><strong>This is an important content</strong>, and this is normal co


ntent</p>

Example

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of formatting element</h1>
8. <p><strong>This is an important content</strong>, and this is normal conten
t</p>
9. </body>
10.</html>
This is an important content, which displayed in italic font.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of italic formatting element</h1>
8. <p><em>This is an important content</em>, which displayed in italic font
.</p>
9. </body>
10. </html>

) HTML Marked formatting


If you want to mark or highlight a text, you should write the content within
<mark>.........</mark>.

See this example:

1. <h2> I want to put a <mark> Mark</mark> on your face</h2>

4) Underlined Text
If you write anything within <u>.........</u> element, is shown in underlined
text.

See this example:

1. <p> <u>Write Your First Paragraph in underlined text.</u></p>

5) Strike Text
Anything written within <strike>.......................</strike> element is
displayed with strikethrough. It is a thin line which cross the statement.

See this example:


Inserted Text
Anything that puts within <ins>..........</ins> is displayed as inserted text.

See this example:

1. <p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</


ins></p>

HTML Image
HTML img tag is used to display image on the web page. HTML img tag is
an empty tag that contains attributes only, closing tags are not used in HTML
image element.

Let's see an example of HTML image.

1. <h2>HTML Image Example</h2>


2. <img src="good_morning.jpg" alt="Good Morning Friends"/>

Use <img> tag as a link


We can also link an image with other page or we can use an image as a link.
To do this, put <img> tag inside the <a> tag.

Example:
1. <a href="https://www.javatpoint.com/what-is-robotics"><img src="robot.jpg" heig
ht="100" width="100"></a>

HTML Table
HTML table tag is used to display data in tabular form (row * column).
There can be many columns in a row.

We can create a table to display data in tabular form, using <table>


element, with the help of <tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by
<th>, and table data is defined by <td> tags.

HTML tables are used to manage the layout of the page e.g. header section,
navigation bar, body content, footer section etc. But it is recommended to
use div tag over table to manage the layout of the page .
HTML Table Tags
Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for each column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

HTML Table Example


Let's see the example of HTML table tag. It output is shown above.

1. <table>
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>
HTML Border attribute
You can use border attribute of table tag in HTML to specify border. But it is
not recommended now.

<table border="1">

1. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
2. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
3. <tr><td>James</td><td>William</td><td>80</td></tr>
4. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
5. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
6. </table>

CSS Border property


It is now recommended to use border property of CSS to specify border in
table.

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. }
5. </style>

1. <style>
2. table, th, td {
3. border: 2px solid black;
4. border-collapse: collapse;
5. }
6. </style>
Name Last Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
HTML Table with cell padding
You can specify padding for table header and table data by two ways:

1. By cellpadding attribute of table in HTML


2. By padding property in CSS

The cellpadding attribute of HTML table tag is obselete now. It is


recommended to use CSS. So let's see the code of CSS.

1. <style>
2. table, th, td {
3. border: 1px solid pink;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>
Test it Now

Output:

Name Last Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72
HTML Table width:
We can specify the HTML table width using the CSS width property. It can
be specify in pixels or percentage.

We can adjust our table width as per our requirement. Following is the
example to display table with width.

1. table{
2. width: 100%;
3. }

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>table</title>
5. <style>
6. table{
7. border-collapse: collapse;
8. width: 100%;
9. }
10. th,td{
11. border: 2px solid green;
12. padding: 15px;
13. }
14.
15. </style>
16. </head>
17.<body>
18. <table>
19. <tr>
20. <th>1 header</th>
21. <th>1 header</th>
22. <th>1 header</th>
23. </tr>
24. <tr>
25. <td>1data</td>
26. <td>1data</td>
27. <td>1data</td>
28. </tr>
29. <tr>
30. <td>2 data</td>
31. <td>2 data</td>
32. <td>2 data</td>
33. </tr>
34. <tr>
35. <td>3 data</td>
36. <td>3 data</td>
37. <td>3 data</td>
38. </tr>
39.</table>
40.</body>
41.</html>

You might also like