WEB DESIGN AND
MULTIMEDIA
INTECH 2100
HTML
Structure, Elements, Attributes, and HTML5
Lecture Coverage
1. What is HTML?
2. Structure, Attributes, Elements
3. Introduction to HTML5
4. Semantic Elements
3
What is HTML?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web
pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a
heading", "this is a paragraph", "this is a link", etc.
• HTML is not a programming language like C, C++, Java etc. It 4
is a markup language
Markup Language
▪ Standard text-encoding system consisting of a set of symbols
inserted in a text document to control its structure,
formatting, or the relationship between its parts.
▪ The most widely used markup languages are SGML (Standard
Generalized Markup Language), HTML (Hypertext Markup
Language), and XML (Extensible Markup Language).
▪ The markup symbols can be interpreted by a device
(computer, printer, browser, etc.) to control how a document
should look when printed or displayed on a monitor.
5
Standard Generalized Markup Language (SGML)
▪ An international computer standard for the definition of
markup languages.
▪ it is a meta-language, consisting of notations called “tags,”
which specify the function of a piece of text or how it will be
displayed. SGML emphasizes descriptive markup, in which a
tag might be <emphasis>.
▪ GML is used to specify DTDs (document type definitions). A
DTD defines a kind of document, such as a report, by
specifying what elements must appear in the document—e.g.,
<Title> 6
Extensible Markup Language (XML)
▪ XMML is a software- and hardware-independent tool for storing
and transporting data.
▪ XML is a markup language much like HTML
▪ XML was designed to store and transport data
▪ XML was designed to be self-descriptive
▪ XML is a World Wide Web Consortium (W3C) Recommendation
7
World Wide Web Consortium (W3C)
▪ The World Wide Web Consortium (W3C) develops standards and
guidelines to help everyone build a web-based on the principles
of accessibility, internationalization, privacy, and security.
▪ The World Wide Web Consortium is the main international
standards organization for the World Wide Web. Founded in
1994 and led by Tim Berners-Lee, the consortium comprises
member organizations that maintain full-time staff working
together to develop standards for the World Wide Web.
8
The Difference Between XML and HTML
XML and HTML were designed with different goals:
▪ XML was designed to carry data - with a focus on what data is
▪ HTML was designed to display data – with a focus on how data
looks
▪ XML tags are not predefined like HTML tags are
The XML language has no predefined tags. The tags like <to> and
<from> are not defined in any XML standard. These tags are
"invented" by the author of the XML document. HTML works with
predefined tags like <p>, <h1>, <table> 9
What is XHTML?
▪ XHTML stands for EXtensible HyperText Markup Language. It
is a cross between HTML and XML language.
▪ XHTML is almost identical to HTML but stricter than HTML.
XHTML is HTML defined as an XML application.
▪ XHTML is stricter than HTML in syntax and case sensitivity.
XHTML documents are well-formed and parsed using standard
XML parsers, unlike HTML, which requires a lenient HTML-
specific parser. 10
HTML vs. XHTML
HTML XHTML
1. HTML is an SGML-based language. That is, it
1. XHTML is an XML-based language, which means
defines the standard for generalizing the markup
it manipulates and processes data using XML
languages for documents. SGML stands for
technologies.
Standard Generalized Markup Language.
2. HTML is not a case-sensitive language. 2. XHTML is a case-sensitive language.
3. HTML empty elements do not require a closing 3. XHTML empty elements must always be closed;
tag at the end, not even a "/" symbol to signify the that is, there must be a "/" symbol at the end of the
end of the tag. empty element.
5. The tags and attributes in HTML can be specified
5. All XHTML elements and attributes must be in
either in lowercase or uppercase since it is not
lowercase since it is a case-sensitive language.
case-sensitive.
11
HTML vs. XHTML
HTML XHTML
1. HTML is an SGML-based language. That is, it
1. XHTML is an XML-based language, which means
defines the standard for generalizing the markup
it manipulates and processes data using XML
languages for documents. SGML stands for
technologies.
Standard Generalized Markup Language.
2. HTML is not a case-sensitive language. 2. XHTML is a case-sensitive language.
3. HTML empty elements do not require a closing 3. XHTML empty elements must always be closed;
tag at the end, not even a "/" symbol to signify the that is, there must be a "/" symbol at the end of the
end of the tag. empty element.
5. The tags and attributes in HTML can be specified
5. All XHTML elements and attributes must be in
either in lowercase or uppercase since it is not
lowercase since it is a case-sensitive language.
case-sensitive.
12
HTML vs. XHTML
HTML XHTML
6. An XHTML document must contain the
6. The HTML document requires a minimum of four
<!DOCTYPE> declaration followed by the <html>,
tags to create an HTML page that is <html>,
<head>, <title>, and <body> tags in its document to
<head>, <title>, and <body>. The <!DOCTYPE>
create a webpage. Moreover, the xmlns attribute in
declaration is not necessary for HTML.
<html> tag is also necessary.
7. Some HTML elements may function properly 7. All the XHTML elements must be closed. Even
without a closing tag. the empty elements also require a closing tag.
8. Some elements in HTML may be improperly 8. All XHTML elements, however, must be properly
nested; that is, they do not need to be closed in the nested within each other; that is, they must be
order in which they are opened. closed in the order in which they were opened.
9. It is not mandatory to put quotes while using the 9. It is mandatory to put quotes around an attribute
attributes in HTML. in XHTML.
13
HTML vs. XHTML
HTML XHTML
9. It is not mandatory to put quotes while using the 9. It is mandatory to put quotes around an attribute
attributes in HTML. in XHTML.
10. It allows attribute minimization, where boolean 10. It does not allow attribute minimization. All the
attributes can omit their values. For example, attributes must be written in full attribute-value
"checked". pairs.
11. The webpage is displayed even if the HTML
11. There is a more strict error handling in XHTML.
document has some errors in it.
12. It can have a filename extension of.html 12. Its filename extension can be .xhtml,.xht, or
or.htm. .xml.
14
HTML vs HTML5
HTML HTML5
It didn’t support audio and video without the use It supports audio and video controls with the
of flash player support. use of <audio> and <video> tags.
It uses SQL databases and application cache to
It uses cookies to store temporary data.
store offline data.
Allows JavaScript to run in background. This is
Does not allow JavaScript to run in browser.
possible due to JS Web worker API in HTML5.
Vector graphics is possible in HTML with the
Vector graphics is additionally an integral a part
help of various technologies such as VML, Silver-
of HTML5 like SVG and canvas.
light, Flash, etc.
It does not allow drag and drop effects. It allows drag and drop effects.
15
HTML vs HTML5
HTML HTML5
Not possible to draw shapes like circle, HTML5 allows to draw shapes like circle,
rectangle, triangle etc. rectangle, triangle etc.
It supported by all new browser like Firefox,
It works with all old browsers.
Mozilla, Chrome, Safari, etc.
<HTML>,<Body> , and <Head> tags are These tags can be omitted while writing HTML
mandatory while writing a HTML code. code.
Older version of HTML are less mobile-friendly. HTML5 language is more mobile-friendly.
Doctype declaration is too long and complicated. Doctype declaration is quite simple and easy.
16
HTML vs HTML5
HTML HTML5
New element for web structure like nav, header,
Elements like nav, header were not present.
footer etc.
Character encoding is long and complicated. Character encoding is simple and easy.
It is almost impossible to get true GeoLocation of One can track the GeoLocation of a user easily by
user with the help of browser. using JS GeoLocation API.
It can not handle inaccurate syntax. It is capable of handling inaccurate syntax.
Being an older version , it is not fast , flexible , and It is efficient, flexible and more fast in comparison
efficient as compared to HTML5. to HTML.
Attributes like charset, async and ping are absent in Attributes of charset, async and ping are a part of
HTML. HTML 5. 17
HTML elements modified or removed from HTML5
Element In HTML5
<applet> Changed to <object>
<acronym> Changed to <abbr>
<dir> Changed to <ul>
<frameset> Removed
<frame> Removed
<noframes> Removed
<strike> No new tag. CSS is used for this
<big> No new tag. CSS is used for this
<basefont> No new tag. CSS is used for this
<font> No new tag. CSS is used for this
<center> No new tag. CSS is used for this 18
<tt> No new tag. CSS is used for this
Simple HTML
▪ The <!DOCTYPE html> declaration defines that this
document is an HTML5 document
▪ The <html> element is the root element of an HTML page
▪ The <head> element contains meta information about the
HTML page
▪ The <title> element specifies a title for the HTML page
(which is shown in the browser's title bar or in the page's
tab)
▪ The <body> element defines the document's body and is a
container for all the visible contents, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
▪ The <h1> element defines a large heading
▪ The <p> element defines a paragraph 19
What is an HTML Element?
A start tag, some content, and an end tag define an HTML element :
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
20
Note: Some HTML elements have no content (like the <br> element). These elements are called
empty elements. Empty elements do not have an end tag!
Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents
and display them correctly.
A browser does not display the HTML tags, but uses them to determine how to display the
document:
21
HTML Page Structure
22
The content inside the <body> section will be displayed in a browser. The content inside
the <title> element will be shown in the browser's title bar or in the page's tab.
HTML History
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition 23
2017 W3C Recommendation: HTML5.2
HTML Editors
24
HTML Documents
▪ All HTML documents must start with a
document type declaration:
<!DOCTYPE html>.
▪ The HTML document itself begins with
<html> and ends with </html>.
▪ The visible part of the HTML document
is between <body> and </body>.
25
The HTML Basics
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages
correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case-sensitive.
The <!DOCTYPE> declaration for HTML5 is:
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
26
The HTML Basics
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
HTML Links
HTML links are defined with the <a> tag:
The link's destination is specified in the href attribute.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
27
The HTML Basics
The HTML element is everything from the start tag to the end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
28
The HTML Basics
Nested HTML Elements
HTML elements can be nested (this means that elements can contain other elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (<html>, <body>, <h1> and <p>):
The <html> element is the root element and it defines the whole HTML document.
It has a start tag <html> and an end tag </html>. 29
Then, inside the <html> element there is a <body> element
The HTML Basics
Never Skip the End Tag
Some HTML elements will display correctly, even if you forget the end tag:
30
The HTML Basics
Never Skip the End Tag
Some HTML elements will display correctly, even if you forget the end tag:
However, never rely on
this! Unexpected results
and errors may occur if you
forget the end tag!
Empty HTML Elements
HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element without a closing tag:
31
The HTML Basics
HTML is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML standard does not require lowercase tags, but W3C recommends lowercase in HTML,
and demands lowercase for stricter document types like XHTML.
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:
The HTML Basics
The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the
image to be displayed:
There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another website.
Example: src="https://www.w3schools.com/images/img_girl.jpg".
Notes: External images might be under copyright. If you do not get permission to use it, you may
be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be
removed or changed.
2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not
include the domain name. If the URL begins without a slash, it will be relative to the current page.
Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain.
Example: src="/images/img_girl.jpg".
Tip: It is almost always best to use relative URLs. They will not break if you change domain.
The HTML Basics
The width and height Attributes
The <img> tag should also contain the width and height attributes, which specify the width and height
of the image (in pixels):
The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for
some reason cannot be displayed. This can be due to a slow connection, or an error in
the src attribute, or if the user uses a screen reader.
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more.
The HTML Basics
The lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the language of the Web
page. This is meant to assist search engines and browsers.
Country codes can also be added to the language code in
the lang attribute. So, the first two characters define the
language of the HTML page, and the last two characters
define the country.
The HTML Basics
Single or Double Quotes?
Double quotes around attribute values are the most common in HTML, but single quotes can also be
used. In some situations, when the attribute value itself contains double quotes, it is necessary to
use single quotes:
or
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
The HTML Basics
HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.
The HTML Style Attribute
Setting the style of an HTML element, can be done with
the style attribute.
The HTML style attribute has the following syntax:
The property is a CSS property. The value is a CSS
value.
HTML More
▪ Formatting ▪ Tables ▪ Computer Codes
▪ Quotations ▪ List ▪ Semantics
▪ Comments ▪ Block & inline ▪ Style Guide
▪ Colors ▪ Classes ▪ Entities
▪ CSS ▪ Id ▪ Symbols
▪ Links ▪ File Paths ▪ Emojis
▪ Images ▪ Head ▪ Charset
▪ Favicon ▪ Layout ▪ URL Encode
▪ Page Titles ▪ Responsive 38
HTML5
39
References
▪ https://www.w3schools.com/html/
▪ https://www.geeksforgeeks.org/html/
▪ https://www.britannica.com/technology/markup-language
▪ https://www.semrush.com/blog/markup-language/
▪ https://www.javatpoint.com/what-is-xhtml
▪ https://www.scaler.com/topics/difference-between-html-and-
xhtml/
40
