Understanding Markup Languages for Web Development

UFCFR5-15-3 Advanced Topics in Web Development 2 (2021/22) Lecture 3: Reconsidering Markup

What is a markup language? o A markup language is a type of language used to annotate text and embed tags in electronic documents, irrespective of computer platform, operating system, application or program. o The term markup language is derived from the marking up of manuscripts, where handwritten markups were annotated in the form of printer instructions. Markup languages are also used in playlists, vector graphics, Web services and user interfaces. HTML is the most widely used markup language. There are three types of electronic markup language: o Presentational Markup: Used by traditional word processing systems with WYSIWYG; it is hidden from human users. (e.g. *.doc *.rtf) o Procedural Markup: Integrated with text to provide text processing instructions to programs. Such text is visibly manipulated by the author. Procedural markup systems include programming constructs, where macros or subroutines are defined and invoked by name. (e.g. TeX, Postscript, VB macros) o Descriptive Markup: Used to label parts of a document as to how they should be treated. For example, the HTML <cite> tag is used to label citations in text. (e.g. html, xhtml, xml)

Overview of Markup Languages (1) o A markup language is simply a set of formal rules (a grammar) that defines the layout, format, or structure of text within a document. o After markup instructions are added to a document, the document must be read, or processed and rendered (screen, print, audio etc.) by a program that knows how to interpret the markup elements. o Markup languages existed long before the World Wide Web. They were used primarily in the publishing industry prior to their adaptation to computer programming. o Work began in the 1960s to develop a standardized document markup language that would be platform independent.

Overview of Markup Languages (2) o The Standard Generalized Mark Language (SGML) was the result of this initiative and was the first standardized markup language to gain acceptance. o SGML is the ancestor of, and provides the framework for, current Web markup languages, including XHTML, XML, and HTML. o It was adopted as an international standard by the International Organization for Standards (ISO) in 1986, and has been widely used by many industries, including the automotive industry, the health care industry, the Ministry of Defense, etc., for large scale documentation projects. o It wasn t until the Web exploded in popularity in the mid-1990s that the benefits of an open standard for markup languages became overwhelmingly apparent.

Overview of Markup Languages : HTML oWhen the World Wide Web was in its infancy in the late 1980s and early 1990s, SGML was the perfect tool for building the markup language that would be used to create documents for this new medium. oHypertext Markup Language (HTML) was developed as a lightweight SGML by researchers at CERN (European Organization for Nuclear Research) in the early 1990s. oCERN had been involved with working on the SGML specification for many years. oHTML was much smaller than SGML and gained widespread acceptance very quickly. It provided content developers with a portable document format that was not tied to any particular program or platform, and being an open standard, it was completely free to use.

History/Development of HTML

Innovation & influences in the development of HTML 2012 1991

HTML 5

HTML5 Design Principles Compatibility o evolve the language for easier authoring of web applications Utility o solve real problems (pragmatic approach) o separation of content and presentation (CSS) Interoperability o interoperable browser behaviour o identical error handling across browsers resulting in the same DOM tree for broken HTML Universal Access o features should preferably work across different platforms (cross-platform), devices and media o design features should be accessible to users with disabilities

HTML5 Design Principles Simple is better o new html5 doctype: <!DOCTYPE html> compared with html 4.1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN "http://www.w3.org/TR/html4/strict.dtd"> HTML5 APIs o timing, navigation, vibration, battery status, network, page visibility etc. etc. Avoid external plug-ins o plug-ins are often not nicely integrated with HTML documents o plug-ins can be disabled or blocked (e.g. Adobe Flash on iPad) o plug-ins may crash

HTML5 Taxonomy & Status (Oct. 2014)

Simple HTML5 example: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8 " /> <title>University of the West of England</title> </head> <body> <h1>About</h1> <p>The <a href="http://www.uwe.ac.uk">University of the West of England</a> (also known as UWE Bristol, or simply UWE) is a university located near the city of Bristol, United Kingdom. Its main campus is at Frenchay near Bristol, about five miles (8 km) north of the city centre and close to the M32 motorway. </p> <p> UWE also has ... </p> .. </body> </html>

HTML5 DOM example:

HTML Semantic Elements

Polyglot Markup: making html5 robust It is sometimes valuable to be able to serve HTML5 documents that are also well formed XML documents. An author may, for example, use XML tools to generate a document, and they and others may process the document using XML tools. The language used to create documents that can be parsed by both HTML and XML parsers is called polyglot markup. Polyglot markup is the overlap language of documents that are both HTML5 documents and XML documents. It is recommended that these documents be served as either text/html (if the content is transmitted to an HTML-aware user agent) or application/xhtml+xml (if the content is transmitted to an XHTML-aware user agent). https://www.w3.org/TR/html-polyglot/

XHTML 5 (XML-Serialized HTML 5) XML documents must be served with an XML Internet media type (often called "MIME type") such as application/xhtml+xml or application/xml, and must conform to strict, well-formed syntax of XML. XHTML 5 is simply XML-serialized HTML 5 data (that is, HTML 5 constrained to XHTML's strict requirements, e.g., not having any unclosed tags), sent with one of XML media types. HTML that has been written to conform to both the HTML and XHTML specifications and which will therefore produce the same DOM tree whether parsed as HTML or XML is known as polyglot markup. HTML 5 is designed so that old browsers can safely ignore new HTML 5 constructs. In contrast to HTML 4.01, the HTML 5 specification gives detailed rules for lexing and parsing, with the intent that compliant browsers will produce the same results when parsing incorrect syntax. Although HTML 5 now defines a consistent behaviour for "tag soup" documents, those documents are not regarded as conforming to the HTML 5 standard.

Other markup vocabularies you must know (1): XML and related technologies XML is a markup language that defines a set of rules for encoding documents and data in a (well-formed) format that is both human-readable and machine-readable. XPATH is a query language for selecting nodes from an XML document. In addition, XPath may be used to compute values from the content of an XML document. XSL is a language for transforming XML documents into other XML documents,or other formats such as HTML for web pages, plain text or XSL Formatting Objects, which may subsequently be converted to other formats, such as PDF, PostScript and PNG. XSLT 1.0 is widely supported in modern web browsers. XQUERY is a powerful and convenient language designed for processing XML data. That means not only files in XML format, but also other data including databases whose structure -- nested, named trees with attributes -- is similar to XML.

Other markup vocabularies you must know (2): Markdown o good for API and other forms of technical documentation (help files, manuals etc.) o easy (automated) transformation to html o human readable as text o format free text editing o many programming languages have markdown libraries o used by GitHub and other code repositories

Web Hypertext Application Technology Working Group (WHATWG) https://whatwg.org/

Is HTML really a (declarative) programming language? Professor David Brailsford University of Nottingham Many would say the Prof. stretches it somewhat but interesting anyway.