HTML Elements - ComputerkiDuniya

 HTML Elements


HTML (Hypertext Markup Language) elements are the building blocks of web pages. They provide the structure and define the content of a webpage. HTML elements are represented by tags, enclosed in angle brackets < >, and usually come in pairs with an opening tag and a closing tag. The opening tag contains the name of the element, while the closing tag includes a forward slash before the element name.

Here's a breakdown of the main components of an HTML element:

  • Opening tag: It marks the beginning of an element and is denoted by <elementName>. For example, <p> represents a paragraph element.
  • Closing tag: It marks the end of an element and is denoted by </elementName>. For example, </p> signifies the end of a paragraph element.
  • Content: This is the text or other elements contained within the opening and closing tags. For example, <p>Hello, world!</p> contains the text "Hello, world!" as the content of the paragraph.
  • Attributes: These provide additional information about an element and are included within the opening tag. Attributes consist of a name and a value and are written as attributeName="attributeValue". For example, <a href="https://www.example.com">Link</a> sets the href attribute to specify the URL the link points to.

HTML elements can be nested inside each other, meaning an element can contain other elements. The nested elements are placed between the opening and closing tags of their parent element.

Categories of HTML Elements

HTML elements can be broadly categorized into several types based on their purpose and function. Here are the main types of HTML elements:

  1. Structural Elements:
    • <html>: Represents the root element of an HTML document.
    • <head>: Contains meta-information about the document.
    • <body>: Contains the main content of the web page.
    • <div>: Provides a generic container to group other elements.
    • <span>: An inline container used for styling or manipulating specific sections of text.
    • <header>: Represents the introductory content at the top of a page or section.
    • <nav>: Represents a section with navigation links.
    • <main>: Represents the main content of a document.
    • <footer>: Represents the footer of a page or section.
    • <section>: Represents a standalone section of a document.
    • <article>: Represents a self-contained composition, such as a blog post or news article.
    • <aside>: Represents content that is tangentially related to the main content.
    • <blockquote>: Indicates a longer quotation.
    • <figure>: Represents self-contained content, such as images or diagrams.
    • <figcaption>: Represents a caption or legend for a figure. 
      html, html elements, tags, table, formatting
      Basic Structure code

      html, html elements, tags, table, formatting
      Code Preview

  2. Heading Elements:
    • <h1> to <h6>: Represents headings of different levels, with <h1> being the highest and <h6> the lowest. 
      html, html elements, tags, table, formatting
      h1 to h6 Code

      html, html elements, tags, table, formatting
      h1 to h6 Preview

  3. Text Elements:
    • <p>: Represents a paragraph of text.
    • <a>: Creates a hyperlink to another webpage or a specific location within the same page.
    • <em>: Emphasizes text.
    • <strong>: Indicates strongly emphasized text.
    • <br>: Inserts a line break.
    • <hr>: Represents a thematic break or horizontal rule.
    • <mark>: Highlights text with a distinctive background color.
    • <small>: Represents smaller-sized text.
    • <sub>: Formats text as subscript.
    • <sup>: Formats text as superscript.
    • <del>: Indicates deleted or struck-through text.
    • <ins>: Represents inserted or underlined text.
    • <code>: Represents a fragment of computer code.
    • <pre>: Preformatted text, preserving whitespace and line breaks.
    • <blockquote>: Represents a section that is quoted from another source. 
      html, html elements, tags, table, formatting
      Text Elements Code

      html, html elements, tags, table, formatting
      Text Elements Preview

  4. List Elements:
    • <ul>: Represents an unordered (bulleted) list.
    • <ol>: Represents an ordered (numbered) list.
    • <li>: Represents an item in an ordered or unordered list.
    • <dl>: Represents a description list.
    • <dt>: Represents a term (item) in a description list.
    • <dd>: Represents the description of a term in a description list. 
      html, html elements, tags, table, formatting
      List Elements Code

      html, html elements, tags, table, formatting
      List Elements Preview

  5. Media Elements:
    • <img>: Inserts an image.
    • <audio>: Embeds audio content.
    • <video>: Embeds video content.
    • <figure>: Represents self-contained content, such as images or videos.
    • <figcaption>: Represents a caption or legend for a figure. 
      html, html elements, tags, table, formatting
      Media Elements

  6. Table Elements:
    • <table>: Creates a table.
    • <tr>: Represents a table row.
    • <th>: Represents a table header cell.
    • <td>: Represents a table data cell.
    • <thead>: Groups the header content in a table.
    • <tbody>: Groups the body content in a table.
    • <tfoot>: Groups the footer content in a table.
    • <colgroup>: Defines a group of columns in a table.
    • <col>: Represents a single column in a table. 
      html, html elements, tags, table, formatting
      Table Elements



      html, html elements, tags, table, formatting
      Table Elements Preview

  7. Form Elements:
    • <form>: Creates an interactive input form.
    • <input>: Creates various types.

Location: Delhi, India

Comments

Post a Comment