Elements
They are the building block of an html document. The browser interprets the html documents on the basis of the element types that are added in the document.
the structure of html elements consist of an opening tag, closing tag and the content present within them.
ex:
<p> This is an example of element </p>
here, <p> is the starting tag.
</p> is the closing tag.
and This is an example of element is content.
HTML Types
Base Element
They are the building block of an html document. The browser interprets the html documents on the basis of the element types that are added in the document.
the structure of html elements consist of an opening tag, closing tag and the content present within them.
ex:
<p> This is an example of element </p>
here, <p> is the starting tag.
</p> is the closing tag.
and This is an example of element is content.
HTML Types
- Root
- Metadata
- Section
- Heading
- Flow
- Phrasing
- Embedded
- Interactive
Root Element
It represents the starting element.
HTML element is the root element which comes after the <!Doctype>.
This elements tells the browser that the document type is html.
Metadata element
this element is used to the presentation or behavior of the content of the document. It can also be used to set a relationship of document with other documents.
Different Metadata elements are
- Title
- Base
- Link
- Command
- Meta
- NoScript
- Script
- Style
Title
it contains the title of the html document, which appears in the url of the browser.
place the title element in the head section.
Attributes of Title element
- class: class of an element in html document.
- id: specifies a unique alphanumeric identifier for an element in the document
- lang: specifies language used by an element
- style: specifies an inline style to render an element in the document.
ex:
<!Doctype Html>
<html>
<head>
<title>
htmltitle
</title>
</head>
<body>
Html title element
</body>
</html>
 |
| Title |
Base Element
it is used to specify a default url and target for all the links in an html document.This elements will be added in the head section at the first place. This helps other elements in the head section to use the information of the head section.
Attributes of Base element
- href: specifies a url in an html document
- target: specifies the location where the links of an html document will open.target values are
- _blank - opens the link in new window
- _parent - opens the link in the same frame the link is clicked.
- _self - opens the link in the present frameset.
- _top - opens the link in the samewindow.
- <framename>- opens the link in the respective frame.
ex:
<!Doctype html>
<html>
<head>
<base href="url" target="value" />
</head>
</html>
Link Element
It is used to link an html document with other html document. it also defines the relationship between the html documents.
it contains the href attribute to specify the destination url of the link and the rel attribute which defines the relationship of the linked documents.
Attributes of Link element
- href: specifies the target url.
- hreflang: defines the base language of the target url.
- media: specifies the device on which html document will be displayed.
- rel: specifies the relationship between the html document.
- sizes: defines the size of the link html document.
- types: specifies the multipurpose internet mail extensions (MIME) type of the target url.The MIME type decides which type of language rules are to be followed in an html page like Javascript or CSS.
ex:
<!Doctype html>
<html>
<head>
<Link href="linkpage.html" rel="stylesheet"/>
</head>
</html>
Meta Element
It is used to provide information about html document, such as page description and keywords.
this element is present inside the head element.
Attributes of Meta element
- charset: defines the character encoding for the document.
- contents: defines the content of meta data.
- http-equiv: provides information of the content attribute to to an http header.
- name: provides the content of the contents attribute.
ex:
<!Doctype html>
<html>
<head>
<Meta name="keyword" contents="some content" />
</head>
</html>
Command element
This is used to execute a command when an event is fired by a form control,like radio button or checkbox. it can be used with the context menu or toolbar
Attributes of Command Element
- type: specifies the type of command
- label: name of the command that is to be displayed on an html page.
- icon: specifies the location of the page that is to be displayed as the icon of an html page.
- disabled: specifies a value that indicates command is disabled or not.
- checked: specifies a value that indicates whether a command is selected or not.
- radiogroup: specifies a string that represents the name of the group of commands whose type attribute has radio as its value.
- title: specifies the title of the command.
<Menu label="world">
<command type="radio" radiogroup="gender" label="male">
<command type="radio" radiogroup="gender" label="female">
</Menu>
NoScript Element
It is used to display content on the web browser that does not support javascript or javascript is disabled.
ex:
<script type="text/javascript">
document.write("html is good")
</script>
<noscript>
Javascript is disabled or not supported by the browser
</noscript>
Script Element
It is used to declare a script, such as javascript. it can be used for validation purpose and manipulating content and many other uses.
Attributed of Script element
- async: specifies whether the script should be executed asynchronously or not.
- type: specifies the mime type of script.
- charset: specifies the character encoding used in the script.
- defer: specifies whether or not the browser can continue parsing the html document.
- src: specifies the url of a file that contains the script.
ex:
<script type="text/javascript">
document.write("html is good")
</script>
Style element
It is used to declare the style sheets within the html document. this element defines how the html element are rendered in the browser.
Attributes of style
- type: specifies the type of content, such as simple text or style sheet in an html document.
- media: specifies the destination media where the style is applied.
- scoped: specifies the style elements, that is the parent element and its child element.
ex:
<head>
<style type="text/css">
style code here
</style>
</head>
Posts
0 comments:
Post a Comment