If you are developing web application using ASP.NET, you must be concerned that what will be the equivalent HTML element for ASP.NET controls used on your web pages.

Undoubtedly, ASP.NET controls are great that makes our life easy during web application development. Also these controls put a level of abstraction to what is going to render in browser. ASP.NET developers must understand what is going to render against each control in browser that helps in identifying the issues encountered. Also, it will help in managing the overall layout of our page.

Following is the mapping between ASP.NET controls and HTML Elements.

ASP.NET Control HTML Element Rendered HTML
Label Label <label for="male">Male</label>
Button Input <input type="Button">
TextBox Input <input type="text" name="Username">
TextBox, Mode Password Input <input Type="password" name="pass">
TextBox, Mode Multiline TextArea <textarea rows="5" cols="20" ></textarea>
Link Button HREF with JS Postback Script <a href="javascript:__doPostBack('','')">Click Me</a>
Hyperlink Standard HREF <a href=""> Click Me </a>
DropDownList Select <select name="subjects"><option value="1">English</option><option value="2">Arabic</option></select>
ListBox Select <select name="subjects"><option value="1">English</option><option value="2">Arabic</option></select>
Image Button Input <input type="Image" src="submit.gif" alt="Submit Form">
RadioButton Input radio <input Type="radio" >
CheckBox Input Checkbox <input Type="checkbox" >
File Input <input type="file" name="Certificate" accept="image/*" >
Panel/Update Panel Div <div ></div>
GridView Table <table></table>
Table Table <table></table>