HTML overview
Web development I: Front-end engineering
Terminology
GML → SGML → XML → HTML
Document type declaration
Markup vs Content
Tag vs Element
Attributes
Encoding
Character entities (escaping)
HTML vs XML
XML: eXtensible Markup Language HTML: HyperText Markup Language
Focused on describing data Focused on describing documents
Dynamic: Transport purposes Static: Display purposes
Any tag is possible Predefined set of tags
Case-sensitive syntax Case-insensitive syntax
Must be well formed May have errors
Type safety and verbosity
What browsers ignore
Multiple white spaces
Line breaks
Tabs
Unrecognized markup
<!-- Anything inside comments -->
Browser defaults
No doctype implies “quirks mode”
Block vs inline elements
● Rendering implications: width and
margin
● Any non-standard tags are
considered inline
Browser defaults
Semantic markup
Provide meaning to documents
● Examples: section, main, header, footer, aside, nav
Microdata: https://www.w3.org/TR/microdata/
Microformats: https://microformats.io/
Empty elements
Were introduced to HTML by mistake: presentational markup crept into the
language
May or may not have attributes
Examples: image, line break, rule, meta tags
Good practice: close them explicitly (e.g. <br /> instead of <br>)
https://www.w3.org/TR/xhtml1/#C_2
Attributes
Attributes
Order does not matter but repetition does
Some can be empty: <input type="text" disabled />
Some can omit quotes: <input value=yes />
Custom attributes are prefixed with data-: <input data-hello="101" />
Special semantics: id (unique identifier) and class (classifier)
Common doctypes (and DTDs)
HTML 4.01 (strict) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.1 <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML5 <!DOCTYPE html>
Character entities
Some characters are reserved, e.g. <, >, &, "
Escaping sequence is & + str + ; or &# + dec + ; or &#x + hex + ;
< is displayed as <
© is displayed as ©
¢ is displayed as ¢
See https://dev.w3.org/html5/html-author/charref
How many HTML tags are there?
“144 distinct tag names, out of which 28 are deprecated.”
— https://developer.mozilla.org/en-US/docs/Web/HTML/Element
