HTML

<summary> : Summary element

by

Introduction

The <summary> element in HTML is used as part of the <details> element to provide a summary or heading for the content that can be expanded or collapsed. It represents a summary, title, or label for the content within a <details> element.

Here’s an example of how you might use the <summary> element within a <details> element:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disclosure Summary Example</title>
</head>
<body>
    <details>
        <summary>More Information</summary>
        <p>This is additional information that can be expanded or collapsed.</p>
    </details>
</body>
</html>

Output:

And when we click on triangle button we get more information about title.

In this example:

  • The <details> element contains content that can be toggled between being visible or hidden.
  • The <summary> element serves as a heading or label for the content within the <details> element. When clicked, it toggles the visibility of the content.
  • The content inside the <details> element (in this case, a <p> element) is initially hidden and becomes visible when the summary is clicked.

This pattern is commonly used for creating collapsible sections of content, such as FAQ sections or expandable sections of a webpage.

<sub> : The Subscript element

by

Introduction

The <sub> element in HTML is used to define subscript text. Subscript text appears slightly below the normal baseline and is typically used for footnotes, chemical formulas, mathematical expressions, or any text that needs to be displayed in a smaller size below the regular text.

Here’s an example of how you might use the <sub> element:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Subscript Example</title>
</head>
<body>
    <p>The chemical formula for water is H<sub>2</sub>O.</p>
</body>
</html>

Output:

In this example, the <sub> element is used to represent the subscript “2” in the chemical formula for water (H₂O), indicating the number of hydrogen atoms. When rendered in a browser, the “2” will appear slightly below the baseline of the surrounding text.

<strong> : Strong Importance element

by

Introduction

The <strong> element in HTML is used to denote text with strong importance, typically rendered as bold by browsers. It indicates that the enclosed text is of greater importance or relevance compared to surrounding text.

Here’s an example of how you might use the <strong> element:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strong Importance Example</title>
</head>
<body>
    <p>This is a <strong>very important</strong> message.</p>
</body>
</html>

Output:

In this example, the text “very important” is wrapped in the <strong> element to indicate its strong importance. Browsers typically render this text in a bold font weight by default, although the actual rendering may vary based on the browser’s default styles or any custom styles applied to the page.

<section> : Section element

by

Introduction

The <section> element in HTML is a semantic element used to define sections or thematic groups of content within a document. It’s typically used to organize content into distinct sections that represent different themes or topics.

Here’s an example of how you might use the <section> element:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Section Example</title>
</head>
<body>
    <h1>Website Title</h1>

    <nav>
        <!-- Navigation links -->
    </nav>

    <section>
        <h2>About Us</h2>
        <p>This section contains information about our company and its history.</p>
    </section>

    <section>
        <h2>Services</h2>
        <ul>
            <li>Service 1</li>
            <li>Service 2</li>
            <li>Service 3</li>
        </ul>
    </section>

    <section>
        <h2>Contact Us</h2>
        <p>You can contact us via email or phone.</p>
    </section>
</body>
</html>

Output :

In this example:

  • Three <section> elements are used to divide the content into thematic sections: “About Us“, “Services“, and “Contact Us“.
  • Each <section> contains related content, such as information about the company, a list of services, or contact details.
  • The <h2> elements inside each section provide a heading for that particular section, helping to structure and organize the content.

Using <section> elements helps improve the semantic structure of the HTML document, making it more accessible to users and search engines and providing a clear hierarchy of content.

<th> : Table Header element

by

Introduction

The <th> element in HTML stands for “Table Header.” It’s used to define a header cell within a table. Header cells typically contain labels or titles for the columns or rows of the table.

Here’s an example of how you might use the <th> element to create a table header:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Header Example</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h2>Example Table</h2>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>John</td>
            <td>30</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>25</td>
            <td>Canada</td>
        </tr>
        <tr>
            <td>David</td>
            <td>40</td>
            <td>UK</td>
        </tr>
    </table>
</body>
</html>

Output :

In this example:

  • Each <th> element represents a header cell in the table.
  • Header cells are typically contained within the first row (<tr>) of the table.
  • Header cells are commonly used to label the columns or rows of the table.
  • CSS is used to style the table, including setting border styles, cell padding, and alignment.

This results in a simple table with three columns: Name, Age, and Country, where each column is labeled with a header cell (<th>).

<td> : Table Data Cell element

by

Introduction

The <td> element in HTML stands for “Table Data Cell.” It’s used to define a cell within a table to hold data. Each <td> element represents a single cell within a table row (<tr>).

