Top 30 Important HTML Elements with Example

Text, image, audio and video are the main contents of a webpage. HTML (Hypertext Markup Language) is the only language which is used to represent a webpage contents. HTML has a lot of elements or tags to illustrate a webpage contents. Among these elements, this article will explain top 30 frequently used HTML elements.

Top 30 Important Element

Top 30 Important Element

Top 30 Important HTML Elements

  1. <html> element: The <html> element is the root or parent element of all HTML elements. Every HTML element must have inside this element. It is the recommended place for specifying the page language .In the HTML5 standard, the <html> tag can be omitted because HTML5 supported browser will intelligently add this element. But as well as, omitting the <html> element will produce errors in older browser.
  2. <head> element: The HTML <head> element contains HTML metadata which is not displayed in the browser. Metadata usually describes HTML document’s title, scripts, links, style and other meta information. The <head> element can be omitted in HTML5 but not recommended.
  3. <title> element: The HTML <title> element is a required element inside the HTML <head> element. It defines a title in the browser tab. It also assigns a title for the page in search engine’s query results.

    Example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Title of Your Page</title>
    </head>
    <body>
        The content of the HTML document
    </body>
    </html>
    
  4. <link> element: The HTML <link> element is a child element of HTML <head> element. It is mainly used to link to an external CSS file.

    Example:

    <link rel="stylesheet" href="mystyle.css" />
    
  5. <style> element: The HTML <style> element is used to apply internal CSS rule of a page. It is mainly placed in the <head> element.

    Example:

    <style>
      header {background-color:#2a2a2a;}
      h1 {color:#fff;}
    </style>
    
  6. <script> element: The HTML <script> element is used to place JavaScript code in a page.  Recommended place for the <script> element is either inside the <head> element or after the <footer> element.

    Example:

    <script>
     function welcomeMSG() {
      alert("Welcome to JavaScript Programming!");
     }
    </script>
    
  7. <meta> element: The HTML <meta> element is used to provide page description, keywords, author info and other meta information which are used by search engines and other web services.

    Example:

    <meta name="description" content="Web design and development tutprial"/>
    <meta name="keywords" content="HTML,CSS,JavaScript,PHP, MySQL"/>
    <meta name="author" content="Sayeed"/>
    <meta charset="UTF-8"/>
    
  8. <body> element: The HTML <body> element is the visual area of a browser. It contains all the visual contents of a webpage such as text, images, video and audio. This element can be omitted in HTML5 but not recommended because of having probability to produce errors in older browsers.

    Example:

    <body>
       The contents of an article must place here…
    </body>
    
  9. <a> element: The HTML <a> element (anchor tag) is used to link from one page to another page. The important attribute of  the <a> element is href which is used to direct the destination page.

    Example:

      <a href="http://systemzone.net"> System Zone </a>
    
  10. <img> element: The HTML <img> element is used to display an image in a webpage. It just holds a space for displaying an image from the source placed in its src attribute. src and alt are the two required attributes of <img> element.

    Example:

      <img src="image.jpg" alt="featured image" />
    
  11. <header> element: The HTML <header> element contains the introductory contents of a page. It generally covers logo and navigation of a webpage. Multiple <header> element can be used in a page but should not use in <footer> element, <address> element and inside in <header> element.

    Example:

    
    <header>
    <a href="http://systemzone.net">
     <img src="logo.png" alt="System Zone"/>
    </a>
    <ul>
     <li> <a href="#"> Home </a></li>
     <li> <a href="#"> Sitemap</a></li>
    </ul>
    </header>
    
  12. <footer> element: The HTML <footer> element is used to define footer section of a webpage. It mainly contains information about authorship, copyright, contact and sitemap.

    Example:

    
    <footer>
    &copy; 2015 Programming Sphere, All Rights Reserved
    </footer>
    
    
  13. <nav> element: The HTML <nav> element is a new element in HTML5. It is used to contain navigation links of a webpage such as header menu, footer menu, sidebar menu and other main navigation links.

    Example:

    
    <nav>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">PHP</a></li>
      <li><a href="#">MySQL</a></li>
    </ul>
    </nav>
    
    
  14. <ul> element: The HTML <ul> element is used to express unordered list in a page. List is created with the HTML <li> element.

    Example:

    
    <ul>
      <li> Mango</li>
      <li> Apple</li>
      <li> Orange</li>
      <li> Banana</li>
    </ul>
    
  15. <ol> element: The HTML <ol> element defines ordered list. List is created with the <li> element.

    Example:

    
    <ol>
      <li> Mango</li>
      <li> Apple</li>
      <li> Orange</li>
      <li> Banana</li>
    </ol>
    
    
  16. <section> element : The HTML <section> element is a new element in HTML5. It is a container tag that means it does not display anything itself but it contains other tags those print any content on the browser screen. The <section> element is mainly used to define sections of a page such as chapters, headers, footers and any other sections of a page.

    Example:

    
    <section>
     <h1>Programming Sphere</h1>
     <p>Programming Sphere is a web design and development tutorial webpage.</p>
    </section>
    
    
  17. <div> element: The HTML <div> element is also a container tag. It defines division or section of a page. It is mainly used to make a group of elements and to apply CSS rules for styling.

    Example:

    
    <div>
     <h2> Paragraph heading </h2>
     <p>This is paragraph body.</p>
    </div>
    
    
  18. <article> element: The HTML <article> element is a new element in HTML5. It is also a container tag. It is mainly used to express blog post, forum post and comment.

    Example:

    
    <article>
    <h1>Google </h1>
    <p>
        Google Inc. is an American multinational technology company
        specializing in Internet-related services and products.
    </p>
    </article>
    
    
  19. <p> element: The HTML <p> element is used to express paragraph of an article or a section of a page.

    Example:

     <p>This is some texts of a paragraph</p>
    
  20. <span> element: The HTML<span> element has no meaning itself but it can be used to group other elements or contents and to apply CSS rules for styling.

    Example:

     <p>I have a <span style="color:red"> red </span> pen. </p>
    
  21. Heading elements: HTML Heading elements are used to express heading of a page or an article. Depending on importance and size heading elements can be used from h1 to h6. The <h1> is the most important and biggest heading element of a page and the <h6> is less important and the smallest heading element of a page. Generally website name or article heading is expressed with the <h1> element.

    Example:

    
    <h1> Heading 1</h1>
    <h2> Heading 2</h2>
    <h3> Heading 3</h3>
    <h4> Heading 4</h4>
    <h5> Heading 5</h5>
    <h6> Heading 6</h6>
    
    
  22. <table> element: The HTML <table> element is used to represent data in two or more dimensions. An HTML table is consists of the <table> element and one or more <tr>, <th> and <td> elements. The <tr> element is used to express table’s row, the <td> element is used to express table’s cell and the <th> element is used to represent table’s head.

    Example:

    
    <table>
    <tr>
      <th>No.</th>
      <th>Name</th>
      <th>Roll</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Sayeed</td>
      <td>090910</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Shyamal</td>
      <td>090916</td>
    </tr>
    </table>
    
    
  23. <form> element: The <form> element is an important element in HTML. It is used to take response from the user. The two important attributes of <form> element are action and method and the most important element in a form is the <input> element. The type attribute of <input> element can vary the <input> element in many ways.

    Example:

    
    <form action="process.php" method="post">
      <input type="text" name="username" />
      <input type="password" name="password" />
      <input type="submit" name="login" value="Login" />
    </form>
    
    
  24. <input> element: The <input> element is used to take user response. The most important attribute of this element is type attribute which varies the <input> element in many ways. The major variations of input element according to type attribute are given below…
    • type=text : It turns input <element> into a text box to take input from the user.

      Example:

      <input type="text" name="username" />
    • type=password: It turns input element into a password box which hides user input replacing with symbolic character.

      Example:

      <input type="password" name="password" />
    • type=email : It turns input element into an email input box.

      Example:

      <input type="email" name="email" />
    • type=checkbox: It turns input element into a checkbox to choose multiple options. It returns either Boolean true or Boolean false value.

      Example:

      <input type="checkbox" name="receive_email"/> Receive Admin Email
      <input type="checkbox" name="terms"/> I agree terms and conditions
      
    • type=radio: It turns input elements into radio button to choose an option from multiple options. It also returns either true or false.

      Example:

      <input type="radio" name="sex"/> Male
      <input type="radio" name="sex"/> Female
      
    • type=button: It turns input element into a clickable button.

      Example:

      <input type="button" name="button" value="Click me"/>
    • type: submit: It turns input element into a form submit button.

      Example:

      <input type="submit" name="submit" value="Register"/>
  25. <button> element: The HTML <button> element is used to represent a clickable button in a page. Text or image can be put inside a HTML <button> element.

    Example:

    <button type="button"> Click me </button>
  26. <select> element: The HTML <select> element is used to represent a dropdown list from which a user can select an option. The only element inside a <select> element is the <option> element which defines option in a drop-down list.

    Example:

    <select name="language">
      <option value="php">PHP </option>
      <option value="html">HTML</option>
      <option value="css">CSS </option>
    </select>
    
  27. <textarea> element: The HTML <textarea> element represents a multi-line text input area. It can contain an unlimited number of characters. The initial size of a <textarea> element can be fixed with rows and cols attribute.

    Example:

    <textarea rows="10" cols="40">
      Programming Sphere is a computer programming related tutorial website.
     </textarea>
    
  28. <label> element: The HTML <label> element is used to represent a caption for an entry of a page.

    Example:

    
    <form>
       <label for="name"> Enter your name</label>
       <input type="text" name="firstName" />
    </form>
    
    
  29. <iframe> element: The HTML <iframe> element is used to show another web page or document into current page. The src attribute of <iframe> element is used to specify the URL of target document or page.

    Example:

    <iframe src="http://systemzone.net"</iframe>
  30. <video> element: The HTML <video> element is a new element in HTML5. It is used to embed a video in a webpage. The <video> element only supports MP4, WebM, and Ogg video format.

    Example:

    <video src="myvideo.mp4" autoplay poster="videoimage.jpg">
     Sorry, your browser doesn't support embedded videos.
    </video>
      Or
    <video width="400" height="250" controls>
    <source src="myvideo.mp4" type="video/mp4" />
    <source src=" myvideo ogg" type="video/ogg" />
     Your browser fails to support video element. Please choose an HTML5 supported browser.
    </video>
    

The mostly used HTML elements have been shown with example in this article . If you face any problem to use these elements, feel free to contact with me from Contact us page. I’ll try my best to stay with you. Important HTML attributes will be explained in the next article. Spend some time and learn how to use different HTML attributes within any HTML element.

No Responses

Leave a Comment

Your email address will not be published. Required fields are marked *