HTML element: Difference between revisions - Wikipedia

Article Images

Line 1:

{{~~Self reference~~about|~~This article is about~~ the HTML elements in general~~. For~~ |information on how to format Wikipedia entries~~, see [[~~|Help:Wikitext]] |and [[|Help:HTML in wikitext~~]].~~|selfref=y}}▼

~~{{pp-pc|small=yes}}~~

▲{{Self reference|This article is about the HTML elements in general. For information on how to format Wikipedia entries, see [[Help:Wikitext]] and [[Help:HTML in wikitext]].}}

{{Redirect|Font color|OpenType fonts featuring multicolored glyphs|OpenType#Color fonts}}

Line 10 ⟶ 9:

An '''HTML element''' is a type of [[HTML]] (HyperText Markup Language) document component, one of several types of HTML nodes (there are also text nodes, comment nodes and others).{{Vague|date=February 2019}} The first used version of HTML was written by [[Tim Berners-Lee]] in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group [[WHATWG]] and is known as the HTML Living Standard.

An HTML document is composed of a [[tree structure|tree]] of simple HTML [[Node (computer science)|nodes]], such as text nodes, and HTML elements, which add [[semantics]] and formatting to parts of a document (e.g., make text bold, organize it into paragraphs, lists and tables, or embed [[hyperlink]]s and images). Each element can have [[HTML attribute]]s specified. Elements can also have content, including other elements and text.

==Concepts==

Line 100 ⟶ 99:

P. Sherman 42 Wallaby Way Sydney

</syntaxhighlight>

When using [[XHTML]], it is required to open and close all elements, including void elements. This can be done by placing an end tag immediately after the start tag, but this is not legal in HTML 5 and will lead to two elements being created. An alternative way to specify that it is a void element, which is compatible with both XHTML and HTML 5, is to put a <code> /</code> at the {{em|end}} of the tag (not to be confused with the <code>/</code> at the {{em|beginning}} of a closing tag).

P. Sherman 42 Wallaby Way Sydney

Line 302 ⟶ 301:

* The '''content''' of an element is the actual text (or other media) placed between the opening and closing tags of an element.

* The '''padding''' of an element is the space around the content but which still forms part of the element. Padding should not be used to create white space between two elements. Any background style assigned to the element, such as a background image or color, will be visible within the padding. Increasing the size of an element's padding increases the amount of space this element will take up.

* The ''' border''' of an element is the absolute end of an element and spans the perimeter of that element. The thickness of a border increases the size of an element.

* The '''margin''' of an element is the white space that surrounds an element. The content, padding, and border of any other element will not be allowed to enter this area unless forced to do so by some advanced [[CSS]] placement. Using most standard [[Document Type Definition|DTDs]], margins on the left and right of different elements will push each other away. Margins on the top or bottom of an element, on the other hand, will not stack or will intermingle. This means that the white space between these elements will be as big as the larger margin between them.

Line 470 ⟶ 469:

{{term|term=a |content= {{XMLElement|a|Anchor}} }}

{{defn|1= An anchor element is called an anchor because web designers can use it to "anchor" a URL to some text on a web page. When users view the web page in a browser, they can click the text to activate the link and visit the page whose URL is in the link.<ref>{{cite book |last1= Tittel |first1= Ed |last2= Burmeister |first2= Mary C. |date= 2005 |title= HTML 4 for dummies |edition= 5th |publisher= Wiley |location= Hoboken, New Jersey |isbn= 978-0-7645-8917-1 |page= 96 |url= https://archive.org/details/html4fordummies00titt_2/page/96/ |url-access= registration |access-date= 7 August 2022}}</ref>

In HTML, an ''anchor'' can be either the ''origin'' (the [[anchor text]]) or the ''target'' (destination) end of a [[hyperlink]].

With the attribute <code>href</code>,<ref>{{cite web|url=http://www.w3.org/Provider/ServerWriter.html|title=ServerWriter -- /Provider|website=W3C}}</ref> the anchor becomes a hyperlink to either another part of the document or another resource (e.g. a webpage) using an external [[Uniform Resource Locator|URL]]. Alternatively (and sometimes concurrently), with the <code>name</code> or <code>id</code> [[HTML attributes]] set, the element becomes a link target. A [[Uniform Resource Locator]] (URL) can link to this target via a [[fragment identifier]]. In HTML5, any element can now be made into a target by using the <code>id</code> attribute,<ref>{{cite web|url=http://www.w3.org/tr/html5/index.html#attributes-1|title=HTML 5.2|website=W3C}}</ref> so using {{code|lang=html|code=<a name="foo">...</a>}} is not necessary, although this way of adding anchors continues to work.

Line 480 ⟶ 479:

Continuing with this example, now that the section has been marked up as a target, it can be referred to from external sites with a link like: {{code|lang=html|code=<a href="http://example.com#contents">see contents</a>}};

or with a link on the same page like: {{code|lang=html|code=<a href="#contents">contents, above</a>}}.

The attribute <code>title</code> may be set to give brief information about the link: {{code|lang=html|code=<a href="URL" title="additional information">link text</a>}}.

In most graphical browsers, when the cursor hovers over a link, the cursor changes into a hand with an extended index finger and the <code>title</code> value is displayed in a [[tooltip]] or in some other manner. Some browsers render [[Alt attribute|alt text]] the same way, although this is not what the specification calls for.

}}

{{defn|<code>A</code> existed in ''[[#HTMLTAGS|HTML Tags]]'', and was '''standardized''' in [[#HTML20|HTML 2.0]];}}

Line 728 ⟶ 727:

{{term|term=audio |content= {{XMLElement|audio|Audio}} }}

{{defn|1= Adds playable [[~~HTML5~~HTML audio]] to the page. The audio URL is determined using the <code>src</code> attribute. Supported audio formats vary from browser to browser.}}

Line 738 ⟶ 737:

{{term|term=embed |content= {{XMLElement|embed|Embed}} }}

{{defn|1= Inserts a non-standard object (like applet) or external content (typically non-HTML) into the document.}}

{{defn|Deprecated in HTML 4 in favor of {{tag|object|o}}, but then was added back into the HTML5 specification<ref>[http://webdesign.about.com/od/htmltags/p/bltags_embed.htm Jennifer Kyrnin ] {{Webarchive|url=https://web.archive.org/web/20121102014318/http://webdesign.about.com/od/htmltags/p/bltags_embed.htm |date=2012-11-02 }} {{tag|embed|o}}</ref><ref>[https://www.w3schools.com/tags/tag_embed.asp W3Schools] about {{tag|embed|o}}</ref>}}

{{term|term=img |content= {{XMLElement|img|Image|end=no}} }}

Line 767 ⟶ 766:

{{term|term=video |content= {{XMLElement|video|Video}} }}

{{defn|1= Adds a playable [[~~HTML5~~HTML video]] to the page. The video URL is determined using the <code>src</code> attribute. Supported video formats vary from browser to browser.}}

Line 953 ⟶ 952:

==Frames==

Frames allow a visual HTML browser window to be split into segments, each of which can show a different document. This can lower bandwidth use, as repeating parts of a layout can be used in one frame, while variable content is displayed in another. This may come at a certain usability cost, especially in non-visual user agents,<ref>{{cite web|url=http://www.washington.edu/doit/are-frames-accessible|title=Are frames accessible?|quote=...frames do present additional usability challenges that are unique to users with disabilities, particularly those who use screen readers.}}</ref> due to separate and independent documents (or websites) being displayed adjacent to each other and being allowed to interact with the same parent window. Because of this cost, frames (excluding the {{tag|iframe|o}} element) are only allowed in HTML 4.01 Frame-set. Iframes can also hold documents on different servers. In this case the interaction between windows is blocked by the browser. Sites like [[Facebook]] and [[Twitter]] use iframes to display content ([[Plug-in (computing)|plugins]]) on third party websites. Google [[AdSense]] uses iframes to display banners on third party websites.

Line 984 ⟶ 983:

In [[HTML]], '''<code>longdesc</code>''' is an attribute used within the {{tag|img|s}}, {{tag|frame|s}}, or {{tag|iframe|o}} elements. It is supposed to be a [[URL]]{{refn|group=note|Strictly an [[Internationalized resource identifier|IRI]], not a URL; although URLs are a subset of IRIs.}} to a document that provides a '''long description''' for the image, frame, or iframe in question.<ref>{{cite web|url=http://www.w3.org/TR/REC-html40/struct/objects.html|title=Objects, Images, and Applets|publisher=W3C|access-date=2008-12-20}}</ref> This attribute should contain a URL, {{em|not}} – as is commonly mistaken – the text of the description itself.

<code>longdesc</code> was designed to be used by [[screen reader]]s to display image information for computer users with [[accessibility]] issues, such as the blind or [[Visual_impairment |visually impaired]], and is widely implemented by both web browsers and screen readers.<ref>{{cite web|url=http://www.w3.org/html/wg/wiki/ChangeProposals/InstateLongdesc/Implementation|title=InState Longdesc|access-date=2011-09-05}}</ref> Some developers object that<ref>{{cite web|url=http://www.webaim.org/techniques/images/longdesc.php#longdesc|title=Creating Accessible Images|publisher=WebAim|access-date=2008-12-20}}</ref> it is actually seldom used for this purpose because there are relatively few authors who use the attribute and most of those authors use it incorrectly; thus, they recommend deprecating <code>longdesc</code>.<ref>{{citation|url=http://wiki.whatwg.org/wiki/Longdesc_usage |title=Longdesc usage - WHATWG Wiki |publisher=Wiki.whatwg.org |access-date=2012-03-26}}</ref> The publishing industry has responded, advocating the retention of <code>longdesc</code>.<ref>{{cite web|url=http://www.w3.org/Bugs/Public/show_bug.cgi?id=13461|title=Bug 13461 - Commentary on Issue #30 (longdesc) from the Association of American Publishers |access-date=2011-09-05}}</ref>

====Example====

Line 1,028 ⟶ 1,027:

==Non-standard elements==

{{Quote box

| width = 250px

| class = noprint

| quote = <div style="font-size: 100%; color:#FF00CC;">{{marquee|This is the new WikiPedia!}}</div>

| source = Example of marquee text from the [[First Wikipedia edit|first Wikipedia edit]] (accomplished via CSS; the <marquee> tag itself is deprecated and no longer works in most browsers)

}}

{{Quote box

| width = 250px

| class = noprint

| quote = {{blink|[[WP:UuU|UuU]]}}

| source = Example of blinking text (accomplished via CSS; the <blink> tag itself is deprecated and no longer works in most browsers) with link to page. Not to be confused with [[UwU]], this page contains the earliest surviving edit on the English Wikipedia.}}

This section lists some widely used obsolete elements, which means they are not used in [[Validator|valid]] code. They may not be supported in all user agents.

Line 1,093 ⟶ 1,103:

===HTML standards===

;HTML 2.0{{colon}}

:{{cite ~~web~~IETF

|last1=Berners-Lee |first1=Tim |author1-link=Tim Berners-Lee

|last2=Connolly |first2=Dan |author2-link=Dan Connolly (computer scientist)

Line 1,099 ⟶ 1,109:

|publisher=[[IETF]]

|date=November 1995

|rfc=1866

~~|url=https://tools.ietf.org/html/rfc1866~~

|access-date=2009-03-24}}

;HTML 3.2{{colon}}

Line 1,210 ⟶ 1,220:

|access-date=2009-04-18}} ''(This is the final draft of HTML 3.0, which expired without being developed further.)''

;''HTML Tables{{colon}}''

:{{cite ~~web~~IETF

|last=Raggett |first=Dave

|title=HTML Tables (RFC 1942)

|publisher=[[IETF]]

|date=May 1996

|rfc= 1942

~~|url= https://tools.ietf.org/html/rfc1942~~

|access-date = 2009-03-22}}

;XML 1.0{{colon}}