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.