Select personalised ads. Apply market research to generate audience insights. Measure content performance. Develop and improve products. List of Partners vendors. Share Flipboard Email.
Jennifer Kyrnin. Updated March 10, Featured Video. Cite this Article Format. Kyrnin, Jennifer. Your Privacy Rights. To change or withdraw your consent choices for ThoughtCo. At any time, you can update your settings through the "EU Privacy" link at the bottom of any page. These choices will be signaled globally to our partners and will not affect browsing data. An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag.
All attributes are made up of two parts: a name and a value. HTML documents contain tags, but do not contain the elements. The elements are only generated after the parsing step, from these tags. An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag. You label content by putting it between an opening tag and a closing tag. They are the pieces themselves, i. Most elements can contain other elements, as the body element would contain header elements, paragraph elements, in fact pretty much all of the visible elements of the DOM.
Tags are not the elements themselves, rather they're the bits of text you use to tell the computer where an element begins and ends. When you 'mark up' a document, you generally don't want those extra notes that are not really part of the text to be presented to the reader. The browser sees the letters ' ' and decides 'A new paragraph is starting, I'd better start a new line and maybe indent it'. Then when it sees '. This visualization can help us to find out difference between concept of element and tag each indent means contain :.
Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams? Collectives on Stack Overflow. Learn more. What is the difference between HTML tags and elements?
Ask Question. Asked 9 years, 10 months ago. Active 2 years, 2 months ago. Viewed k times. But what is the difference between them? Improve this question. Each link created for a link element is handled separately. Similarly, if a single link element has a rel attribute with the value next stylesheet , it creates both a hyperlink for the next keyword and an external resource link for the stylesheet keyword , and they are affected by other attributes such as media or title differently.
For example, the following link element creates two hyperlinks to the same page :. The two links created by this element are one whose semantic is that the target page has information about the current page's author, and one whose semantic is that the target page has information regarding the license under which the current page is provided.
Hyperlinks created with the link element and its rel attribute apply to the whole document. This contrasts with the rel attribute of a and area elements, which indicates the type of a link whose context is given by the link's location within the document. Unlike those created by a and area elements, hyperlinks created by link elements are not displayed as part of the document by default, in user agents that support the suggested default rendering.
And even if they are force-displayed using CSS, they have no activation behavior. Instead, they primarily provide semantic information which might be used by the page or by other software that consumes the page's contents. Additionally, the user agent can provide its own UI for following such hyperlinks. The exact behavior for links to external resources depends on the exact relationship, as defined for the relevant link type.
The crossorigin attribute is a CORS settings attribute. It is intended for use with external resource links. The media attribute says which media the resource applies to. The value must be a valid media query list. The integrity attribute represents the integrity metadata for requests which this element is responsible for.
The value is text. The attribute must only be specified on link elements that have a rel attribute that contains the stylesheet , preload , or modulepreload keyword. The hreflang attribute on the link element has the same semantics as the hreflang attribute on the a element.
The type attribute gives the MIME type of the linked resource. It is purely advisory. The value must be a valid MIME type string. For external resource links , the type attribute is used as a hint to user agents so that they can avoid fetching resources they do not support.
The referrerpolicy attribute is a referrer policy attribute. It is intended for use with external resource links , where it helps set the referrer policy used when fetching and processing the linked resource. The title attribute gives the title of the link.
With one exception, it is purely advisory. The exception is for style sheet links that are in a document tree , for which the title attribute defines CSS style sheet sets. The title attribute on link elements differs from the global title attribute of most other elements in that a link without a title does not inherit the title of the parent element: it merely has no title.
The imagesrcset attribute may be present, and is a srcset attribute. The imagesrcset and href attributes if width descriptors are not used together contribute the image sources to the source set. If the imagesrcset attribute is present and has any image candidate strings using a width descriptor , the imagesizes attribute must also be present, and is a sizes attribute.
The imagesizes attribute contributes the source size to the source set. The imagesrcset and imagesizes attributes must only be specified on link elements that have both a rel attribute that specifies the preload keyword, as well as an as attribute in the " image " state. These attributes allow preloading the appropriate resource that is later used by an img element that has the corresponding values for its srcset and sizes attributes:.
Note how we omit the href attribute, as it would only be relevant for browsers that do not support imagesrcset , and in those cases it would likely cause the incorrect image to be preloaded. The imagesrcset attribute can be combined with the media attribute to preload the appropriate resource selected from a picture element's sources, for art direction :. The sizes attribute gives the sizes of icons for visual media. Its value, if present, is merely advisory.
User agents may use the value to decide which icon s to use if multiple icons are available. If specified, the attribute must have a value that is an unordered set of unique space-separated tokens which are ASCII case-insensitive. The attribute must only be specified on link elements that have a rel attribute that specifies the icon keyword or the apple-touch-icon keyword.
The apple-touch-icon keyword is a registered extension to the predefined set of link types , but user agents are not required to support it in any way. The as attribute specifies the potential destination for a preload request for the resource given by the href attribute. It is an enumerated attribute. Each potential destination is a keyword for this attribute, mapping to a state of the same name.
The attribute must be specified on link elements that have a rel attribute that contains the preload keyword. It may be specified on link elements that have a rel attribute that contains the modulepreload keyword; in such cases it must have a value which is a script-like destination. For other link elements, it must not be specified. The processing model for how the as attribute is used is given in an individual link type's fetch and process the linked resource algorithm.
The attribute does not have a missing value default or invalid value default , meaning that invalid or missing values for the attribute map to no state. This is accounted for in the processing model. For preload links, both conditions are an error; for modulepreload links, a missing value will be treated as " script ". The color attribute is used with the mask-icon link type. The attribute must only be specified on link elements that have a rel attribute that contains the mask-icon keyword.
This specification does not have any user agent requirements for the color attribute. The mask-icon keyword is a registered extension to the predefined set of link types , but user agents are not required to support it in any way. It is initially false. The disabled attribute is a boolean attribute that is used with the stylesheet link type. The attribute must only be specified on link elements that have a rel attribute that contains the stylesheet keyword.
Whenever the disabled attribute is removed, set the link element's explicitly enabled attribute to true. Removing the disabled attribute dynamically, e. There is no reflecting IDL attribute for the color attribute, but this might be added later. The crossOrigin IDL attribute must reflect the crossorigin content attribute, limited to only known values. The imageSrcset IDL attribute must reflect the imagesrcset content attribute.
The imageSizes IDL attribute must reflect the imagesizes content attribute. If the link is a hyperlink then the media attribute is purely advisory, and describes for which media the document in question was designed.
However, if the link is an external resource link , then the media attribute is prescriptive. The user agent must apply the external resource when the media attribute's value matches the environment and the other relevant conditions apply, and must not apply it otherwise.
The default, if the media attribute is omitted, is " all ", meaning that by default links apply to all media. The external resource might have further restrictions defined within that limit its applicability. For example, a CSS style sheet might have some media blocks.
This specification does not override such further restrictions or requirements. If the type attribute is present, then the user agent must assume that the resource is of the given type even if that is not a valid MIME type string , e. If the attribute is omitted, but the external resource link type has a default type defined, then the user agent must assume that the resource is of that type. If the UA does not support the given MIME type for the given link relationship, then the UA should not fetch and process the linked resource ; if the UA does support the given MIME type for the given link relationship, then the UA should fetch and process the linked resource at the appropriate time as specified for the external resource link 's particular type.
If the attribute is omitted, and the external resource link type does not have a default type defined, but the user agent would fetch and process the linked resource if the type was known and supported, then the user agent should fetch and process the linked resource under the assumption that it will be supported. User agents must not consider the type attribute authoritative — upon fetching the resource, user agents must not use the type attribute to determine its actual type.
Only the actual type as defined in the next paragraph is used to determine whether to apply the resource, not the aforementioned assumed type. If the external resource link type defines rules for processing the resource's Content-Type metadata , then those rules apply.
Otherwise, if the resource is expected to be an image, user agents may apply the image sniffing rules , with the official type being the type determined from the resource's Content-Type metadata , and use the resulting computed type of the resource as if it was the actual type.
Otherwise, if neither of these conditions apply or if the user agent opts not to apply the image sniffing rules, then the user agent must use the resource's Content-Type metadata to determine the type of the resource. If there is no type metadata, but the external resource link type has a default type defined, then the user agent must assume that the resource is of that type.
The stylesheet link type defines rules for processing the resource's Content-Type metadata. Once the user agent has established the type of the resource, the user agent must apply the resource if it is of a supported type and the other relevant conditions apply, and must ignore the resource otherwise.
For files B and C, it would then check the actual types returned by the server. If one of the two files was returned without a Content-Type metadata, or with a syntactically incorrect type like Content-Type: "null" , then the default type for stylesheet links would kick in. All external resource links have a fetch and process the linked resource algorithm, which takes a link element el. They also have linked resource fetch setup steps which take a link element el and request request.
Individual link types may provide their own fetch and process the linked resource algorithm, but unless explicitly stated, they use the default fetch and process the linked resource algorithm. Similarly, individual link types may provide their own linked resource fetch setup steps , but unless explicitly stated, these steps just return true.
The default fetch and process the linked resource , given a link element el , is as follows:. If el 's href attribute's value is the empty string, then return. Parse a URL given el 's href attribute, relative to el 's node document. If that fails, then return. Otherwise, let url be the resulting URL record.
Let corsAttributeState be the current state of el 's crossorigin content attribute. Set request 's synchronous flag. Set request 's client to el 's node document 's relevant settings object. Set request 's cryptographic nonce metadata to the current value of el 's [[CryptographicNonce]] internal slot.
Set request 's integrity metadata to the current value of el 's integrity content attribute. Set request 's referrer policy to the current state of el 's referrerpolicy attribute. Run the linked resource fetch setup steps , given el and request. If the result is false, then return. Run the following steps in parallel :. Let response be the result of fetching request. Let success be true. If response is a network error or its status is not an ok status , set success to false.
Note that content-specific errors, e. If success is true, wait for the link resource 's critical subresources to finish loading. The specification that defines a link type's critical subresources e. However, since this is not currently explicit, this specification describes waiting for a link resource 's critical subresources to be fetched and processed, with the expectation that this will be done correctly.
User agents may opt to only try to fetch and process such resources when they are needed, instead of pro-actively fetching all the external resources that are not applied. Similar to the fetch and process the linked resource algorithm, all external resource links have a process the linked resource algorithm which takes a link element el , boolean success , and response response.
Individual link types may provide their own process the linked resource algorithm, but unless explicitly stated, that algorithm does nothing. Unless otherwise specified for a given rel keyword, the element must delay the load event of the element's node document until all the attempts to fetch and process the linked resource and its critical subresources are complete.
Resources that the user agent has not yet attempted to fetch and process, e. These headers are to be processed according to the rules given in the relevant specifications. See issue for discussion on integrating this into the spec.
Interactive user agents may provide users with a means to follow the hyperlinks created using the link element, somewhere within their user interface. The exact interface is not defined by this specification, but it could include the following information obtained from the element's attributes, again as defined below , in some form or another possibly simplified , for each hyperlink created with each link element in the document:. User agents could also include other information, such as the type of the resource as given by the type attribute.
If the itemprop attribute is present: flow content. If the itemprop attribute is present: phrasing content. Contexts in which this element can be used : If the charset attribute is present, or if the element's http-equiv attribute is in the Encoding declaration state : in a head element. If the http-equiv attribute is present but not in the Encoding declaration state : in a head element. If the http-equiv attribute is present but not in the Encoding declaration state : in a noscript element that is a child of a head element.
If the name attribute is present: where metadata content is expected. If the itemprop attribute is present: where metadata content is expected. If the itemprop attribute is present: where phrasing content is expected. Content attributes : Global attributes name — Metadata name http-equiv — Pragma directive content — Value of the element charset — Character encoding declaration media — Applicable media Accessibility considerations : For authors.
The meta element can represent document-level metadata with the name attribute, pragma directives with the http-equiv attribute, and the file's character encoding declaration when an HTML document is serialized to string form e.
Exactly one of the name , http-equiv , charset , and itemprop attributes must be specified. If either name , http-equiv , or itemprop is specified, then the content attribute must also be specified. Otherwise, it must be omitted. The charset attribute specifies the character encoding used by the document. This is a character encoding declaration. If the attribute is present, its value must be an ASCII case-insensitive match for the string " utf-8 ".
There must not be more than one meta element with a charset attribute per document. The content attribute gives the value of the document metadata or pragma directive when the element is used for those purposes.
The allowed values depend on the exact context, as described in subsequent sections of this specification. If a meta element has a name attribute, it sets document metadata. Document metadata is expressed in terms of name-value pairs, the name attribute on the meta element giving the name, and the content attribute on the same element giving the value.
The name specifies what aspect of metadata is being set; valid names and the meaning of their values are described in the following sections. If a meta element has no content attribute, then the value part of the metadata name-value pair is the empty string.
The media attribute says which media the metadata applies to. Unless the name is theme-color , the media attribute has no effect on the processing model and must not be used by authors. The name , content , and media IDL attributes must reflect the respective content attributes of the same name.
The IDL attribute httpEquiv must reflect the content attribute http-equiv. The value must be a short free-form string giving the name of the web application that the page represents. If the page is not a web application, the application-name metadata name must not be used. Translations of the web application's name may be given, using the lang attribute to specify the language of each name. There must not be more than one meta element with a given language and where the name attribute value is an ASCII case-insensitive match for application-name per document.
0コメント