Transcript
PRESENTER: This tutorial explores well-formed and valid markup. We're going to cover what is well-formed markup, what is valid markup, what is semantic markup, and why well-formed, valid, and semantic markup are important.
Section 1-- What is well-formed markup? A well-formed HTML document should have the following characteristics. Number one, there should be a single root element that contains all other elements. For HTML, the root element is the HTML element.
Two, all content should be defined within HTML elements. In this example, the content is wrapped inside a paragraph element.
Three, all elements should be HTML elements defined by the W3C. In HTML, authors cannot invent their own elements. These elements are defined in the HTML 5.2 specification.
Four, apart from void elements, all elements should include a start and an end tag. In this example, the h1, p, span, and the emphasis element all have a start and end tag.
Five, as void elements have no content, there's no need for an end tag. These elements are self-closing. In this example, both the br and the hr elements are void elements.
Six, the beginning and end tags of elements should be correctly nested with non-missing and non-overlapping. In this case, the span element is nested properly inside the paragraph element, which is nested inside the div element.
Seven, all content characters should be properly encoded. Special characters, such as the greater than and ampersand symbol, should not appear inside elements without being correctly escaped. In this example, the two characters are shown in their correctly encoded state.
Section 2-- What is valid markup? A valid HTML document is one that conforms to its relevant document type definition. A document type definition is a set of markup declarations that define a document type for that document.
HTML documents must include a doctype as the first line of code within any document. This helps browsers and devices determine the language of the document. In the case of HTML, this is the doctype declaration that should be used. HTML documents can be checked to make sure that they're valid using the W3C HTML validator.
Section 3-- What is semantic markup? All HTML elements have specific semantics or meaning. Each HTML element conveys some information about the type of content contained between the open and closing tags. For example, browsers will interpret the h1 heading to mean that it's the most important heading on a web page.
Some elements are considered generic, but they still convey some sort of meaning. For example, the div element represents a generic block level element, and the span element represents a generic inline element.
Section 4-- Why is well-formed, valid, and semantic markup important? Well-formed and valid markup will generally render more quickly and more accurately in browsers and devices than poorly formed and invalid markup. While valid markup does not guarantee that a web page will be accessible, it is a good first step.
Assistive technologies interpret web pages through various mechanisms. Some rely on the browser to construct the dome. If the dome is poorly constructed or invalid, then there's a possibility that the assistive technology may have trouble interpreting the document. For this reason, it is vital that the correct HTML elements are used to convey semantics, as this media is interpreted by assistive technologies.
Conclusion. So there you have it, a simple explanation of well-formed and valid markup.
Except where otherwise noted, this work is licensed under a Creative Commons by Attribution ShareAlike 4.0 license. Copyright 2018 California Community College's chancellor's office. These works are licensed under Creative Commons Attribution 4.0 international license. They're available to everyone, and may be repurposed to meet the unique needs of educational institutions.