7 Hidden Html Element You Never Know About

Are you tired of using the same old HTML elements in your web development projects? Are you looking for some fresh, new elements to spice up your designs?

Look no further! In this blog post, we'll introduce you to 15 hidden HTML elements that you may have never heard of before.

From lesser-known input types to obscure structural elements, we'll provide code examples and explanations for each element to help you expand your HTML toolbox.

Get ready to level up your web development game with these hidden gems!
 

1. Accordion 

The details and summary elements in HTML5 provide an easy way to create an accordion-style interface. The details element is used to define the container for the accordion, while the summary element defines the header for each accordion panel.

To create an accordion, you can wrap each section in a details element, and then use the summary element to define the header for each section. Here is an example:

<details>
  <summary>Section 1</summary>
  <p>Content for section 1 goes here.</p>
</details>

<details>
  <summary>Section 2</summary>
  <p>Content for section 2 goes here.</p>
</details>

<details>
  <summary>Section 3</summary>
  <p>Content for section 3 goes here.</p>
</details>

Output

2. Content Editable

The contenteditable attribute is an HTML attribute that allows the content of an element to be edited directly by the user.

When applied to an HTML element, it makes the element's contents editable, just like a text editor. This attribute can be used on various elements such as <div>, <span>, <p>, and <h1> to allow users to edit their content directly in the browser.

The contenteditable attribute can be set to either true or false, with the former enabling editing and the latter disabling it. Here's an example of how to use the contenteditable attribute:
 

<div contenteditable="true">
    This content can be edited by the user.
</div>

In this example, the div element can be edited by the user. Once the user is done making their edits, they can either submit the changes to a server or copy and paste the edited content elsewhere.

The contenteditable attribute is particularly useful for creating simple content management systems, text editors, and live previews.
 

3. Date Picker

The date picker is an HTML5 input element that allows users to select a date from a calendar interface. It is useful for collecting date information from users, and is supported by most modern web browsers.
 

To use the date picker in HTML, simply add the "type" attribute to an input element and set its value to "date". For example:
 

<label for="date">
    Select a date:
</label>
<input type="date" id="date" name="date">

This will create a date input field with a calendar interface that allows users to select a date. Once a date is selected, it will be displayed in the input field in the format of "YYYY-MM-DD".
 

Note that the appearance of the date picker may vary depending on the user's operating system and web browser.

Additionally, some older web browsers may not support the date picker input type, so it is important to provide a fallback option for these users.
 

Select a date:

4. Video Player

HTML can be used to create a video player using the HTML5 video element. This element allows you to embed video files directly into your HTML code and provides a set of controls for the user to interact with the video.

To use the video element, you need to specify the source of the video file using the src attribute. You can also add other attributes like width, height, autoplay, controls, etc. to customize the behavior and appearance of the video player. Here's an example code for a basic HTML video player:
 

<video src="example.mp4" width="640" height="360" controls>
    Your browser does not support the video tag.
</video>

In the above example, the src attribute specifies the path to the video file. The width and height attributes set the dimensions of the video player.

The controls attribute adds the default set of video controls like play, pause, volume, etc. You can also add additional features like subtitles, captions, and custom controls to the video player using HTML and CSS.

The video element provides a simple and easy-to-use way of embedding videos into your web pages.
 

5. Audio Player

The audio element can be used to embed audio content in a webpage and provide basic audio player controls. To use HTML as an audio player, you can make use of the HTML5 audio element.
 

Here's an example code to embed an audio file in a webpage:
 

<audio controls>
    <source src="path/to/audio-file.mp3" type="audio/mpeg">
     Your browser does not support the audio element. 
</audio>

In the code above, we have wrapped the audio content within an audio element. The controls attribute specifies that basic audio controls such as play, pause, and volume control should be displayed.
 

The source element is used to specify the audio source file, and the type attribute specifies the MIME type of the audio file. If the audio file is not supported by the browser, the message "Your browser does not support the audio element" will be displayed.
 

Additionally, you can add other attributes to the audio element such as autoplay to make the audio play automatically when the page loads, loop to make the audio play repeatedly, and preload to specify how the browser should load the audio file.
 

<audio controls autoplay loop preload="auto">
    <source src="path/to/audio-file.mp3" type="audio/mpeg">
    Your browser does not support the audio element. 
</audio>

6. Color Picker

HTML5 introduces a new input type called color, which allows users to select a color from a color picker. To use the color picker, you need to create an <input> element with type="color" attribute.

Here's an example:

<label for="color-picker">
    Select a color:
</label>
<input type="color" id="color-picker" name="color-picker" value="#ff0000">

Select a color:

7. Slider

In HTML, you can use the input element with the type attribute set to "range" to create a slider control. The slider control allows the user to select a value by dragging a slider thumb along a horizontal or vertical track.

To create a slider in HTML, you can use the following code:
 

<label for="mySlider">Select range size</label>
<input type="range" min="0" max="100" value="50" class="slider" id="mySlider">

In the above example, we have set the type attribute to "range" to create a slider control. The min attribute sets the minimum value of the slider, while the max attribute sets the maximum value of the slider. The value attribute sets the initial value of the slider. The class attribute is optional and can be used to apply CSS styles to the slider.

To style the slider, you can use CSS. For example, you can change the color of the slider track and thumb using the following code:
 

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  background-color: #ddd;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: #4caf50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background-color: #4caf50;
  cursor: pointer;
}

In the above example, we have used the ::-webkit-slider-thumb and ::-moz-range-thumb pseudo-elements to style the slider thumb in WebKit and Mozilla browsers respectively.

We have also set the width and height of the thumb, as well as its background color and cursor. The other CSS styles are used to style the slider track and thumb in various ways.

To add the relative number as the slider is being scrolled, you can use JavaScript to dynamically update the value of a separate element based on the position of the slider. Here is an example:

HTML:

<label for="mySlider">Select range size</label>
<input type="range" min="0" max="100" value="50" class="slider" id="mySlider">
<p id="sliderValue">50</p>

JavaScript:

var slider = document.getElementById("mySlider");
var output = document.getElementById("sliderValue");
output.innerHTML = slider.value; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
}

In this example, the input element with type="range" creates the slider. The min, max, and value attributes define the range of values and the default value of the slider.

The p element with id="sliderValue" is a separate element that will display the current value of the slider. The JavaScript code uses the getElementById() method to get references to the slider and the output element.

It sets the initial value of the output element to the default value of the slider. The oninput event is triggered whenever the user interacts with the slider. The event handler updates the value of the output element to match the current value of the slider.

You can customize the appearance of the slider using your own CSS styling, and add additional functionality as needed (such as triggering other events or updating other elements on the page).

Output

Select range size

50

Final Take Away

In conclusion, HTML has a lot of hidden elements and features that can enhance the user experience and functionality of a website. 

Knowing about these elements and how to use them can give you an edge over other developers and make your website stand out. 

From the contenteditable attribute to the detail and summary element, date picker, video player, audio player, color picker, and slider, understanding these hidden features can help you create more interactive and dynamic web pages. Keep exploring and experimenting with HTML to uncover even more hidden gems!