HTML Document Structure
Lecture 3
1. What is the HTML?
Documents on the web are generally coded in a markup language called
Hypertext Markup Language (HTML). HTML is used to describe the structure of a
document and links in a hypertext document. HTML adds tags that identify elements
in a document such as headings, subheadings, paragraphs, and appendices. The
HTML codes embedded in the document text explicitly describe the text, providing
information to the web client about how to interpret it. The primary focus of HTML
is the content of the document, not its appearance. It is a language for describing
structured documents.
HTML stands for Hyper Text Markup Language. Its makes parts of a
document into links to other documents.
1
HTML describes the content of Web pages using markup represented by tags.
HTML is the markup language for creating Web pages.
2. HTML Tags and Attributes
HTML Tags
HTML Tags are used to mark up the start and the end of HTML element and
are usually surround content and apply meaning to it. Each tag consists of an
opening angled bracket (<) and a closing bracket (>). They are normally come in
2
pairs like <head> and </head> and Nothing within the brackets will be displayed
in the browser. The tag name is generally abbreviation to the tag function.
Example: <h1> …….. </h1>.
HTML Attributes
Tags may have attributes which contain additional pieces of information. It
generally provides additional styling (attribute) to the element. Attributes appear
inside the opening tag and their values sit inside quotation marks.
Example: <img src="myimage.jpg"> …..</img>
In this example, the image source (src) is the attribute name and the "myimage.jpg"
is attribute value "of the <img> tag.
HTML Elements
Tags mark the beginning and end of an element. Elements are the bits that
make up web pages. They consist of some kind of structure or expression.
Example: <b> This is the content.</b>
Where, <b> is the starting tag and </b> is the ending tag.
3
The table below provides a brief comparison of tags, attributes and elements.
HTML TAGS HTML ELEMENTS HTML ATTRIBUTES
HTML attributes are used to
HTML tags are used to hold HTML element holds the
describe the characteristic of an
the HTML element. content.
HTML element in detail.
Whatever written within a
HTML tag starts with < and HTML attributes are found only
HTML tag are HTML
ends with > in the starting tag.
elements.
HTML tags are almost like HTML attributes specify various
HTML elements specifies
keywords where every single additional properties to the
the general content.
tag has unique meaning. existing HTML element.
3. HTML document structure
HTML document contains the text (the content of the page) with embedded tags, which provide
instruction, appearance and function of the content. The HTML document is divided into two
major portions: the head and the body.
The head contains information about the document such as the title and "meta" information
describing the content.
The body contains the actual contents of the document (the parts that is displayed in the
browser window).
The following examples show the tags that make up the standard structure of an HTML document:
4
1 < ! DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”> 4
3
<title>title here </title> 5
2
</head>
<body>
Page content here
6
<body>
</html>
1- It is a document type declaration (also called DOCTYPE declaration) that identifies this
document as an HTML document.
2- The <html> element is called the root element of an HTML page because it contains all the
elements in the document. Within the html element, the document is divided into a head and a
body.
3- The <head > element: The head element contains descriptive information about the document
itself, such as its title, the style sheet(s) it uses, scripts, and other types of “meta” information
4- The meta elements within the head element provide information about the document itself but
no information that will be displayed on the page itself. A meta element can be used to provide
all sorts of information, but in this case, it specifies the character encoding (the standardized
collection of letters, numbers, and symbols) used in the document
5- The <title> element also in the head element, which tells the browser what to display in
its title bar (the title bar is the very top part of the browser window—the part with the
minimize, maximize, and close buttons)
5
6- The <body> element contains the visible page content also body element contains almost
everything that you see on the screen: headings, paragraphs, images, any navigation that’s
required, and footers that sit at the bottom of the web page
Example1
< ! DOCTYPE html>
<Html>
<Head>
<Title>The first example </Title>
</Head>
<Body>
Welcome to HTML
</Body>
</Html>
The purpose of a web browser is to read HTML documents and display them. The browser does
not display the HTML tags, but uses them to determine how to display the document:
Example2: A head section that includes metadata
<head>
<title>San Joaquin Valley Town Hall |
speakers and luncheons
</title>
<meta charset="utf-8">
<meta name="description" content="A yearly lecture
series with speakers that present new
information on a wide range of subjects">
<meta name="keywords" content="san joaquin,
town hall, speakers, lectures, luncheons">
6
</head>
4. HTML Headings
Use the heading tags to show the structure and importance of the content on a
page. Always use the h1 tag to identify the most important information on the
page, and only code a single h1 tag on each page. Then, decrease one level at a
time to show subsequent levels of importance.
Note: Don’t use heading levels as a way to size text. Instead, use CSS to size the
headings.
The tags of heading and paragraph are:
h1
h2
h3
h4
h5
h6
7
Example3: if we write the same program as below
<Html>
<Head>
<Title>The second example</Title>
</Head>
<Body>
<h1>Welcome to HTML</h1>
</Body>
</Html>
Then the output will be
In this example the <h1> tag representing heading element within the body element. The
opening <h1> and closing </h1> tags are wrapped around the words “Welcome to HTML”
making that the main heading for the page.
Example4: if we add another element <p> such as
<Html>
<Head>
<Title>The third example</Title>
</Head>
<Body>
<h1>Welcome to HTML</h1>
<p>Welcome to HTML<p>
</Body>
</Html>
The output will be
8
In the example4 above, we use an h1 element to show a major heading. If we wanted to include a
subheading beneath this heading, we’d use the h2 element. A subheading under an h2 would use
an h3 element, and so on, until we hit h6. The lower the heading level, the lesser its importance
and the smaller the font size: h1 h2 h3 h4 h5 h6
Example 4
<html>
<title> This is heading Hierarchal example </title>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
9
5. HTML Paragraphs
Paragraph Tag: The <p> element defines a paragraph. It uses to deal with
blocks of text in the web site document.
Example5:
< !DOCTYPE html>
<Html>
<Head>
<Title> Paragraph Example </Title>
</Head>
<Body>
<h1>Welcome to HTML</h1>
<p> Paragraph Tag use to deal with blocks of text in web site document</p>
</Body>
</Html>
10
Line Break Tag: <br> element is used to start a new line rather than a new
paragraph. The <br> tag is an empty tag which means that it has no end tag.
Example 6:
< !DOCTYPE html>
<html>
<head>
<title> Web Page </title>
</head>
<body>
<h1>The Most Basic Web Page </h1>
<p>This is a very simple web page to get you started. <br> Hopefully you will get
to see how the markup relates to the end result, <br> and that you can see on
screen. </p>
<p> This is another paragraph, by the way. Just to show how it works .</p>
</body>
</html>
11
If Rewrite Example 6 without using line break the output will be:
Horizontal Rules Tag: The <hr> tag defines a thematic break in an HTML page,
and is most often displayed as a horizontal rule. The <hr> element is used to separate
content or define a change in an HTML page. The <hr> tag is also an empty tag,
which means that it has no end tag.
Example 7: Design a web page with three paragraphs separated by horizontal rule
<!DOCTYPE html>
<html>
<head>
<title> Web Page </title>
</head>
<body>
<h2>The Main Languages of the Web</h2>
<p>HTML is the standard markup language for creating Web pages. </p>
<hr>
<p>CSS is a language that describes how HTML elements are displayed on screen.
</p>
<hr>
<p>JavaScript is the programming language of HTML and the Web.</p>
</body>
</html>
12
Comment Tag: comments can be added to HTML source by using the following
syntax: <!-- Write comments here -->
Anything between comment tags will not display in the browser and will not have
any effect on the rest of the source. Comments are perfect for making notes on the
written work and are useful for labeling and organizing long documents, particularly
when document are shared by a team of developers. An example of a comment:
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
What is the output of this segment HTML code????
13
6. HTML character Entities
An HTML entity is a piece of text that begins with an ampersand (&) and ends with
a semicolon (;). Entities are frequently used to display reserved characters which
would otherwise be interpreted as HTML code. Entity can also use in place of other
characters that are difficult to type with a standard keyboard.
Table below provide some examples of HTML entities:
Result Description Entity Name
< less than <
> greater than >
& ampersand &
" double quotation mark "
' single quotation mark '
¢ cent ¢
© copyright ©
® registered trademark ®
14
Example 8:
<!DOCTYPE html>
<html>
<head>
<title> HTML character Entities </title>
</head>
<body>
<h1> Topics in Computer Science </h1>
<h3> Series Editors </h3>
<h4>Ian Nielson & Steven Breitman </h4>
<p>Topics in Computer Science delivers high quality content for undergraduates
studying in all areas of computing science.<br>From core foundational and
theoretical material to final year topics and
applications, UTiCS books take a fresh and modern approach. </p>
<p> Second Edition © Springer International Publishing. </p>
</body>
</html>
15
Q/ What is the output of the following HTML code?
<!DOCTYPE html>
<html>
<head>
<title> This is HTML page </title>
</head>
<body>
<!—there are two heading separated by horizontal lines -->
<h1> Software Competition </h1>
<hr>
<h2> Announcement </h2>
<hr>
<!-- This is an ad required -->
<p> This is an ad about a competition to design a site that includes simple
elementary education classes. <br> The site includes the following lessons:
<br>Arabic characters
<br>English characters
<br>Numbers in Arabic
<br>Numbers in English
</p>
<!--The end of required -->
<p> The last date to submit the design is the end of the this month </p>
</body>
</html>
16
