This section is non-normative.<\/i><\/p>\n
A basic HTML document looks like this:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <title>Sample page<\/title>\r\n <\/head>\r\n <body>\r\n <h1>Sample page<\/h1>\r\n <p>This is a <a href=\"demo.html\">simple<\/a> sample.<\/p>\r\n <!-- this is a comment -->\r\n <\/body>\r\n<\/html><\/pre>\nHTML documents consist of a tree of elements and text. Each element is denoted in the source by
\n a start tag<\/a>, such as “<body><\/code>“, and
\n an end tag<\/a>, such as “<\/body><\/code>“.
\n (Certain start tags and end tags can in certain cases be omitted<\/a> and are implied by other tags.)<\/p>\nTags have to be nested such that elements are all completely within each other, without
\n overlapping:<\/p>\n<p>This is <em>very <strong>wrong<\/em>!<\/strong><\/p><\/pre>\n<p>This <em>is <strong>correct<\/strong>.<\/em><\/p><\/pre>\nThis specification defines a set of elements that can be used in HTML, along with rules about
\n the ways in which the elements can be nested.<\/p>\nElements can have attributes, which control how the elements work. In the example below, there
\n is a hyperlink<\/a>, formed using thea<\/a><\/code> element and itshref<\/a><\/code> attribute:<\/p>\n<a href=\"demo.html\">simple<\/a><\/pre>\nAttributes<\/a> are placed inside the start tag, and consist
\n of a name<\/a> and a value<\/a>, separated by an “=<\/code>” character.
\n The attribute value can remain unquoted<\/a> if it doesn’t contain space characters<\/a> or any of\"<\/code>'<\/code>`<\/code>=<\/code><<\/code> or
\n><\/code>. Otherwise, it has to be quoted using either single or double quotes.
\n The value, along with the “=<\/code>” character, can be omitted altogether if the
\n value is the empty string.<\/p>\n<!-- empty attributes -->\r\n<input name=address disabled>\r\n<input name=address disabled=\"\">\r\n\r\n<!-- attributes with a value -->\r\n<input name=address maxlength=200>\r\n<input name=address maxlength='200'>\r\n<input name=address maxlength=\"200\"><\/pre>\nHTML user agents (e.g. Web browsers) then parse<\/i> this markup, turning it into a DOM
\n (Document Object Model) tree. A DOM tree is an in-memory representation of a document.<\/p>\nDOM trees contain several kinds of nodes, in particular a
DocumentType<\/a><\/code> node,
\nElement<\/a><\/code> nodes,Text<\/a><\/code> nodes,Comment<\/a><\/code> nodes, and in some cases
\nProcessingInstruction<\/a><\/code> nodes.<\/p>\nThe markup snippet at the top of this section<\/a> would be
\n turned into the following DOM tree:<\/p>\n\n
- DOCTYPE:
html<\/code><\/li>\nhtml<\/a><\/code>\n\n
head<\/a><\/code>\n\n
#text<\/a><\/code>: \u23ce\u2423\u2423<\/span><\/li>\ntitle<\/a><\/code>\n\n
#text<\/a><\/code>: Sample page<\/span><\/li>\n<\/ul>\n<\/li>\n#text<\/a><\/code>: \u23ce\u2423<\/span><\/li>\n<\/ul>\n<\/li>\n#text<\/a><\/code>: \u23ce\u2423<\/span><\/li>\nbody<\/a><\/code>\n\n
#text<\/a><\/code>: \u23ce\u2423\u2423<\/span><\/li>\nh1<\/a><\/code>\n\n
#text<\/a><\/code>: Sample page<\/span><\/li>\n<\/ul>\n<\/li>\n#text<\/a><\/code>: \u23ce\u2423\u2423<\/span><\/li>\np<\/a><\/code>\n\n
#text<\/a><\/code>: This is a <\/span><\/li>\na<\/a><\/code>href<\/code>=”demo.html<\/code>“<\/span>\n\n
#text<\/a><\/code>: simple<\/span><\/li>\n<\/ul>\n<\/li>\n#text<\/a><\/code>: sample.<\/span><\/li>\n<\/ul>\n<\/li>\n#text<\/a><\/code>: \u23ce\u2423\u2423<\/span><\/li>\n#comment<\/a><\/code>: this is a comment <\/span><\/li>\n#text<\/a><\/code>: \u23ce\u2423\u23ce<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nThe root element<\/a> of this tree is the
html<\/a><\/code> element, which is the
\n element always found at the root of HTML documents. It contains two elements,head<\/a><\/code>
\n andbody<\/a><\/code>, as well as aText<\/a><\/code> node between them.<\/p>\nThere are many more
Text<\/a><\/code> nodes in the DOM tree than one would initially expect,
\n because the source contains a number of spaces (represented here by “\u2423”) and line breaks
\n (“\u23ce”) that all end up asText<\/a><\/code> nodes in the DOM. However, for historical
\n reasons not all of the spaces and line breaks in the original markup appear in the DOM. In
\n particular, all the whitespace beforehead<\/a><\/code> start tag ends up being dropped silently,
\n and all the whitespace after thebody<\/a><\/code> end tag ends up placed at the end of the
\nbody<\/a><\/code>.<\/p>\nThe
head<\/a><\/code> element contains atitle<\/a><\/code> element, which itself contains a
\nText<\/a><\/code> node with the text “Sample page”. Similarly, thebody<\/a><\/code> element
\n contains anh1<\/a><\/code> element, ap<\/a><\/code> element, and a comment.<\/p>\n
\nThis DOM tree can be manipulated from scripts in the page. Scripts (typically in JavaScript)
\n are small programs that can be embedded using thescript<\/a><\/code> element or using event
\n handler content attributes<\/a>. For example, here is a form with a script that sets the value
\n of the form’soutput<\/a><\/code> element to say “Hello World”:<\/p>\n<form<\/a> name<\/a>=\"main\">\r\n Result: <output<\/a> name<\/a>=\"result\"><\/output>\r\n <script<\/a>>\r\n document<\/a>.forms<\/a>.main.elements<\/a>.result.value<\/a> = 'Hello World';\r\n <\/script>\r\n<\/form><\/pre>\nEach element in the DOM tree is represented by an object, and these objects have APIs so that
\n they can be manipulated. For instance, a link (e.g. thea<\/a><\/code> element in the tree above)
\n can have its “href<\/a><\/code>” attribute changed in several
\n ways:<\/p>\nvar a = document<\/a>.links<\/a>[0]; \/\/ obtain the first link in the document\r\na.href<\/a> = 'sample.html'; \/\/ change the destination URL of the link\r\na.protocol<\/a> = 'https'; \/\/ change just the scheme part of the URL\r\na.setAttribute('href', 'http:\/\/example.com\/'); \/\/ change the content attribute directly<\/pre>\nSince DOM trees are used as the way to represent HTML documents when they are processed and
\n presented by implementations (especially interactive implementations like Web browsers), this
\n specification is mostly phrased in terms of DOM trees, instead of the markup described above.<\/p>\n
\nHTML documents represent a media-independent description of interactive content. HTML documents
\n might be rendered to a screen, or through a speech synthesiser, or on a braille display. To
\n influence exactly how such rendering takes place, authors can use a styling language such as
\n CSS.<\/p>\nIn the following example, the page has been made yellow-on-blue using CSS.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <title>Sample styled page<\/title>\r\n <style>\r\n body { background: navy; color: yellow; }\r\n <\/style>\r\n <\/head>\r\n <body>\r\n <h1>Sample styled page<\/h1>\r\n <p>This page is just a demo.<\/p>\r\n <\/body>\r\n<\/html><\/pre>\nFor more details on how to use HTML, authors are encouraged to consult tutorials and guides.
\n Some of the examples included in this specification might also be of use, but the novice author is
\n cautioned that this specification, by necessity, defines the language with a level of detail that
\n might be difficult to understand at first.<\/p>\n","protected":false},"excerpt":{"rendered":"This section is non-normative. A basic HTML document looks like this: <!DOCTYPE html> <html> <head> <title>Sample page<\/title> <\/head> <body> <h1>Sample page<\/h1> <p>This is a <a href=”demo.html”>simple<\/a> sample.<\/p> <!– this is a comment –> <\/body> <\/html> HTML documents consist of a … Continue reading