q Tag in HTML
FREE
Overview
The <q> tag is an inline element used in HTML to indicate that the contained text is a brief quotation. It comes in use when you need to insert a quote onto a web page that doesn't allow for paragraph breaks. This HTML tag is typically indicated by visible quote marks.
The following tutorial provides information about this element, including examples of its usage, related properties, and browser compatibility.
Syntax
Note: The <body> tag contains the HTML <q> element.
Attributes
Attributes are applied to tags to provide more information to the browser about how the tag should appear or behave. You can use one or more attributes with HTML tags. Attributes are made up of a name and a value separated by an equals sign(=), with the value enclosed in double-quotes. For example, <p Style="color: black;> . . . </p>".
Element-Specific Attributes
| Attribute | Value | Description |
|---|---|---|
| cite | URL | The URL identifies the source document or message for the quoted information. This attribute is meant to point to information that explains the context or source of the quote. |
Global Attributes
Global attributes are properties that can be applied to all HTML elements and are shared by all of them. As both standard and non-standard HTML elements support them, they're referred to as global. However, they may have no effect on some.
Global properties can be applied to any HTML element, including ones that aren't mentioned in the standard. This means that even if utilizing non-standard elements causes the content to be non-HTML5 compliant, some characteristics must be allowed. Despite the fact that <foo hidden>...</foo> is not a valid HTML element, HTML5-compliant browsers conceal content marked as <foo hidden>...</foo>.
List of Global Attributes
| Attribute | Value | Description |
|---|---|---|
| accesskey | shortcut key | It provides guidance on how to create a keyboard shortcut for the currently selected element. The browser should use the first one on the computer keyboard layout. |
| autocapitalize | off / none, on / sentences, words, characters | Controls whether or not text input is automatically capitalized when entered/edited by the user and how it is capitalized. |
| autofocus | false | Indicates that an element will be highlighted when the page loads or when the <dialogue> in which it is included is displayed. |
| class | classname | It is a list of classes for the element, separated by spaces. CSS and JavaScript use classes to identify and access specific components using class selectors or functions. |
| contenteditable | true / false | An enumerated attribute that indicates whether or not the element should be user-modifiable. If this is the scenario, the browser modifies its widget to allow customization. |
| contextmenu | menu-id | The context menu of an element is defined. A context menu appears when the user clicks the right mouse button on an element. |
| data- | data | Custom data attributes allow private information to be communicated between HTML and its DOM representation, which scripts can use. All such custom data can be accessed using the HTML Element interface of the element on which the attribute is set. |
| dir | ltr / rtl / auto | Specifies the element's text's base direction of directionality. |
| draggable | true / false / auto | An enumerated attribute is used to specify whether or not the element may be dragged using the Drag and Drop API. |
| dropzone | copy / move / link | This parameter determines whether dragged data is copied, relocated, or linked when it is dropped. |
| enterkeyhint | On virtual keyboards, this value indicates the action label (or icon) for displaying the enter key. | |
| exportparts | It can be used to transitively export shadow components from a nested shadow tree to a contained light tree. | |
| hidden | hidden | The value of a Boolean attribute indicates whether or not the element is still relevant. For example, It can be used to hide parts of a website that can't be accessible until the login procedure is finished. Such things will not be rendered by the browser. |
| Id | name | Defines a distinct/unique identifier (ID) that must be consistent and unique throughout the document. It identifies the element when linking (through a fragment identifier), scripting, or styling (with CSS). |
| lang | language-code | It is used to specify the primary language for the element's text content. |
| Spellcheck | true / false | It is used to specify whether or not the element should be checked for spelling mistakes. |
| tabindex | number | It is used to specify the tabbing order of an element. |
| title | text | It includes text that presents advisory information about the element to which it belongs. Generally, but not always, such information is given to the user in the form of a tooltip. |
| slot | The slot established by the element whose name attribute matches the value of the slot property is assigned to an element with a slot attribute. | |
| Style | style | Inline CSS is applied to the currently chosen element using style. It is recommended that styles should be defined in a separate file or files. This attribute and the <style> element are designed for quick styling, such as for testing purposes. |
| translate | yes / no | It is used to specify whether or not the content of the element should be converted when the page is localized. |
| xml | language-code | It is used to specify the predominant language for the element's text content in XHTML documents. |
How to Use <q> Tag in HTML?
- The HTML <q> element is a standard quote tag that is used for short quotations. Normally, the browser does this by enclosing the text in quotation marks. This element is meant for short quotations that do not require paragraph breaks; for longer quotations, the <blockquote> element must be used because it is a block-level element.
- The <q>tag requires a beginning and an ending tag. You just have to enter the text you want to display inside the quotation between opening and closing tags.
Examples
Example 1: In this example, we will use the <q> tag to mark up a short quotation.
Output
Example 2: In this example, we will apply CSS to the \<q> tag using the <style> tag.
Output
Browser support
The following browsers support the <q> tag in HTML:
- Chrome
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- Android
- Edge Mobile
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Learn more
Conclusion
- The <q> tag is used to handle short, inline quotations that do not require paragraph breaks. The <q> tag is frequently used in conjunction with the <blockquote> tag, which is used for long, block-level quotations.
- Since its creation, the q tag has never been completely compatible with Microsoft Internet Explorer for Windows.
Related tags
- <cite>
- <blockquote>
- <abbr>
- <address>