Editing HTML element (section)

==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>