HTML "
Hyper Text Markup Language" is a markup language, it is a descriptive language more than being a programming language. It is used side by side with CSS "
Cascading Style Sheets" to design web pages, there is also some other techniques like JavaScript, PHP, and ASP and more.
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
----------------------------------------
<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 :
description form Mozilla developer network:
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 line break before or after, indentation.
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 line break before or after, indentation.
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 line break before or after, indentation.
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
