University of Dar es Salaam

Trends in content mark-up

(HTML5, XHTML, CSS, XML) for
accessibility and usability
IS 628 :GROUP 4
MRS ZAMZAM H. KHATIB
MR. DELPHIN MURHABAZI B.
MR YOHANA J. MANGUBULI
 University of Dar es Salaam
Content

• Introduction
• Trends in Mark-up Languages
• General Trends in Content Mark-up
 University of Dar es Salaam
Introduction
• What is Content Mark-up
• CONTENT MARKUP: Is the process of adding tags and attributes to a document to define a
structure and appearance.
• With Web Technologies the primary way to access Web Information is the Web
Browser. Therefore, to mark-up web content is to influence how the content
appears on a web browser. To do so Mark-up Languages were introduced. The
following are common mark-up languages whose evolution can give the general
trend of web content mark-up:
 University of Dar es Salaam
• HTML : Hyper Text Mark-up Language
• Hyper Text is text displayed on a computer screen or other electronic device with reference to other
text that the reader can immediately access.
• HTML is a language used to semantically structure Hypertext documents to be translated on a Web
browsers.
• XHTML :Extensible Hyper Text Mark-up Language
• is a separate language that began as a reformulation of HTML 4.0 using XML 1.0. It is now referred to as
‘the XML syntax for HTML’ and no longer being developed as a separate standard.
• XML : Extensible Mark-up Language
• is a data format for structuring and organizing information in a machine-readable and extensible way. It
is not limited to predefined tags, providing flexibility for representing various structured data.
• CSS : Cascading Style Sheets
• is a style sheet language used to style the presentation of a document written in a mark-up language
like HTML or XML.
 University of Dar es Salaam
Trends in Mark-up Languages: HTML

HTML 1.0 HTML 2.0 HTML 3.2 HTML 4.01 HTML5 HTML 5.1 HTML 5.2 HTML 5.3
1993

1995

1997

1999

2014

2016

2017

• offered basic structuring
e.g. heading, lists,
paragraph
• NO Styling options
• NO table support.
• Limited font support
2022
• Standardized for all web • Introduction of tables, • Separation of HTML & • New semantic elements • new sematic elements • improved security by • Further refinements and
browsers applets, text flow CSS (article, section, header, added e.g summary, controlling referrer new features
• Basic structure for around images • HTML mainly for content etc.) main, details etc information
documents • Support for web page and structure • added native video and • ability to specify • Improved form control
• Introduced basic forms sectioning using frames • Introduction of audio support multiple sources for using ‘pattern’ attribute
for data input Cascading Style Sheets • better error handling audio and video tags of ‘input’
(CSS) support for Styling and compatibility across
• Offered 3 translation different browsers
options (Strict,
transitional, Frameset)
 University of Dar es Salaam
XML

XML 1.0 XML 1.1 XML 1.0 5TH ED. XML 1.1 2ND ED. XML 1.1 (Latest)
1998

2004

2008

2006

2008
Standardized • Expanded character • Editorial revisions and • Editorial revisions and • Editorial revisions and
syntax for creating set, support for entire errata errata errata
Unicode Char. Set.
Mark-up languages • Better Support for
Strict syntax Bidirectional Text
(support languages
Introduced DTDs written from right to
which define left)
structure &
elements of XML
file
 University of Dar es Salaam
XHTML

XHTML 1.0 XHTML 1.1 XHTML 2.0 XHTML 5

Abandoned

In development
2000

• Adoption of 2001
• Modules for • Modular • Editorial
XML Syntax Languages design with revisions
• Introduction and Scripting role Alignment
of modality • Support for separation with HTML5
with DTDs Polyglot specifications
documents
 University of Dar es Salaam
CSS
CSS1 CSS2 CSS2.1 CSS3

PRESENT
1996

1998

• Basic styling properties and
selectors
2007
• Support for positioning,
media types, and more
complex layouts
• Enhanced font properties
and selectors
• Clarifications and fixes to • Numerous modules
CSS2 introducing new features
and capabilities like
• New selection capabilities
based on attribute, negation
and hierarchy.
• Box modelling features like
rounding corners, using
images as borders etc
• Transitions, Animations and
Transformations
• Responsive Web Design :
allows design to adapt based
on device or screen.
 University of Dar es Salaam
General Trends in Content Mark-up

• More Dynamic Web page designs: Mark-up languages have developed

dynamic content capabilities allowing for more animations and
transformations of the web page to be rendered by browser.
• Emphasis on Appearance: improved ability to incorporate colours and
images to entice web page viewers and make web pages standout.
• Focus on Accessibility: A growing emphasis on creating web content
that is accessible to users with disabilities, leading to increase use of
semantic HTML and ARIA (Accessible Rich Internet Applications) roles
 University of Dar es Salaam
General Trends in Content Mark-up

• Introduction of Security Features into Mark-up Languages: Mark-up

have developed abilities to improve security of websites through
controlling various aspects such user inputs and referral attributes.
• Responsive Web Design: responsive web design principles applied
mainly through HTML5 and CSS3 allow content too adapt to different
devices and screens sizes. This has allowed usability to improve across
a variety of platforms and made content more accessible to users on
different devices.
University of Dar es Salaam

THANK YOU