HTML
What is HTML?
• 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
• An HTML element is defined by a start tag, some
content, and an end tag.
<tagname>Content goes here...</tagname>
• Examples: <h1>My First Heading</h1>
<p>My first paragraph.</p>
• Some HTML elements have no content (like the <br>
element). These elements are called empty elements.
Empty elements do not have an end tag!
HTML Tags
• It is the container for some content or other tags.
<p>My first paragraph.</p>
• <p>,</p> are the tags.
• <p> is the opening tag.
• </p> is the closing tag.
• “My first paragraph.” is the content.
• The combinations of opening tag, closing tag and
the content forms the element.
Hello World
• Create a file with .html
• .html is the extension.
• Example: <p> Hello World </p>
<h1> This is HTML page </h1>
Paragraph Element
• <p> is the paragraph element.
• A paragraph always starts on a new line, and
browsers automatically add some white space
before and after a paragraph.
• <p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
<b>My Bonnie lies over the ocean.</b>
Oh, bring back my Bonnie to me.
</p>
Paragraph Element cont...
• With HTML, you cannot change the display by adding extra
spaces or extra lines in your HTML code.
• The browser will automatically remove any extra spaces
and lines when the page is displayed:
• <p> <p>
This paragraph
contains a lot of lines This paragraph
in the source code, contains a lot
but the browser of spaces
ignores it. in the
</p> source code,
but the browser
ignores it.
</p>
Heading Element
• The <h1> to <h6> tags are used to define HTML
headings.
• <h1> defines the most important
heading. <h6> defines the least important heading.
• <h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
• Only use one <h1> per page - this should represent the
main heading/subject for the whole page.
Heading Element cont...
• Headings are titles or subtitles that you want
to display on a webpage.
• Use HTML headings for headings only. Don't
use headings to make text BIG or bold.
Practice Qs
Practice Qs cont...
Practice Qs cont...
Practice Qs cont...
Boilerplate code
• It is the standard format or skeleton of writing HTML code.
• <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Boilerplate code cont...
• 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
