How to specify that an option should be pre-selected when the page loads in HTML5?

17 Mar, 2021
The <option> tag defines an option in a select list. The <option> tag is generally used with the value attribute to specify which value should be sent to the server for further processing. When a drop-down list is created using the <select> element, the first option or the first choice defined by the <option> tag is seen as the selected choice. 
Example 1: The following example demonstrates that the first option will be pre-selected.
HTML
<!DOCTYPE html><html>  <head>    <style>      #container {        margin: 0 auto;        height: 300px;        width: 650px;        border: 5px solid black;        background-color: rgb(104, 241, 104);        opacity: 0.5;        display: flex;        flex-direction: column;        justify-content: center;        align-items: center;      }        .courses {        height: 60px;        width: 130px;        border: 2px solid black;        font-family: cursive;      }    </style>  </head>  <body>    <div id="container">      <h1 id="heading1">        Welcome to GeeksforGeeks      </h1>      <select class="courses">        <option value="tag">Choose Course</option>        <option value="Option A">Python</option>        <option value="Option B">DSA</option>        <option value="Option C">C++</option>        <option value="Option C">Java</option>      </select>    </div>  </body></html>
Output: The first option “Choose Course” is pre-selected by default. But this is just not limited, we can also specify that any other option should be pre-selected when the page loads in HTML5. This can be done using the “selected” attribute. This is demonstrated in the following example.
pre-selected
Example 2: The following example demonstrates pre-selecting some other option using the selected attribute.
HTML
<!DOCTYPE html><html>  <head>    <title>Page Title</title>    <style>      #container {        margin: 0 auto;        height: 300px;        width: 650px;        border: 5px solid black;        background-color: rgb(104, 241, 104);        opacity: 0.5;        display: flex;        flex-direction: column;        justify-content: center;        align-items: center;      }        .courses {        height: 60px;        width: 130px;        border: 2px solid black;        font-family: cursive;      }    </style>  </head>  <body>    <div id="container">      <h1 id="heading1">        Welcome to GeeksforGeeks      </h1>      <select class="courses">        <option value="tag">Choose Course</option>        <option value="Option A">Python</option>        <option value="Option B" selected>DSA</option>        <option value="Option C">C++</option>        <option value="Option C">Java</option>      </select>    </div>  </body></html>
Output: The third option “DSA” is pre-selected. This is due to the use of the “selected” attribute that has been specified in the option tag of “DSA”.  We can pre-select any option by just specifying the selected attribute in its respective option tag.
HTML-Questions
HTML-Tags
HTML5
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Angular File Upload
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array