Tutorials

KodeKite Tools

HTML
Flexbox
SVG
Canvas
HTML Tutorial

More


HTML Head Element
Head Element

HTML head element contains metadata (data about data). Metadata is data about HTML document and it is not displayed in browser. There are many metadata elements that are used in head element. The elements like <title>, <style>, <script>, <link>, <meta>, <base> are known as metadata elements.

Title in Head

Title element is a metadata element and it is used to assign or give ttile to HTML page. title is displayed in top left of browser tab.

Syntax

<head>
<title>Content</title>
</head>


You can use title element as tooltip within any element and any where in HTML document.


Example

Title is in Head Element


Title element is a pair tag and output of title element is title of page like you can see in above example.

Style in Head

Style elment is a metadata element and it is used to apply styles to HTML page.

Syntax

<head>
<style>CSS styles</style>
</head>


You can use style element as inline css within any element and any where in HTML document.


Example

Style is in head element


Style element is a pair tag and output of style element is css styles like you can see in above example.

Script in Head

Script elment is a metadata element and it is used to insert javascript in HTML page.

Syntax

<head>
<script>javascript code</script>
</head>


You can use script element for external javascript file any where within HTML document.


Example

Paragraph


Script element is a pair tag and output of script element is javascript like you can see in above example.

Link in Head

Link elment is a metadata element and it is used to insert css as external file or it insert other links in HTML page.

Syntax

<head>
<link rel=Any relation type=Any type href=URL for file link>
</head>


You can use link element to insert external css file or any other content any where within HTML document.


Example

Here Link is used for inserting external css file


Link element is a pair tag and output of link element can be any file or icon etc like you can see in above example.

Meta in Head

Meta elment is a metadata element and it is used to insert information about page, auther, content or it can used for refresh page after some interval of time.

Syntax

<head>
<meta charset=Any characters name=Any name content=information about name>
</head>


You can use meta element to SEO of your website or its content any where within HTML document.


Example

Here meta is used for inserting character set


Meta element is a pair tag and output of link element is information about web pagess like you can see in above example.

Base in Head

Base elment is a metadata element and it is used to specifies default URL and default target in HTML page.

Syntax

<head>
<base href=URL/address target=Location>
</head>


You can use base element to specify URL or address of page within HTML document.


Example

Base is used in head

KodeKite

Base element is a pair tag and output of base element is default URL and default target, if URL and target are not defined in HTML page then both base URL and target will be executed like you can see in above example.


Practice Task

Open notepad or any other text editor, follow the following points.


  • define div html element
  • Use style element in head
  • Give width and height of 200px and 100px to element respectivelly
  • Apply background color purple

save file with name task.html or task.htm and then open it using any browser and see results.


Solution


Don't forget some metadata elements are non empty and some are empty elements which means non empty always come in pair and empty come in single.