Introduction to HTML &
Its Tags
Page Layout, HTML Structure, Creating HTML Document,Intro to HTML,
Tags, Headings-Paragraphs, Line Breaks
Dr. M. Biken
Principles in Designing Websites
Basic Page Layout
Intro to HTML
➢ HTML stands for HyperText Markup Language
➢ It is the standard language used to create and structure web pages
➢ HTML defines the layout and organization of web content
➢ A web page is built using a series of HTML elements (tags)
➢ These elements instruct the browser on how to display text, images, and
other content
HTML Documents/Basic HTML Structure
<!DOCTYPE html> tells browser that this document is using HTML5 (every
HTML document begins with a doctype declaration)
<html> root element of an HTML page (HTML structure is
enclosed between <html> and </html> tags)
<head> contains meta data about the HTML page
< > …….. </ >
</head>
<body> all the visible content on the HTML page such as
headings, paragraphs, images, hyperlinks, lists, etc.
< > …….. </ >
</body>
</html>
HTML Elements and Tags
➢ HTML element is defined by a start tag, some content, and an end tag
➢ A container for some content or other HTML tags
➢ HTML element: <tagname> Content goes here... </tagname>
➢ < > (Opening tag)
➢ </ > (Closing tag)
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax
Important Points
➢ <html> tag is the root (or parent) tag that contains both the <head> and the
<body> sections of an HTML document
➢ Most HTML elements use an opening tag and a closing tag — with content
placed in between
➢ Empty elements are self-contained and do not require a closing tag
➢ HTML is not case sensitive
➢ <html> = <HTML>
➢ <head> = <HEAD>
➢ <body> = <BODY>
➢ <p> = <P>
Comments in HTML
This is a part of HTML document that is not parse by the browsers
<!-- Defines HTML Comment -->
HTML Attributes
➢ Attributes provide additional information about an element’s behavior or
appearance
➢ All HTML elements can include attributes to enhance their functionality
➢ They are always placed within the opening tag of an element
➢ Attributes are typically written as name/value pairs
➢ Structure: <tagname attribute_name="value"> Content </tagname>
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax
Title Tag
➢ Define a title for the HTML document
➢ The title must be text-only, and it is shown in the browser's title bar or in the
page's tab.
➢ must appear within the <head> section of the document
➢ Used by search engines (SEO) to identify page content
➢ Used as the default name when bookmarking the page
➢ Required for HTML document validation
➢ <title> title… </title>
Heading Tags
➢ Defines and displays headings within an HTML document
➢ <h#> heading contents… </h#>
➢ # = {1 to 6}
(Most important)
(Least important)
Paragraph Tags
➢ HTML paragraphs are defined with the <p> tag:
➢ <p> This is a paragraph</p>
Empty Tags
➢ HTML elements with no content are called empty elements
➢ E.g., <br>, <hr>
Anchor Tags
➢ HTML links are defined with the <a> tag:
➢ <a href="https://www.google.com">This is a link to Google</a>
HTML Image Tags
➢ HTML images are defined with the <img> tag.
➢ <img src=“google.png" alt=“google.com" width=“200" height=“100">
HTML Link Tags
➢ <link> tag specifies the relationship between the current document and an
external resource
➢ <link> tag is most often used to link to external style sheets or to add a favicon
to your website.
➢ <link rel="" href="" type="">
