HTML is written in tags in this form "< tagName> ". HTML tags are either container tags or empty tags. Empty tags are written like this "<emptyTagName />" followed by its content. Container tags are written like this "<containerTagName> content to be written here </containerTagName>". HTML has many advancements since its first release on 1991 by Tim Berners-Lee, it is now known as HTML5 by the w3c "World Wide Web Consortium" the organization that responsible for the web standardization.
HTML tags are classified into many classification rather than being empty or container tags, there is also block level and inline level tags. Block level which handles text as a block of lines making room before and after, for example the <p> tag which is a container tag, refers to a paragraph, and it is a block level element or tag "tags can be also called elements", being a block level element means that it will put a break "empty line" before and after the block of text it represents. Inline elements will not do that, it will represent its contents side by side in a single queue, no breaks before or after.
All of those features of HTML elements can incredibly be changed using CSS which is the tool responsible for formatting content as HTML is the tool responsible for putting content on a page.
That was a brief introduction about HTML elements.
Now we are going to talk about some HTML elements, so let's go...! :-)
<div>
"Block level element", "container element" refers to a "division" you can combine multiple elements to be its content to apply massive formatting issues, like background, border, special formatting or just simple to separate contents.
syntax :
<div> content of the tag element or any other tags </div>
output :
. .......................................................................... Line break before
content of the tag element or any or any other tags
. .......................................................................... Line break after
description form Mozilla developer network:
The Document Division (<div>) HTML element is generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element (such as <article> or <nav>) is appropriate. Read More
----------------------------------------
<blockquote> "Block leve elemet", "container element" refers to a special quotation to be represented.
syntax :
<blockquote> content of the tag element or any other tags </blockquote>
output :
. .......................................................................... Line break before
content of the tag element or any or any other tags Observe the identation
. .......................................................................... Line break after
description form Mozilla developer network:
The HTML Block Quotation (<blockquote>) element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation . A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.Read More
----------------------------------------
<p> "Block leve elemet", "container element" refers to a paragraph.
syntax :
<p> content of the tag element or any other tags </p>
output :
. .................................................................. Line break before
content of the tag element or any or any other tags
................................................................... Line break after
description form Mozilla developer network:
Paragraph element (<p>) represents a paragraph. Read More
----------------------------------------
<ol>
"Block level element", "container element" to introduce ordered list items, it has an extended element "<li>" or list item.
syntax :
<ol>
<li> list item no. one </li>
<li> list item no. two </li>
<li>....etc.................</li>
</ol>
output :
. .................................. Line break before
1. list item no. one Observe the identation
2. list item no. two Observe numbers
3. ....etc................
. ................................... Line break after
description form Mozilla developer network:
The HTML ordered list element (<ol>) represents an ordered list of items. Typically, ordered-list items are displayed with a preceding numbering, which can be of any form, like numerals, letters or Romans numerals or even simple bullets. This numbered style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property. Read More
"Block level element", "container element" to introduce ordered list items, it has an extended element "<li>" or list item.
syntax :
<ol>
<li> list item no. one </li>
<li> list item no. two </li>
<li>....etc.................</li>
</ol>
output :
. .................................. Line break before
1. list item no. one Observe the identation
2. list item no. two Observe numbers
3. ....etc................
. ................................... Line break after
description form Mozilla developer network:
The HTML ordered list element (<ol>) represents an ordered list of items. Typically, ordered-list items are displayed with a preceding numbering, which can be of any form, like numerals, letters or Romans numerals or even simple bullets. This numbered style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property. Read More
----------------------------------------
<ul> "Block level element", "container element" to introduce unordered list items, it has an extended element "<li>" or list item.
syntax :
<ol>
<li> list item no. one </li>
<li> list item no. two </li>
<li>....etc.................</li>
</ol>
output :
. .................................. Line break before
■ list item no. one Observe the identation
■ list item no. two Observe the squares
■ ....etc................
. ................................... Line break after
description form Mozilla developer network:
The HTML unordered list element (<ul>) represents an unordered list of items, namely a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle or a squared. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property. Read More
----------------------------------------
<li> "container element" to introduce list items, it is a required element for both "<ol>" and "<ul>" elements. Please revise both <ol> and <ul> elements above.
syntax :
Please, revise the syntax of both <ol> and <ul> elements please .
output :
Please, revise the output of both <ol> and <ul> elements please .
description form Mozilla developer network:
The HTML List item element (<li>) is used to represent a list item. It should be contained in an ordered list (<ol>), an unordered list (<ul>) or a menu (<menu>), where it represents a single entity in that list. In menus and unordered lists, list items are ordinarily displayed using bullet points. In order lists, they are usually displayed with some ascending counter on the left such as a number or letter. Read More
----------------------------------------
<nav> "Block level element", "container element" specifying a section for navigation elements, it is very descriptive more than programmatic element.
syntax :
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
output :
------------------------------------------ Line break before
● Home indentation is because of using <ul> element
● About waiting for CSS formatting issue
● Contact
------------------------------------------ Line break after
description form Mozilla developer network:
The HTML Navigation Element (<nav>) represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Read More
----------------------------------------
<menu> "Block level element", "container element", it is an equivalent to <ul> element.
syntax :
<menu type="toolbar">
<li>
<menu label="File">
<button type="button" onclick="void(),">New...</button>
<button type="button" onclick="void(),">Save...</button>
</menu>
</li>
<li>
<menu label="Edit">
<button type="button" onclick="void(),">Cut...</button>
<button type="button" onclick="void(),">Copy...</button>
<button type="button" onclick="void(),">Paste...</button>
</menu>
</li>
</menu>
output :
The HTML menu element (<menu>) represents an unordered list of menu choices, or commands. There is no limitation to the depth and nesting of lists defined with the <menu>, <ol> and <ul> elements. Read More
----------------------------------------
<span> "inline level element", "container element" same as <div> element except for being "inline not block level element".
syntax :
text before <span>
content of the tag element or any other tags
</span> text after
output :
text before content of the tag element or any other tags text after
description form Mozilla developer network:
This HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element. Read More
----------------------------------------
<time> "inline level element", "container element" to represent time.
syntax :
This Text was created on
<time>
30-08-2012
</time>.text after
output :
This Text was created on 30-08-2012. text after
description form Mozilla developer network:
The HTML time element (<time>) represents either time on a 24-hour clock or a precise date in the Gregorian calendar (with optional time and timezone information). This element is intended to be used presenting dates and times in a machine readable format. This can be helpful for user agents to offer any event scheduling for user's calendar. Read More
----------------------------------------
<q> "inline level element", "container element" to represent short quotation.
syntax :
text before <q>
some text as a quotation
</q> text after
output :
text before some text as a quotation text after
description form Mozilla developer network:
The quote element indicates that the enclosed text is a short inline quotation. Read More
----------------------------------------
<img> "empty tag" to place an image.
syntax :
<img src="imagelocation\imageName.ext" />
output :
description form Mozilla developer network:
The HTML Image Element (<img>) represents an image to the document. Read More
No comments:
Post a Comment