Top 5 HTML Tricks That You Should Know


Being a developer we all want to display attractive things to the user, that must be useful also. In this article, we will discuss such tricks that will make your development enjoyable. All the tricks are described below with the proper example.

HTML top 5 tricks and tips:

  • The color picker: This tricks is for color picker in the input tag, you can place “type” property with the value of “color” to act the input field as a color picker.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html>
          <head>
              <title>Color picker in input field</title>
              <style>
                  .conatiner {
                      text-align: center;
                  }
                    
                  h1 {
                      color: green;
                  }
              </style>
          </head>
          <body>
              <div class="conatiner">
              <h1>GeeksforGeeks</h1>
              <b>Color picker in input filed: </b>
              <input type="color">
              </div>
          </body>
      </html>

      chevron_right

      
      

    • Output:
  • The document refresher: This tricks is for refreshing the document automatically after mentioned time. It is used when inactivity effect on your web-site. By using http-equiv= “refresh” property, we can define the time for the refreshment also in the content property.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html>
          <head>
              <title>Document Refresher</title>
              <meta http-equiv="refresh" content="10">
              <style>
                  .conatiner {
                      text-align: center;
                  }
                    
                  h1 {
                      color: green;
                  }
              </style>
          </head>
          <body>
              <div class="conatiner">
              <h1>GeeksforGeeks</h1>
              <b>Document will refresh after 10sec</b>
              </div>
          </body>
      </html>

      chevron_right

      
      

    • Output:
  • Theme color changer: This tricks is for changing the theme color of your website, by using the name=”theme-color” property, but we have to define the color code in the content property. This will change the color of the header bar and address the bar in the newest Chrome version on the Lollipop of android.

    Note: This will only work on mobile devices(Lolipop).

    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html>
          <head>
              <title>Theme color changer</title>
              <meta name="theme-color" content="#26F809">
              <style>
                  .conatiner {
                      text-align: center;
                  }
                    
                  h1 {
                      color: green;
                  }
              </style>
          </head>
          <body>
              <div class="conatiner">
              <h1>GeeksforGeeks</h1>
              <b>Theme color changer</b>
              </div>
          </body>
      </html>

      chevron_right

      
      

  • Icon adder: This tricks is used to add icons on the place of favicon. You just need a path for the source file. Include the link tag inside of the body tag, this will place an icon on your favicon place.
    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html>
          <head>
              <title>Icon adder</title>
              <meta name="theme-color" content="green;">
              <link rel="icon" href="/icon.ico" 
                           type="image/x-icon"/>
              <style>
                  .conatiner {
                      text-align: center;
                  }
                    
                  h1 {
                      color: green;
                  }
              </style>
          </head>
          <body>
              <div class="conatiner">
              <h1>GeeksforGeeks</h1>
              <b>Icon adder</b>
              </div>
          </body>
      </html>                    

      chevron_right

      
      

    • Output:
  • Voice recognition: This tricks is used to add voice search in the input field. Like Google search, it searches on by voice recognition.

    Note: This will only work on mobile devices(Lolipop only Google Chrome).

    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html>
          <head>
              <title>Voice recognition</title>
              <style>
                  .conatiner {
                      text-align: center;
                  }
                    
                  h1 {
                      color: green;
                  }
              </style>
          </head>
          <body>
              <div class="conatiner">
              <h1>GeeksforGeeks</h1>
              <b>Voice recognition</b>
              <input type="text" x-webkit-speech>
              </div>
          </body>
      </html>                    

      chevron_right

      
      

  • full-stack-img




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.