In this series lets get down to the nitty gritty of HTML.
Hi! I am Sunil! I am a front-end developer and this article is part of 'HTML - Enough To Get Started' series. You can find the other parts of this series here. For more content and updates on me, follow me on Twitter and for upcoming video tutorials and series, subscribe to my Youtube channel.
This series will make you understand -
- Tags.
- Attributes.
- Elements.
- Typography and much more.
HTML Attributes
Attributes provide additional information about an element.
Attributes are always specified in the opening tag.
Usually, attributes are consists of name/value pairs like
name="value".Attribute values should always be enclosed in quotation marks like
class="card-container".Some attributes are required/must for certain elements, like
<a>tag must contain ahrefattribute.Attribute values are generally case-insensitive, except for certain attributes value and like the id and class attributes but standard coding practice is to keep all attributes lowercase and we should follow that standard.
Note: Both single and double quotes can be used to quote attribute values. However double quotes are most common.
General Purpose Attributes
There are some attributes, such as id, title, class, style, etc.
They can are used in a majority of HTML elements. The following section describes their usage.
- The id Attribute
The id attributes of an HTML tag can be used to uniquely identify any element within an HTML page. If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content.
Example
<p id="infotext"> This is a paragraph.</p>
Output
- The title Attribute
The title attribute gives a suggested title for the element. The syntax for the title attribute is similar as explained for the id attribute.
Example
<html>
<head>
<title>The title attribute</title>
</head>
<body>
<h3 title="HTML">My HTML Program</h3>
</body>
</html>
Output
- The class Attribute
Like the id attribute, the
classattribute is also used to identify elements. Unlike id, the class attribute does not have to be unique in the document.
Example
<p class="text"> This is a paragraph.</p>
Output
- The style Attribute
The style attribute allows you to specify CSS styling rules such as color, font, border, etc.
Example
<p style="color:red; font-family:Times 'Times New Roman',Times, serif;">This is a paragraph</p>
Output
Some Common Attributes
- accept - List of types the server accepts, typically a file type. The elements are
<form>,<input>. - accept-charset - List of supported charsets. The element is
<form>. - action - The URL of a program that processes the information submitted via the form. The element is
<form>. - align - Specifies the horizontal alignment of the element. The elements are
<caption>,<col>,<iframe>,<img>,<table>,<th>,<tr>,<tr>,<hr>etc. - allow - Specifies a features policy for the iframe. The element is
<iframe>. - alt - Alternative text in case an image can not be displayed. The elements are
<applet>,<area>,<img>,<input>. - async - Executes the script asynchronously. The element is
<script>. - autocomplete - Indicates whether controls in this form can by default have their values automatically completed by the browser. The elements are
<form>,<input>,<select>,<textarea>. - autofocus - The element should be automatically focused after the page is loaded. The elements are
<button>,<input>,<select>,<textarea>. - autoplay - The audio or video should play as soon as possible. The elements are
<audio>,<video>. - bgcolor - Background color of the element. The elements are
<body>,<col>,<colgroup>,<marquee>,<table>,<tbody>,<tfoot>,<td>,<tr>. - border - Define the border width. The elements are
<img>,<object>,<table>. - class - Often used with CSS to style elements with common properties. The class an attribute is `Global Attribute'.
- color - This attribute sets the text color. The elements are
<font>,<hr>. - cols - Define the number of columns in a text area.
- colspan - The colspan attribute defines the number of columns. Use in
<td>,<th>. - controls - Indicates the browser should show playback controls to the user. The elements are
<audio>,<video>. - data - Data is a 'Global attribute'. Attach custom attributes to an HTML element.
- dir - Dir is a 'Global attribute'. Defines the text direction.
- disabled - Indicates the user can interact with the element. The elements are
<button>,<command>,<fieldset>,<input>,<optgroup>,<option>,<select>,<textarea>. - form - Indicates the form that is the owner of the element. Use in
<button>,<fieldset>,<input>,<label>,<meter>,<output>,<select>,<textarea>. - headers - IDs of the
<th>elements apply to this. - height - Specifies the height of elements listed here. For all other elements use the CSS 'height' property. Use in
<canvas>,<iframe>,<img>,<input>,<object>,<video>. - href - The URL of a linked resource. Use in
<a>,<area>,<base>,<link>. id - Id attribute is a 'Global Attribute' . Used with CSS to style specific elements.
label - Specifies a user-readable title of the element. Use in
<optgroup>,<option>,<track>.- max - Indicates the maximum value allowed. Use in
<input>,<meter>. - max length - Defines the maximum number of characters. Use in
<input>,<textarea>. - min - Indicates the minimum value allowed. Use in
<input>,<meter>. - min length - Defines the minimum number of characters. Use in
<input>,<textarea>. media - Specifies a hint of the media for which the linked resource was designed.
width - For the element listed here,
<canvas>,<iframe>,<img>,<input>,<video>,<object>.- value - Defines a default value. For element
<button>,<data>,<input>,<option>,<li>. - type : Defines a types of element. Use in
<input>,<button>,<object>,<script>,<source>,<style>,<menu>,<link>. - title : Title is a 'Global Attribute'. Text to be displayed in a tooltip when hovering over the element.
- style : Style is a 'Global Attribute'. Defines CSS style which will override style.
- src - The URL of the embeddable content. Use in
<audio>,<iframe>,<script>,<source>,<track>,<video>,<img>,<input>. - spellcheck - This is a 'Global Attribute'. Indicates whether spell checking is allowed for the element.
- size - Defines the width of the element (in pixels). Use in
<input>,<select>. - novalidate - This attribute indicates that the form should not be validated. Use in
<form>. - placeholders -Provides a hint to the user of what can be entered in the field. Use in
<input>,<textarea>. - rows - Defines the number of rows in a text area. Use in
<textarea>. - name - Name of the element. Use in
<button>,<form>,<fieldset>,<iframe>,<output>,<textarea>,<select>,<meta>,<object>,<input>.
Note: There are many other attributes, these are more than enough to get you started.
I hope you got HTML attributes right. 😎
You can reach me here.
👉 If you like this blog you can tweet about it.
👉 Also, connect with me on Linkedin to be the part of 16000+ members strong family of devs and tech recruiters.
👉 As an appreciation, you can follow me on Github and star those repos which you found useful.
👉 You can also subscribe to my youtube channel for upcoming video tutorials and series.
Lets get things working together, see you again. 🤘