Content deleted Content added
→Concepts: Fixed grammar Tags: Reverted canned edit summary Incorrectly formatted external link or image blanking Mobile edit Mobile app edit Android app edit App section source |
Reverted 1 edit by Sapphaline (talk): <p> does need an end tag |
||
| (37 intermediate revisions by 22 users not shown) | |||
Line 1:
{{Short description|Individual component of an HTML document}}
{{for|the usage of HTML on Wikipedia|
{{
{{Use American English|date=March 2018}}
{{Html series}}
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==
[[File:HTML element content categories.svg|thumb|HTML element content categories]]
===Elements vs. tags===
As is generally understood, the position of an element is indicated as spanning from a start tag and is terminated by an end tag.<ref name="HTML401_Elements">{{Cite web
|at=§3.2.1 Elements
|title=§3 On SGML and HTML
|work=HTML 4.01 Specification
|date=24 December 1999
|url=http://www.w3.org/TR/1999/REC-html401-19991224/intro/sgmltut.html#h-3.2.1
|publisher=[[W3C]]
}}</ref> This is the case for many, but not all, elements within an HTML document. The distinction is explicitly emphasised in ''HTML 4.01 Specification'':
{{quote|'''Elements are not tags.''' Some people refer to elements as tags (e.g., "the P tag"). Remember that the element is one thing, and the tag (be it start or end tag) is another. For instance, the HEAD element is always present, even though both start and end HEAD tags may be missing in the markup.<ref name="HTML401_Elements"/>}}
Similarly the W3C Recommendation '''''HTML 5.1 2nd Edition''''' explicitly says:
{{quote| source=[https://www.w3.org/TR/html51/syntax.html#tags HTML 5.1 2nd Edition § 8.1.2. Elements § Tags] |
'''Tags''' are used to delimit the start and end of elements in the markup. (...) The start and end tags of certain normal elements can be omitted, (...) <br/> The contents of the element must be placed between just after the start tag (which <u>might be implied</u>, in certain cases) and just before the end tag (which again, <u>might be implied</u>, in certain cases). }}
and:
{{quote| source=[https://www.w3.org/TR/html51/syntax.html#optional-tags HTML 5.1 2nd Edition § 8.1.2.4. Optional tags] |
Certain tags can be '''omitted'''. <br/> '''NOTE:'''<br/> Omitting an element's start tag (...) does not mean the element is not present; it is implied, but it is still there. For example, an HTML document always has a root <kbd><nowiki><html></nowiki></kbd> element, even if the string <kbd><nowiki><html></nowiki></kbd> doesn't appear anywhere in the markup. }}
As HTML (before HTML5) is based on [[SGML]],<ref>{{Cite web
|at=§3.1 Introduction to SGML
|title=§3 On SGML and HTML
|work=HTML 4.01 Specification
|date=24 December 1999
|url=http://www.w3.org/TR/1999/REC-html401-19991224/intro/sgmltut.html
|publisher=[[W3C]]
}}</ref> its parsing also depends on the [[Document Type Definition|Document Type Definition (DTD)]], specifically an HTML DTD (e.g. HTML 4.01<ref name="W3C, HTML 401 DTD" >{{Cite web
|title=HTML 4.01, §21, Document Type Definition
|date=24 December 1999
|url=http://www.w3.org/TR/1999/REC-html401-19991224/sgml/dtd.html
|publisher=[[W3C]]
}}</ref>{{refn|group=note|HTML 4.01 is one of a small number of well-known HTML DTDs. It is chosen here as the best illustrative example, although the same behavior applies to the other W3C-published DTDs for HTML.}}). The DTD specifies which element types are possible (i.e. it defines the set of element types) and also the valid combinations in which they may appear in a document. It is part of general SGML behavior that, where only one valid structure is {{em|possible}} (per the DTD), its explicit statement in any given document is not generally required. As a simple example, the {{code|lang=html|code=<p>}} tag indicating the start of a paragraph element should be complemented by a {{code|lang=html|code=</p>}} tag indicating its end. But since the DTD states that paragraph elements cannot be nested, an HTML document fragment {{code|lang=html|code=<p>Para 1 <p>Para 2 <p>Para 3 }} is thus inferred to be equivalent to {{code|lang=html|code=<p>Para 1 </p><p>Para 2 </p><p>Para 3 }}. (If one paragraph element cannot contain another, any currently open paragraph must be closed before starting another.) Because this implication is based on the combination of the DTD and the individual document, it is not usually possible to infer elements from document tags {{em|alone}} but only by using an SGML—or HTML—aware parser with knowledge of the DTD. [[HTML5]] creates a similar result by defining what tags can be omitted.<ref name=whatwg-syntax-tag-omission>{{cite web |title=HTML Standard § Optional tags |url=https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission |website=WHATWG |access-date=22 March 2019}}</ref>
===SGML vs. XML===
SGML is complex, which has limited its widespread understanding and adoption. [[XML]] was developed as a simpler alternative. Although both can use the DTD to specify the supported elements and their permitted combinations as document structure, XML parsing is simpler. The relation from tags to elements is always that of parsing the actual tags included in the document, without the implied closures that are part of SGML.{{refn|group=note|A macro-like feature of DTDs may still be used within XML.}}
HTML as used on the current web is likely to be either treated as XML, by being [[XHTML]], or as [[HTML5]]; in either case the parsing of document tags into [[Document Object Model]] (DOM) elements is simplified compared to legacy HTML systems. Once the DOM of elements is obtained, behavior at higher levels of interface (example: screen rendering) is identical or nearly so.{{refn|group=note|One minor difference is that XML, even after the DOM interface, is case-sensitive.<ref>{{Cite web
|at=§1.3. XHTML and the HTML DOM
|work=Document Object Model (DOM) Level 2 HTML Specification
|date=9 January 2003
|title=§1. Document Object Model HTML
|url=http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-5353782642
|publisher=[[W3C]]
}}</ref>}}
===<code>%block;</code> vs. box===
Part of this CSS presentation behavior is the notion of the "[[CSS box model|box model]]". This is applied to those elements that CSS considers to be "block" elements, set through the CSS {{code|lang=css|code=display: block;}} declaration.
HTML also has a similar concept, although different, and the two are very frequently confused. <code>%block;</code> and <code>%inline;</code> are groups within the HTML DTD that group elements as being either "block-level" or "inline".<ref name="W3C, HTML 4.01, block and inline" >{{Cite web
|at=§7.5.3 Block-level and inline elements
|title=§7 The global structure of an HTML document
|work=HTML 4.01 Specification
|date=24 December 1999
|url=http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#h-7.5.3
|publisher=[[W3C]]
}}</ref> This is used to define their nesting behavior: block-level elements cannot be placed into an inline context.{{refn|group=note|However, see {{code|lang=html|code=<object>}} for the inevitable exception.}} This behavior cannot be changed; it is fixed in the DTD. Block and [[inline elements]] have the appropriate and different [[CSS]] behaviors attached to them by default,<ref name="W3C, HTML 4.01, block and inline" /> including the relevance of the box model for particular element types.
Note though that this CSS behavior can, and frequently is, changed from the default. Lists with {{code|lang=html|code=<ul><li> ...}} are <code>%block;</code> elements and are presented as block elements by default. However, it is quite common to set these with CSS to display as an inline list.<ref>{{Cite web
|title=CSS Design: Taming Lists
|author=Mark Newhouse
|date=27 September 2002
|url=http://alistapart.com/article/taminglists/
|publisher=[[A List Apart]]
}}</ref>
==Overview==
Line 313 ⟶ 327:
==== Lists ====
{{glossary}}
{{anchor|dl}}{{term|term=dl |content= {{XMLElement|dl|Definition List}} }}
{{defn|1= {{redirect|Definition list|Wikipedia's article on lists of definitions|Glossary}}
A description list (a.k.a. [[association list]] or definition list) consists of name–value groups,<ref name="W3C-5-DL">{{cite web |url=http://www.w3.org/TR/html5/grouping-content.html#the-dl-element |title=4.4 Grouping content – HTML5 |work=HTML5: A vocabulary and associated APIs for HTML and XHTML – W3C Recommendation |publisher=[[World Wide Web Consortium]] |at=§4.4.8 The dl element |date=28 October 2014 |access-date=16 August 2015}}</ref> and was known as a definition list prior to HTML5.<ref>{{cite web |url=http://www.w3.org/TR/html4/struct/lists.html#edef-DL |title=Lists in HTML documents |at=§10.3 Definition lists: the DL, DT, and DD elements |work=HTML 4.01 Specification – W3C Recommendation |date=24 December 1999 |publisher=World Wide Web Consortium |access-date=2 May 2015 }}</ref> Description lists are intended for groups of "terms and definitions, metadata topics and values, questions and answers, or any other groups of name–value data".<ref>{{cite web |website=[[W3C]]|title=HTML5: A Vocabulary and Associated APIs for HTML and XHTML, W3C Working Draft|date=5 April 2011|url=http://www.w3.org/TR/2011/WD-html5-20110405/grouping-content.html#the-dl-element}}.</ref>
Line 450 ⟶ 464:
====Anchor====
{{for|anchors on Wikipedia|WP:ANCHOR|WP:ANCHOR DEF|selfref=true}}
{{glossary}}
{{term|term=a |content= {{XMLElement|a|Anchor}} }}
Line 473 ⟶ 487:
====Phrase elements====
Phrase elements are used for marking up phrases and adding structure or semantic meaning to text fragments. For example, the
=====General=====
Line 486 ⟶ 500:
{{defn|'''Standardized''' in [[#HTML401|HTML 4.0]]; still current, '''not supported''' in [[#HTML5|HTML5]]. Recommended replacement is the <code>abbr</code> tag.<ref>[https://www.w3schools.com/tags/tag_acronym.asp Acronym tag], acronym.</ref>}}
{{term|term=
{{defn|1= Inline definition of a single term.}}
{{defn|<code>DFN</code> existed in ''[[#HTMLDRAFT12|HTML Internet Draft 1.2]]'', and was fully '''standardized''' in [[#HTML32|HTML 3.2]]; still current.}}
Line 563 ⟶ 577:
{{defn|<code>S</code> was '''deprecated''' in [[#HTML401|HTML 4.0 Transitional]] (having not appeared in any previous standard), and was '''invalid''' in [[#HTML401|HTML 4.0 Strict]]. '''Reintroduced''' in [[#HTML5|HTML5]], which instead deprecated {{tag|strike|o}}.}}
{{term|term=big |content= {{XMLElement|big|Big|deprecated=1}} }}
{{defn|1= Increased font size (<big>bigger</big> text). Equivalent CSS: {{code|lang=css|code={ font-size: larger; } }}}}
{{defn|'''Standardized''' in [[#HTML32|HTML 3.2]]; '''not supported''' in [[#HTML5|HTML5]].}}
{{term|term=strike |content= {{XMLElement|strike|Strikethrough|deprecated=1}} }}
{{defn|1= Strike-through text (<s>Strikethrough</s>), (Equivalent CSS: {{code|lang=css|code={ text-decoration: line-through; } }})}}
{{defn|<code>STRIKE</code> was standardized in [[#HTML32|HTML 3.2]]; '''deprecated''' in [[#HTML401|HTML 4.0 Transitional]]; '''invalid''' in [[#HTML401|HTML 4.0 Strict]].}}
Line 575 ⟶ 589:
{{defn|<code>TT</code> existed in ''[[#HTMLDRAFT12|HTML Internet Draft 1.2]]'', and was '''Standardized''' in [[#HTML20|HTML 2.0]]; not supported<ref name="html5-tt-not-supported">{{citation|url=http://www.w3.org/TR/html5/obsolete.html#non-conforming-features |title=11 Obsolete features — HTML5 |publisher=W3C |access-date=2012-03-26}}</ref> in HTML5. Possible replacements: [[#kbd|{{tag|kbd|o}}]] for marking user input, [[#var|{{tag|var|o}}]] for variables (usually rendered italic, and not with a change to monospace), [[#code|{{tag|code|o}}]] for source code, [[#samp|{{tag|samp|o}}]] for output.<ref name="html5-tt-not-supported" />}}
{{term|term=font |content= {{XMLElement|font|
{{defn|1= {{code|lang=html|code=<font [color=<var>color</var>] [size=<var>size</var>] [face=<var>face</var>]>...</font>}}
Line 704 ⟶ 718:
{{term|term=applet |content= {{XMLElement|applet|Java Applet|deprecated=xhtml}} }}
{{defn|1= Embeds a [[Java applet]] in the page. Deprecated in favor of {{tag|object|o}}, as it could only be used with Java applets, and had accessibility limitations.}}
{{defn|'''Standardized''' in [[#HTML32|HTML 3.2]]; '''deprecated''' in [[#HTML401|HTML 4.0 Transitional]]; '''invalid''' in [[#HTML401|HTML 4.0 Strict]]
{{term|term=area |content= {{XMLElement|area|Area|end=no}} }}
| |||