Scribd
Upload
9 views

Chapter 04 - HTML Overview

The document provides an overview of HTML terminology, structure, and semantics. It discusses the evolution of markup languages from SGML to HTML and XML. It describes key differences between HTML and XML, such as HTML focusing on document display versus XML focusing on data description. It also outlines common HTML elements, empty elements, attributes, document types, character escaping, and semantic markup.

Uploaded by

ryuu.ducat
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Chapter 04 - HTML Overview

The document provides an overview of HTML terminology, structure, and semantics. It discusses the evolution of markup languages from SGML to HTML and XML. It describes key differences between HTML and XML, such as HTML focusing on document display versus XML focusing on data description. It also outlines common HTML elements, empty elements, attributes, document types, character escaping, and semantic markup.

Uploaded by

ryuu.ducat
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

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 + ;

&lt; is displayed as <

&#169; is displayed as ©

&#x000A2; 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

You might also like