HTML Class Attribute Last Updated : 17 Oct, 2024 Comments Improve Suggest changes Like Article Like Report The HTML class attribute is used to assign one or more CSS classes to an HTML element. By using classes, you can group elements together and apply consistent styles across them, streamlining both design and functionality.HTML class attribute Supported Tags: It supports all HTML elements. Syntax<tag class="classname"></tag>Examples of HTML Class AttributeHere is a basic example of an HTML Class Attribute1. Using the Same Class in Multiple HTML TagsThe HTML class attribute can be applied to various tags, allowing multiple elements to share a common classification. This enables consistent styling or functionality across different types of elements, enhancing design cohesion and simplifying maintenance.Example: This example shows the use of the classes in HTML. HTML <!DOCTYPE html> <html> <head> <style> .country { background-color: black; color: white; padding: 8px; } </style> </head> <body> <h2 class="country">CHINA</h2> <p> China has the largest population in the world. </p> <h2 class="country">INDIA</h2> <p> India has the second largest population in the world. </p> <h2 class="country">UNITED STATES</h2> <p> United States has the third largest population in the world. </p> </body> </html> Output: Same Class in Multiple HTML TagsExplanation:In the above example each heading (<h2>) is assigned the class "country" using the class attribute.The CSS selector .country targets multiple elements with the class "country" to apply styling.Styling defined for the "country" class is applied uniformly to all headings tagged with it.Using class attributes ensures consistent styling across headings, simplifying design management.2. Using Multiple Classes on a Single ElementHTML allows an element to have multiple classes by separating class names with spaces. This enables a more modular and flexible approach to styling, where an element can share common styles but also have unique styles.Example: In this example, we will use more than one class. HTML <!DOCTYPE html> <html> <head> <style> .country { color: white; padding: 10px; } .china { background-color: black; } .india { background-color: blue; } .usa { background-color: red; } center { padding: 20px; } </style> </head> <body> <center> <h2 class="country china">CHINA</h2> <h2 class="country india">INDIA</h2> <h2 class="country usa">UNITED STATES</h2> </center> </body> </html> Output: HTML class attribute multiple classes Explanation:In the above example <h2> elements are assigned the "country" class for shared styling attributes.Additional classes like "china", "india", and "usa" provide unique background colors.Classes set background colors to black, blue, and red, with white text and padding for visual contrast.The <center> tag ensures horizontal alignment of content, improving the presentation and readability of the page. Comment More infoAdvertise with us Next Article HTML Class Attribute S Shubrodeep Banerjee Follow Improve Article Tags : Misc Technical Scripter Web Technologies HTML HTML-Attributes +1 More Practice Tags : Misc Similar Reads HTML accept Attribute HTML accept Attribute specifies the type of file that the server accepts. This attribute can be used with <input> element only. This attribute is not used for validation tools because file uploads should be validated on the Server.Syntax:<input accept = "file_extension"> Note: This attri 3 min read HTML accept-charset Attribute The accept-charset attribute is used to define the character encoding and is used for form submission. The default value of the accept-charset attribute is "UNKNOWN" string which indicates the encoding equals to the encoding of the document containing the <form> element. Syntax:<form accept 2 min read HTML accesskey Attribute The HTML accesskey attribute defines a keyboard shortcut to activate or focus an element.It assigns a keyboard key combination to trigger an element (like a link or button).Browser support and specific key combinations vary (e.g., Alt + key on Windows, Ctrl + key on macOS).Use it sparingly and provi 3 min read HTML action Attribute The HTML action attribute is used to specify where the form data should be sent on submission. It allows the browser to send the data to the specified location, enabling server-side scripts to process the data and generate a response.Note: It can be used in the <form> element. Syntax:<form 3 min read HTML align Attribute In HTML, the align attribute is used to control the alignment of elements on a webpage. Whether it's for text, images, or tables, the align attribute helps to position content in relation to its surrounding elements.Syntax<element_name align="left | right | center | justify">Attribute ValuesAt 4 min read HTML alt attribute The alt attribute in HTML provides alternative text for images, aiding accessibility and providing context for screen readers.Syntax:<img src=" " alt=" " >HTML<html> <body> <h1>GeeksforGeeks Logo</h1> <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190 3 min read HTML async Attribute The HTML <script> async attribute is used to load and execute external scripts without blocking the rest of the page from loading. This speeds up page load times. It only works with external scripts (when the src attribute is present).Syntax:<script src="path-to-script.js" async></scr 3 min read HTML autocomplete Attribute The HTML autocomplete Attribute is used to specify whether the input field autocompleted would be on or off. When the autocomplete attribute is set to on the browser will automatically complete the values based on what the user entered before. It works with input fields such as text, search, URL, em 3 min read HTML autoplay Attribute The HTML autoplay Attribute, a boolean attribute, enables audio or video elements to start playing automatically when the page loads, providing seamless playback without interruption.Syntax: <element autoplay> Supported ElementsIt can be used with <audio> and <video> elements. Elem 2 min read HTML autofocus Attribute The HTML autofocus attribute is a powerful tool that enhances user experience by automatically setting the focus to a specific element when a webpage loads. Syntax<input type="text" autofocus> Note: This attribute is boolean, meaning it can either be present or absent.Supported TagsElementPurp 2 min read Like