syed
Exploring the Benefits of HTML Elements

Exploring the Benefits of HTML Elements

Syed Riza's photo
Syed Riza
·

7 min read

Table of contents

what is HTML Element?

  • Elements are the building blocks of HTML that describe the structure and content of a web web page. They are the "Markup" part of Hyper Text Markup Language (HTML).

  • HTML syntax uses the angle brackets ("<" and ">") to hold the name of an HTML Element. The element usually has an opening tag and a closing tag, and give information about the content they contain. The difference between the two is that the closing tag has a forward slash.

Let's look at some specific examples of HTML tags:-

  • p element "<p>"

  • Heading element "<H1>"

  • a element "<a>"

  • List element

    • ordered list "<ol>"

    • unordered list "<ul>"

  • img element "<img>"

  • nav element "<nav>"

  • header element "<header>"

  • label element "<label>"

  • div element "<div>"

  • footer element "<footer>"

1. p Element

  • The <p> tag stands for paragraph, which is the most common tag used to create lines of text inside an HTML document.

  • The use of the <p> is compatible with other tags, allowing to add hyperlinks (<a>) and bold (<strong>) text, among other things.

Example:-

<html>
  <head>
    <title>Paragraph example</title>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur              adipisicing elit. Aliquam nam aspernatur maxime,      provident rem minima molestias quisquam odit saepe non voluptas eius delectus laudantium praesentium illum eaque quam dolor earum.</p>
    <p>
      This is another paragraph. It will appear on a separate line.
    </p>
  </body>
</html>

2. Heading Element

  • There are six heading elements - <h1>, <h2>,<h3>,<h4>,<h5>,<h6>.

  • Heading elements are used to signify the importance of the content below them. The lower the number of the heading, the higher the importance.

  • for example, the <h1> element represents the main heading of the page, and there should only be one per page. This helps search engines understand the main topic of the page. <h2> Elements have less importance and should be below the higher level <h1> element.

Example:-

<h1>This is main heading.</h1>
<h2>This is subheading h2.</h2>
<h3>This is subheading h3.</h3>
<h4>This is subheading h4.</h4>
<h5>This is subheading h5.</h5>
<h6>This is subheading h6.</h6>

3. a Element

  • The anchor (<a>)element creates a hyperlink to another page of our file. In order to link to a different page or file the <a> tag must also contain a href attribute, which indicates the link's destination.

  • The text between the opening and closing <a> tags becomes the link. This text should be a meaningful description of the link destination and not a generic phrase such as "click here". This better enable users with screen readers to navigate among the various links on a page and understand what content each one will link to.

  • By default, a linked page is displayed in the current browser window unless another target is specified. The default link style is as follows:

    • An unvisited link is underlined and blue

    • A visited link is underlined and purple

    • An active link is underlined and red

Example:-

  <a href= "https://developer.mozilla.org/en-US/docs/Web/HTML/Element">mdn web docs</a>

You can also create a link to another section on the same page:

<h1 id="top"></h1>
  <a href= "#top">Go to top</a>

An image can also be turned into a link by enclosing the <img> tag in an <a> tag:

  <a href= "https://developer.mozilla.org/en-US/docs/Web/HTML/Element"><img src="ineuronlogo.svg"></a>

4. List element

  • The <li> HTML element is used to represent an item in the list. it must be contained in the parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.

  • ordered list "<ol>"

    The ordered list starts with <ol> tags and list items start with the <li> tag. In ordered lists, all the list items are marked with numbers.

    Ordered list:-

      <ol>
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
  </ol>

    Result:-

    1. first item

    2. second item

3. third item

  • unordered list "<ul>"

    The unordered list starts with the <ul> Tag and list items starting with the <li> tag. In an unordered list, all the list items are marked with bullets by default

Unordered list:-

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

Result:-

  • first item

  • second item

  • third item

5. img element "<img>"

  • A simple HTML <img> element can be included in an HTML document like this:

      <img src="path/to/image/file" alt="this is a cool picture" title="Some descriptive text goes here">
    • Note that <img> elements are self-closing and do not require a closing tag.

  • alt tag provides alternate text for an image. One use of the alt tag is for visually impaired people a screen reader; they can read the alt tag of the image in order to understand the image's meaning.

  • The title attribute is optional and will provide additional information about the image. Most browsers display this information in a tooltip when the user hovers over it.

  • Note that the path to the image file can be either relative or absolute. Also, remember that the img element is self-closing, meaning that it does not close with the </img> tag and instead closes with just a single >.

Examples

<img src="https://example.com/image.png" alt="my picture" title="This is an example picture">
  • Sometimes an <img> element will also use two other attributes to specify its size, height and width, as shown below:-
<img src="image.png" alt="my picture" width="650" height="400"/>

6. nav element "<nav>"

  • The <nav> element is intended for major block of navigation links. NOT all the links of a document should be inside an <nav> element.

  • Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

  • Example

      <nav class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

7. header element <header>

  • The <header> tag is a container which used for navigational links or introductory content. It may typically include a heading element, such as <h1>, <h2>, but may also include other elements such as a search form, logo, author information, and so on.

  • Although not required, the <header> tag is intended to contain the surrounding sections heading. it may also be used more than once in an HTML document. Its is important to note that the <header> tag does not introduce a new section, but is simply the head of a section.

Example

<article>
  <header>
    <h1>Heading of Page</h1>
  </header>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>

8. label element <label>

  • The <label> tag defines a label for an <input> element.

  • A label can be bound to an element either by using the "for" attribute, to by placing the element inside the element.

Example

<label for="id">Label</label>
<input type="text" name="text" id="id" value="yourvalue"><br>
  • As you can see, the for attribute of the tag should be equal to the id attribute of the related element to bind them together.

9. div element "<div>"

  • The <div> tag is a generic container that defines a section in your HTML document. An <div> element is used to group sections of HTML elements together and format them with CSS.

  • A <div> is a block-level element. This means that it takes up its own line on the screen. Element right after the <div> will be pushed down to the line below. For similar grouping and styling that is not block-level, but inline, you would use the <span> tag instead. The tag is used to group inline-element in a document.

Example

Here is an example of how to display a section in the same color:

<div style="color:#ff0000">
  <h3>my heading</h3>
  <p>my paragraph</p>
</div>

10. footer element <footer>

  • The <footer> tag denotes the footer of an HTML document or section. Typically, the footer contains information about the author, copyright information, contact information, and a sitemap. any contact information inside of a <footer> tag should go inside a <address> tag.

Example

<html>
<head>
  <title>Paragraph example</title>
</head>
<body>
  <footer>
    <p>&copy; 2017 Joe Smith</p>
  </footer>
</body>

HAPPY Learning!!!💫

Did you find this article valuable?

Support syed by becoming a sponsor. Any amount is appreciated!

iwritecodeineuron#pwskillsHTML5HTML Element