HTML Tags

HTML Element

The HTML element consists of 3 parts.

i) Opening tag: It is used to tell the browser where the content material starts.

ii)Closing tag: It is used to tell the browser where the content material ends.

iii)Content: It is the actual content material inside the opening and closing tags.

Combining all these 3 parts results in an overall HTML Element.

<tagname > Contents... </tagname>

Tags

Tag defines that how the browser will format and display the content

<tag>

Headings:

These tags help us to give headings to the content of a webpage. These tags are mainly written inside the body tag. HTML provides us with six heading tags from <h1> to <h6>.

    <h1>Hello GeeksforGeeks</h1>
    <h2>Hello GeeksforGeeks</h2>
    <h3>Hello GeeksforGeeks</h3>
    <h4>Hello GeeksforGeeks</h4>
    <h5>Hello GeeksforGeeks</h5>
    <h6>Hello GeeksforGeeks</h6>

Paragraph:

These tags help us to write paragraph statements on a webpage. They start with the <p> tag and end with </p>.

<p>I am a paragrph.</p>

Break:

These tags are used for inserting a single line type break. It does not have any closing tag. In HTML the break tag is written as <br>.

<br>

Horizontal Line:

The <hr> tag is used to break the page into various parts, creating horizontal margins with help of a horizontal line running from the left to right-hand side of the page. This is also an empty tag and doesn’t take any additional statements.

<hr>

Span:

Span is an inline container used to mark up a part of a text, or a part of a document.

<span>This is span </span>

Anchor tag:

The <a> tag defines a hyperlink, which is used to link from one page to another, target="_blank" makes it open in new tab. The syntax is:

<a href="https://www.google.com" target="_blank" >Click for google!</a>

Images:

The image tag is used to insert an image into our web page. The source of the image to be inserted is put inside the <img src=”source_of_image“> tag. alt="xyz" is a description of the image, incase the image isn't displayed this alt is shown.

 <img src="https://www.google.com/logos/doodles/2023/nowruz-2023-6753651837109853-s.png" alt="">

Form Elements:

• <form> -This element is responsible for the creation of forms.

• <input>- To take inputs from the users. Know more about input element (Different Types of Input)

• <label> - Used to define the caption of a particular input type.

• <fieldset> - To group similar elements within a form.

• <textarea>- Provides the users with a typing space wherein they can write some multi-line text.

<button>- The button element is an interactive element activated by a user.

 <form action="">
    <label for="email">Email</label>
    <input type="email">
    <label for="password"></label>
    <input type="password">
    <button type="submit">Submit</button>
   </form>

Table Elements

• <table>- This is the root element for creating a table.

• <colgroup>- This element is used to group a set of columns to avoid repeated formatting.

• <thead>- This element specifies the header of the HTML tables.

• <tbody>- This element specifies the header body of the HTML tables.

• <tfoot>- This element specifies the footer of the HTML tables.

• <th>- Used to define the header column in a table.

• <tr>- Used to define rows within an HTML table.

• <td>- Used to specify the data within the columns of the table.

     <table>
        <!-- heading of the table -->
        <tr>
          <th>Roll</th>
          <th>Name</th>
          <th>Marks</th>
        </tr>
        <tr>
          <td>01</td>
          <td>Durga Prasad</td>
          <td>87</td>
        </tr>
        <tr>
          <td>02</td>
          <td>Bharat</td>
          <td>57</td>
        </tr>
      </table>
  

  List Elements

  • <ul> -This element represents an unordered list of items, typically rendered as a bulleted list.

  • <ol>-This element represents an ordered list of items — typically rendered as a number or letter.

  • <li> - This element is used to represent an item in a list.It must be contained in a parent element:

    • An ordered list <ol> or

    • An unordered list <ul>.

        <h1>Ordered list</h1>
        <ol>
            <li>Hello</li>
            <li>Hi</li>
        </ol>
        <h1>Unordered list</h1>
        <ul>
            <li>Namsthe</li>
            <li>list</li>
        </ul>
      

Inline editing:

1. bold: <p>Use this tag<strong>for bold texts</strong></p>

2. italics:<p>Use this tag<em>for inserting italics</em></p>, we can also use<i>... </i> for italics

3. delete:<p>Use this tag <del>for striking text</del></p>

4. subscript:<p>This is <sub>subscripted</sub> text.</p> Subscript text can be used for chemical formulas, like H₂O

5. insertions:<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

6. superscript:<p>This is <sup>superscripted</sup> text.</p>

   Superscript text can be used for footnotes, like 5²

   In the next blog, we will learn about CSS.

Adding CSS to HTML:

We can add CSS to HTML in three ways:

1. External - To add an external CSS file using <link> tag.

2. Internal - TO add CSS in the HTML page in the head section using <style> tag.

3. Inline - To add CSS inside the HTML tag using the style attribute.

Adding JavaScript to HTML:

Javascript is a language that is widely used for creating interactive web pages.

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

</body>
</html>

In the next blog, we will learn about CSS, used to style and layout web pages.

Thankyou😊!