Here’s an example of how you might use the <td> element to create a table data cell:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Data Cell Example</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h2>Example Table</h2>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>John</td>
            <td>30</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>25</td>
            <td>Canada</td>
        </tr>
        <tr>
            <td>David</td>
            <td>40</td>
            <td>UK</td>
        </tr>
    </table>
</body>
</html>

Output :

In this example:

  • Each <td> element represents a cell in the table.
  • Each <td> element is contained within a <tr> (table row) element.
  • The first row typically contains header cells, denoted by <th> elements.
  • CSS is used to style the table, including setting border styles, cell padding, and alignment.

This results in a simple table with three columns: Name, Age, and Country, and three rows of data. Each data cell (<td>) holds a piece of information within the table.

<tr> : Table Row element

by

Introduction

The <tr> element in HTML stands for “Table Row.” It’s used to define a row within a table. Each row in an HTML table consists of one or more table data cells (<td>) or table header cells (<th>).

Here’s an example of how you might use the <tr> element to create a table row:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Row Example</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h2>Example Table</h2>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>John</td>
            <td>30</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>25</td>
            <td>Canada</td>
        </tr>
        <tr>
            <td>David</td>
            <td>40</td>
            <td>UK</td>
        </tr>
    </table>
</body>
</html>

Output :

In this example:

  • Each <tr> element represents a row in the table.
  • Within each <tr>, we have table cells represented by <td> (data cells) or <th> (header cells).
  • The first <tr> typically contains header cells denoted by <th>, while subsequent <tr> elements contain data cells denoted by <td>.
  • CSS is used to style the table, including setting border styles, cell padding, and alignment.

This results in a simple table with three columns: Name, Age, and Country, and three rows of data.

<table> : Table element

by

Introduction

The <table> element in HTML is used to create a table of data. Tables are composed of rows (<tr>) and cells (<td> or <th>), where <td> represents standard data cells and <th> represents header cells.

Here’s a basic example of how you might use the <table> element:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="2">
        <tr>
            <td>Id</td>
            <td>Name</td>
            <td>Mobile</td>
            <td>Desig</td>
            <td>City</td>
        </tr>
        <tr>
            <td>101</td>
            <td>Manish</td>
            <td>890xxxxxxx</td>
            <td>Developer</td>
            <td>Rewari</td>
        </tr>
        <tr>
            <td>102</td>
            <td>Rohit</td>
            <td>890xxxxxxx</td>
            <td>Web Designer</td>
            <td>Rewari</td>
        </tr>
    </table>
</body>
</html>

Output:

In this example:

  • The <table> element defines the table.
  • Each row of the table is defined by the <tr> (table row) element.
  • Within each row, data cells are represented by the <td> (table data) element.

This results in a simple table with five columns: Id, Name, Mobile, desig and City, and two rows of data.

<style> : Style Information element

by

Introduction

The <style> element in HTML is used to embed CSS (Cascading Style Sheets) directly within an HTML document. It allows you to define the presentation and layout of elements on the webpage.

Here’s an example of how you might use it:

<!DOCTYPE html>
<html>
<head>
    <title>Styling Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #d6d2d2;
        }
        h1 {
            color: #333;
        }
        p {
            font-size: 16px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is an example of how to use the <code>&lt;style&gt;</code> element in HTML to apply CSS styles directly within the document.</p>
</body>
</html>

Output :

In this example , we can change the background colour , heading colour and font size of the text written in <p> tag.

Like <script> tag we can also write <style> in between <head> , <body> tags and also by making a different file of CSS and link with HTML document.

How we can make our webpage stylish we can study it in the CSS language.

<script> : Script element

by

Introduction

The <script> element in HTML is used to embed or reference executable code within an HTML document. This code is typically written in JavaScript, but it can also be written in other scripting languages such as TypeScript or VBScript (though the latter is not recommended due to security concerns and lack of support in modern browsers).

There are three main ways to use the <script> element:

1. Inline Script : We can write it in between the <body> tag of html.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <script>
        alert("Hello, world!");
    </script>
</body>
</html>

Output :

In this example an alert is come.

2. Internal Script : We can write it in between the <head> tag of html.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
      alert("Hello World");
  </script>
</head>
<body>
</body>
</html>

Output :

In this example an alert is come.

3. External Script : We can write it in a new file like filename.js(sample) .

Example :

Make a base html file first.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

And make a new file of JAVASCRIPT hello.js .

alert("Hello World");

After making the JAVASCRIPT file link with the HTML document. By

<script src="hello.js"></script>

And we can write it in between <body> as well as <head> tag in document.

Output :

In this example an alert is come.

These are the three types of <script> tag.