Chapter 6
HTML TAGS
Title and Contents
• Head Tag Elements
HTML HEAD
• the <head> element is a container for metadata (data about
data) and is placed between the <html> tag and the <body>
tag.
• HTML metadata is data about the HTML document. Metadata
is not displayed.
• Metadata typically define the document title, character set,
styles, scripts, and other meta information.
• The following tags describe metadata: <title> , <style> ,
<meta> , <link> and <script>.
THE HTML <TITLE> ELEMENT
• The <title> element defines the title of the document, and is
required in all HTML documents.
• The <title> element:
• defines a title in the browser tab
• displays a title for the page in search engine results
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>
THE HTML <STYLE> ELEMENT
• The <style> element is used to define style information for a
single HTML page:
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
THE HTML <LINK> ELEMENT
• The <link> element is used to link to external style sheets:
<link rel="stylesheet" href="mystyle.css">
THE HTML <META> ELEMENT
• Meta tags provide information about the webpage in the
HTML document. This information is called "metadata" and
while it is not displayed on the page itself, it can be read by
search engines.
• Search engines such as Google use metadata from meta tags
to understand additional information about the webpage.
They can use this information for ranking purposes, to display
snippets in search results.
THE HTML <META> ELEMENT
• The <meta> element is used to specify which character set is
used, page description, keywords, author, and other
metadata.
• Define the character set used:
<meta charset="UTF-8">
THE HTML <META> ELEMENT
• Define a description of your web page:
<meta name="description" content="Free Web tutorials">
• Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
THE HTML <META> ELEMENT
• Define the author of a page:
<meta name="author" content=“Ahmad">
• Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
EXAMPLE
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
THE HTML <SCRIPT> ELEMENT
• The <script> element is used to define client-side JavaScripts.
• The following JavaScript writes "Hello JavaScript!" into an HTML
element with id="demo":
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
THE HTML <BASE> ELEMENT
• The <base> element specifies the base URL and/or target for
all relative URLs in a page.
• There can only be one single <base> element in a document!
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Rana</title>
<base target="_blank">
</head>
<body>
<a href="ol2.html">Second Page</a>
</body>
</html>
THANK YOU.
Any Questions?
