HTML Attributes: Using attributes in HTML tags Updated on August 16, 2021 by Brad Markle 7 Minutes, 41 Seconds to Read In HTML, each tag can have different attributes applied. Attributes allow the HTML tags to have specific properties added to them. You can assign a “class” to either reuse styles throughout your website or style your elements with the “style” attribute. Don’t worry about how the style and class attributes work at this moment, this will be discussed further in our Using & Understanding CSS course. Basic HTML attributes The following example explains how an <a> anchor tag uses the attributes “href“, “target“, and “title“. <a href="https://google.com" target="_blank" title="Click Here"> In this example, the anchor is a hyperlink to Google.com. The href attribute will direct the visitor to Google. The target attribute will open the link in a different window or the same window. In this case _blank opens to a new window or tab. The title attribute will display text when hovering over the link. Below is a small list of common attributes used and a description. Below are the most commonly used HTML attributes. Most common HTML Attributes class This attribute is used to apply CSS styles in a style sheet. For example: <p class="paragraph"></p>. style Allows CSS style to be applied to a specific element. An example usage of this is the following: <p style="color: #000000"></p>. id This is a particular identifier of the element. This can only be used once per element. For example: <p id="para1"></p>. title The title codes information in the tag about the tag. For example in an <a> anchor tag, you can use the title attribute to allow a small text pop up when the mouse is hovers over the anchor. For example: <a href="" title="Click Here"></a> name This gives the element a name. This is different than the title in that the name is not seen by the visitor. The most common use of this is in the <a> anchor tag. The name will navigate the visitor to a specific place on the page. For example: <a name="this-page-location"></a>. This will navigate your browser to the location of this anchor when you visit the url in the browser like the following: https://example.com/#this-page-location width The width attribute can be used in elements that support dimensions. For example: <div width="100"></div> align The align attribute tells the browser if the text is centered, left, or right aligned. For example: <div align="left"></div> These attributes are used most often to style and label your HTML tags. You can add or remove attributes as needed for the tag to function how you want. HTML Attribute reference Below is an more exhaustive reference and their correlating tags they are used for. attribute Supported Elements abbr <td> <th> accept-charset <form> accept <form> <input> accesskey <a> <area> <button> <input> <label> <legend> <textarea> action <form> align <caption> <iframe> <img> <input> <object> <legend> <table> <hr> <div> <h1> <h2> <h3> <p> <col> <colgroup> <tbody> <td> <tfoot> <th> <thead> <tr> alink <body> alt <applet> <area> <img> <input> archive <applet> <object> axis <td> <th> background <tbody bgcolor <table> <tr> <td> <th> <body> border <table> <img> <object> cellpadding <table> char <col> <colgroup> <tbody> <td> <tfoot> <th> <thead> <tr> charoff <col> <colgroup> <tbody> <td> <tfoot> <th> <thead> <tr> charset <a> <link> <script> checked <input> cite <blockquot> <q> <del> <ins> class Most Elements classid <object> clear <br> code <applet> codebase <applet> <object> codetype <object> color <basefont> <font> cols <frameset> <textarea> colspan <th> <td> compact <applet> <dir> <dl> <menu> <ol> <ul> content <meta> coords <area> <a> data <object> datetime <del> <ins> declare <object> defer <script> dir Most Elements disabled <button> <input> <optgtoup> <option> <select> <textarea> enctype <form> face <basefont> <font> for <label> frame <table> frameborder <frame> <iframe> headers <th> <td> height <iframe> <td> <th> <img> <object> <applet> href <a> <area> <link> <base> hreflang <a> <link> hspace <applet> <img> <object> http-equiv <meta> id Most Elements ismap <img> <input> label <option> <optgroup> lang Most Elements language <script> link <body> longdesc <img> <frame> <iframe> marginheight <frame> <iframe> marginwidth <frame> <iframe> maxlength <input> media <style> <link> method <form> multiple <select> name <button> <textarea> <applet> <select> <form> <frame> <iframe> <img> <a> <input> <objext> <map> <param> <meta> nohref <area> noresize <frame> noshade <hr> nowrap <th> <td> object <applet> onblur <a> <area> <button> <input> <label> <select> <textarea> onchange <input> <select> <textarea> onclick Most Elements ondblclick Most Elements onfocus <a> <area> <button> <input> <label> <select> <textarea> onkeydown Most Elements onkeypress Most Elements onkeyup Most Elements onload <frameset> <body> onmousedown Most Elements onmousemove Most Elements onmouseout Most Elements onmouseover Most Elements onmouseup Most Elements onreset <form> onselect <nput> <textarea> onsubmit <form> onunload <frameset> <body> profile <head> prompt <bisindexody> readonly <textarea> <input> rel <a> <link> rev <a> <link> rows <frameset> <textarea> rowspan <th> <td> rules <table> scheme <meta> scope <th> <td> scrolling <frame> <iframe> selected <option> shape <a> <area> size <hr> <font> <input> <basefont> <select> span <col> <colgroup> src <script> <input> <frame> <iframe> <img> standby <object> start <ol> style Most Elements summary <table> tabindex <a> <area> <button> <input> <object> <select> <textarea> target <a> <area> <base> <form> <link> text <body> title Most Elements type <a> <link> <object> <param> <script> <style> <input> <li> <ol> <ul> <button> usemap <img> <input> <object> valign <col> <colgroup> <tbody> <td> <tfoot> <th> <thead> <tr> value <input> <option> <param> <button> <li> valuetype <param> version <html> vlink <body> vspace <applet> <image> <object> <iframe> <img> <object> <table> <col> <col> <col> <col> <col> width <hr> <iframe> <img> <object> <table> <td> <th> <applet> <col> <colgroup> widthpre <col> Share this Article Related Articles How to Fix the “550 No Such User Here” Email Error What is Node.js? How to Deploy Websites Generated by AI Builders on Your Server How to Use robots.txt Disallow to Block Crawlers and Protect Site Performance Content Security Policy (CSP) Headers – Complete Reference Guide Troubleshooting SSL Connection Errors: How to Fix HTTPS Issues How to Check and Repair a Database in phpMyAdmin 21 Reasons Your Website is Slow and How to Speed it Up Website Transfer Resources Ensure a Successful Website Transfer
Create a file. Once you create that file and add your HTML code to the file, you can then view the file on your website.
