- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML Heading
The HTML Heading refers to the 6 levels through <h1> to <h6>, h1 being the most important heading level and h6 of lowest importance. H1, H2, H3, H4, H5, H6 are the six headings.
NOTE − Heading are used by search engines (like google) for indexing the content of webpage.
Let’s see an example for HTML Heading −
Example
<!DOCTYPE html> <html> <head> <title>HTML Heading</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } </style> </head> <body> <form> <fieldset> <legend>HTML Heading</legend> <input type="text" id="textSelect" placeholder="Type Heading Here..."> <div id="radioBut"> <label>H1</label><input class="radio" type="radio" name="heading" value="h1" checked> <label>H2</label><input class="radio" type="radio" name="heading" value="h2"> <label>H3</label><input class="radio" type="radio" name="heading" value="h3"> <label>H4</label><input class="radio" type="radio" name="heading" value="h4"> <label>H5</label><input class="radio" type="radio" name="heading" value="h5"> <label>H6</label><input class="radio" type="radio" name="heading" value="h6"> </div> <div>Heading Preview: <span id="headingPreview">Output will show up here</span></div> <input type="button" onclick="changeHeading()" value="Preview"> </fieldset> </form> <script> var textSelect = document.getElementById("textSelect"); var headingPreview = document.getElementById("headingPreview"); function changeHeading() { if(textSelect.value === '') headingPreview.innerHTML = 'Write a Heading'; else{ for(var i=0; i<6; i++){ var radInp = document.getElementsByClassName('radio')[i]; if(radInp.checked === true && textSelect.value !== '') headingPreview.innerHTML ='<'+radInp.value+'>'+textSelect.value+'</'+radInp.value+'>'; } } } </script> </body> </html>
Output
This will produce the following output −
1) Before clicking ‘Preview’ button with text field empty −
2) After clicking ‘Preview’ button with text field empty −
3) After clicking ‘Preview’ button with text field not empty and ‘h6’ radio button checked −
4) After clicking ‘Preview’ button with text field not empty and ‘h1’ radio button checked −
Advertisements