HTML
HTML (HyperText Markup Language) is the most basic building block of the Web.
It defines the meaning and structure of web content. Other technologies besides HTML are generally used
to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).
Components of HTML
HTML has three main components:
Elements: Elements are at the core of HTML. They are used to describe every piece of text on an
html page. Elements are made up of tags, and an element may have either a start and end tag, or
just a start tag.
1. Attributes: Provide additional information about an instance of an element. Elements in HTML
have attributes; these are additional values that configure the elements or adjust their behavior in
various ways to meet the criteria the users want.
Example: <tag attribute="value" attribute="value">, <img src="[Link]" alt="A cute dog">
Entities: Represent non-ASCII text characters such as copyright symbols.
Every bit of HTML markup that are used to describe a Web page's content includes some combination of
elements, attributes, and entities.
Basic Document Structure
Every HTML page must have the same basic document structure that includes
1. Doctype declaration: A statement that identifies the document as an HTML document. Every HTML
document must begin with a <!DOCTYPE> declaration that specifies which version of HTML will
be used to create the document. The declaration is not an HTML tag. It is an "information" to the
browser about what document type to expect. In HTML5, the declaration is simple: <!DOCTYPE
html>
2. Specification of HTML Page: After the specification of version of HTML, an <html> element must
be created to hold all the other content markup in the page:
<!DOCTYPE html>
<html>
</html>
3. A document header:
The HTML header is a crucial component of any web page, as it provides essential information about the
document and plays a pivotal role in structuring and organizing web content.
In web development, the HTML header is not the visible top portion of a web page but rather a container
for metadata and other essential information. It is enclosed within the <head> element, placed before the
web page's content, typically inside the <html> tag. The HTML header contains various elements and
meta-information vital for web browsers and search engines.
<!DOCTYPE html>
<html>
<head>
</head>
</html>
Key elements found in the html header include:
Document title
Every HTML page needs a descriptive title that helps a visitor understand at a glance why the
page exists in the first place. The page title should be concise, yet informative. Title of a page
is defined using <title> element inside the <head> element. Most browsers display the page
title as in the browser window’s title bar.
<head>
<title>My First Web Page</title>
</head>
</html>
Meta Tags
The meta information tags are used to identify the page's author, keywords and other
information used for searching, or a brief description to appear in search results. The tag can
also be used to give commands to the browser. Common meta tags include the following
Character Encoding (<meta charset="">)
The character encoding declaration ensures that the web browser interprets the text correctly.
Common character encodings include UTF-8, which supports various characters and
symbols.
<meta charset="utf-8">
Viewport Settings (<meta name="viewport">)
It is essential for responsive web design. It allows developers to control how the web page is
displayed on various devices, adjusting the viewport width and initial zoom level.
<meta name="viewport" content="width=device-width, initial-scale=1">
Metadata
There are three metadata tags that work to help improve the chances of the web pages to be
found by a search engine. The tags are:
I. Keywords: Keywords are words that people might use to search for Web page,
or synonyms for words that appear in document.
II. Description: This is usually a paragraph of information about the page.
III. Author: The name of the page author can be included here.
Meta information for search engines comes in pairs: name and contents. For example:
<head>
<title>IAC</title>
<meta name="keywords" contents="MISLM, University of Dhaka, Faculty of Arts" />
<meta name="description" contents=" MISLM-504 has been designed for active learning
of web design." />
<meta name="author" contents="MISLM students" />
</head>
Links to Stylesheets (<link>)
Web pages often reference external CSS (Cascading Style Sheets) files using the <link> element.
This allows developers to separate the page's content from its presentation and maintain
consistent styles across multiple pages.
<link href="my_style.css" rel="stylesheet">
Scripts (<script>)
JavaScript code can be included in the HTML header using the <script> element. These scripts
add interactivity and dynamic functionality to the web page.
4. Body of the document
The <body> element holds every bit of content and markup not defined in the header. The content
that is to be shown in the browser window put it in the <body> element.
<html >
<head>
<title>My First Web Page</title>
</head>
<body>
<p>This is my First Content</p>
</body>
</html>
