HTML Description List or Definition List displays elements in definition form like in dictionary. The <dl>, <dt> and <dd> tags are used to define description list.
The 3 HTML description list tags are given below:
<dl> tag defines the description list.
<dt> tag defines data term.
<dd> tag defines data definition (description).
<dl> <dt>HTML</dt> <dd>is a markup language</dd> <dt>Java</dt> <dd>is a programming language and platform</dd> <dt>JavaScript</dt> <dd>is a scripting language</dd> <dt>SQL</dt> <dd>is a query language</dd> </dl>
Output:HTMLis a markup languageJavais a programming language and platformJavaScriptis a scripting languageSQLis a query language
HTML Unordered List or Bulleted List displays elements in bulleted format . We can use unordered list where we do not need to display items in any particular order. The HTML ul tag is used for the unordered list. There can be 4 types of bulleted list:
disc
circle
square
none
To represent different ordered lists, there are 4 types of attributes in <ul> tag.
Type
Description
Type “disc”
This is the default style. In this style, the list items are marked with bullets.
Type “circle”
In this style, the list items are marked with circles.
Type “square”
In this style, the list items are marked with squares.
Note: The type attribute is not supported in HTML5, instead of type you can use CSS property of list-style-type. Following is the example to show the CSS property for ul tag.
HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for ordered list. We can use ordered list to represent items either in numerical order format or alphabetical order format, or any format where an order is emphasized. There can be different types of numbered list:
Numeric Number (1, 2, 3)
Capital Roman Number (I II III)
Small Romal Number (i ii iii)
Capital Alphabet (A B C)
Small Alphabet (a b c)
To represent different ordered lists, there are 5 types of attributes in <ol> tag.
Type
Description
Type “1”
This is the default type. In this type, the list items are numbered with numbers.
Type “I”
In this type, the list items are numbered with upper case roman numbers.
Type “i”
In this type, the list items are numbered with lower case roman numbers.
Type “A”
In this type, the list items are numbered with upper case letters.
Type “a”
In this type, the list items are numbered with lower case letters.
HTML Ordered List Example
Let’s see the example of HTML ordered list that displays 4 topics in numbered list. Here we are not defining type=”1″ because it is the default type.
HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists:
Ordered List or Numbered List (ol)
Unordered List or Bulleted List (ul)
Description List or Definition List (dl)
Note: We can create a list inside another list, which will be termed as nested List.
HTML Ordered List or Numbered List
In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.
In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag.
HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries are listed like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present glossary, list of terms or other name-value list.
The HTML definition list contains following three tags:
<dl> tag defines the start of the list.
<dt> tag defines a term.
<dd> tag defines the term definition (description).
<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>
Output:Aries-One of the 12 horoscope sign.Bingo-One of my evening snacksLeo-It is also an one of the 12 horoscope sign.Oracle-It is a multinational technology corporation.
Click here for full details of HTML description list. HTML Description List
HTML Nested List
A list within another list is termed as nested list. If you want a bullet list inside a numbered list then such type of list will called as nested list.
HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.
We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section etc. But it is recommended to use div tag over table to manage the layout of the page .
HTML Table Tags
Tag
Description
<table>
It defines a table.
<tr>
It defines a row in a table.
<th>
It defines a header cell in a table.
<td>
It defines a cell in a table.
<caption>
It defines the table caption.
<colgroup>
It specifies a group of one or more columns in a table for formatting.
<col>
It is used with <colgroup> element to specify column properties for each column.
<tbody>
It is used to group the body content in a table.
<thead>
It is used to group the header content in a table.
<tfooter>
It is used to group the footer content in a table.
HTML Table Example
Let’s see the example of HTML table tag. It output is shown above.
HTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only, closing tags are not used in HTML image element.
The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are given below.
1) src
It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server.
The location of image may be on the same directory or another server.
2) alt
The alt attribute defines an alternate text for the image, if it can’t be displayed. The value of the alt attribute describe the image in words. The alt attribute is considered good for SEO prospective.
3) width
It is an optional attribute which is used to specify the width to display the image. It is not recommended now. You should apply CSS in place of width attribute.
4) height
It h3 the height of the image. The HTML height attribute also supports iframe, image and object elements. It is not recommended now. You should apply CSS in place of height attribute.
Use of height and width attribute with img tag
You have learnt about how to insert an image in your web page, now if we want to give some height and width to display image according to our requirement, then we can set it with height and width attributes of image.
Note: Always try to insert the image with height and width, else it may flicker while displaying on webpage.
Use of alt attribute
We can use alt attribute with tag. It will display an alternative text in case if image cannot be displayed on browser. Following is the example for alt attribute:
To insert an image in your web, that image must be present in your same folder where you have put the HTML file. But if in some case image is available in some other directory then you can access the image like this:
The HTML anchor tag defines a hyperlink that links one page to another page. It can create hyperlink to other web page as well as files, location, or any URL. The “href” attribute is the most important attribute of the HTML a tag. and which links to destination page or URL.
href attribute of HTML anchor tag
The href attribute is used to define the address of the file to be linked. In other words, it points out the destination page.
The syntax of HTML anchor tag is given below.<a href = "..........."> Link Text </a>
Let’s see an example of HTML anchor tag.
<a href="second.html">Click for Second Page</a>
Specify a location for Link using target attribute
If we want to open that link to another page then we can use target attribute of <a> tag. With the help of this link will be open in next page.
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>Click on <a href="https://www.javatpoint.com/" target="_blank"> this-link </a>to go on home page of JavaTpoint.</p>
</body>
</html>
Output:
Note:
The target attribute can only use with href attribute in anchor tag.
If we will not use target attribute then link will open in same page.
Appearance of HTML anchor tag
An unvisited link is displayed underlined and blue.
HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let’s take a simple example to see how it work. It is a notable point that a browser itself add an empty line before and after a paragraph. An HTML <p> tag indicates starting of new paragraph.
Note: If we are using various <p> tags in one HTML file then browser automatically adds a single blank line between the two paragraphs.
See this example:
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
Output:
This is first paragraph.
This is second paragraph.
This is third paragraph.
Space inside HTML Paragraph
If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra line while displaying the page. The browser counts number of spaces and lines as a single one.
<p>
I am
going to provide
you a tutorial on HTML
and hope that it will
be very beneficial for you.
</p>
<p>
Look, I put here a lot
of spaces but I know, Browser will ignore it.
</p>
<p>
You cannot determine the display of HTML</p>
<p>because resized windows may create different result.
</p>
Output:
I am going to provide you a tutorial on HTML and hope that it will be very beneficial for you.
Look, I put here a lot of spaces but I know, Browser will ignore it.
You cannot determine the display of HTML
because resized windows may create different result.
As you can see, all the extra lines and unnecessary spaces are removed by the browser.
How to Use <br> and <hr> tag with paragraph?
An HTML <br> tag is used for line break and it can be used with paragraph elements. Following is the example to show how to use <br> with <p> element.
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2> Use of line break with pragraph tag</h2>
<p><br>Papa and mama, and baby and Dot,
<br>Willie and me?the whole of the lot
<br>Of us all went over in Bimberlie's sleigh,
<br>To grandmama's house on Christmas day.
</p>
</body>
</html>
Output:
An HTML <hr> tag is used to apply a horizontal line between two statements or two paragraphs. Following is the example which is showing use of <hr> tag with paragraph.
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2> Example to show a horizontal line with paragraphs</h2>
<p> An HTML hr tag draw a horizontal line and separate two paragraphs with that line.<hr> it will start a new paragraph.
</p>
</body>
</html>
HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without using CSS. There are many formatting tags in HTML. These tags are used to make text bold, italicized, or underlined. There are almost 14 options available that how text appears in HTML and XHTML.
In HTML the formatting tags are divided into two categories:
Physical tag: These tags are used to provide the visual appearance to the text.
Logical tag: These tags are used to add some logical or semantic value to the text.
NOTE: There are some physical and logical tags which may give same visual appearance, but they will be different in semantics.
Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML formatting text.
Element name
Description
<b>
This is a physical tag, which is used to bold the text written between it.
<strong>
This is a logical tag, which tells the browser that the text is important.
<i>
This is a physical tag which is used to make text italic.
<em>
This is a logical tag which is used to display content in italic.
<mark>
This tag is used to highlight text.
<u>
This tag is used to underline text written between it.
<tt>
This tag is used to appear a text in teletype. (not supported in HTML5)
<strike>
This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5)
<sup>
It displays the content slightly above the normal line.
<sub>
It displays the content slightly below the normal line.
<del>
This tag is used to display the deleted content.
<ins>
This tag displays the content which is added
<big>
This tag is used to increase the font size by one conventional unit.
<small>
This tag is used to decrease the font size by one unit from base font size.
1) Bold Text
HTML<b> and <strong> formatting elements
The HTML <b> element is a physical tag which display text in bold font, without any logical importance. If you write anything within <b>…………</b> element, is shown in bold letters.
See this example:
<p><b>Write Your First Paragraph in bold text.</b></p>
Output:
Write Your First Paragraph in bold text.
The HTML <strong> tag is a logical tag, which displays the content in bold font and informs the browser about its logical importance. If you write anything between <strong>???????. </strong>, is shown important text.
See this example:
<p><strong>This is an important content</strong>, and this is normal content</p>
Output:
This is an important content, and this is normal content
Example
<!DOCTYPE html>
<html>
<head>
<title>formatting elements</title>
</head>
<body>
<h1>Explanation of formatting element</h1>
<p><strong>This is an important content</strong>, and this is normal content</p>
</body>
</html>
2) Italic Text
HTML <i> and <em> formatting elements
The HTML <i> element is physical element, which display the enclosed content in italic font, without any added importance. If you write anything within <i>…………</i> element, is shown in italic letters.
See this example:
<p><i>Write Your First Paragraph in italic text.</i></p>
The HTML <em> tag is a logical element, which will display the enclosed content in italic font, with added semantics importance.
See this example:
<p><em>This is an important content</em>, which displayed in italic font.</p>
Output:
This is an important content, which displayed in italic font.
<!DOCTYPE html>
<html>
<head>
<title>formatting elements</title>
</head>
<body>
<h1>Explanation of italic formatting element</h1>
<p><em>This is an important content</em>, which displayed in italic font.</p>
</body>
</html>
3) HTML Marked formatting
If you want to mark or highlight a text, you should write the content within <mark>………</mark>.
See this example:
<h2> I want to put a <mark> Mark</mark> on your face</h2>
Output:
I want to put a Mark on your face
4) Underlined Text
If you write anything within <u>………</u> element, is shown in underlined text.
See this example:
<p><u>Write Your First Paragraph in underlined text.</u></p>
Output:
Write Your First Paragraph in underlined text.
5) Strike Text
Anything written within <strike>…………………..</strike> element is displayed with strikethrough. It is a thin line which cross the statement.
See this example:
<p><strike>Write Your First Paragraph with strikethrough</strike>.</p>
Output:
Write Your First Paragraph with strikethrough.
6) Monospaced Font
If you want that each letter has the same width then you should write the content within <tt>………….</tt> element.
Note: We know that most of the fonts are known as variable-width fonts because different letters have different width. (for example: ‘w’ is wider than ‘i’). Monospaced Font provides similar space among every letter.
See this example:
<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
Output:
Hello Write Your First Paragraph in monospaced font.
7) Superscript Text
If you put the content within <sup>…………..</sup> element, is shown in superscript; means it is displayed half a character’s height above the other characters.
See this example:
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
Output:
Hello Write Your First Paragraph in superscript.
8) Subscript Text
If you put the content within <sub>…………..</sub> element, is shown in subscript ; means it is displayed half a character’s height below the other characters.
See this example:
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
Output:
Hello Write Your First Paragraph in subscript.
9) Deleted Text
Anything that puts within <del>……….</del> is displayed as deleted text.
See this example:
<p>Hello <del>Delete your first paragraph.</del></p>
Output:
Hello
10) Inserted Text
Anything that puts within <ins>……….</ins> is displayed as inserted text.
See this example:
<p><del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>
Output:
Delete your first paragraph.Write another paragraph.
11) Larger Text
If you want to put your font size larger than the rest of the text then put the content within <big>………</big>. It increase one font size larger than the previous one.
See this example:
<p>Hello <big>Write the paragraph in larger font.</big></p>
Output:
Hello Write the paragraph in larger font.
12) Smaller Text
If you want to put your font size smaller than the rest of the text then put the content within <small>………</small>tag. It reduces one font size than the previous one.
See this example:
<p>Hello <small>Write the paragraph in smaller font.</small></p>
An HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. An element in HTML usually consist of a start tag <tag name>, close tag </tag name> and content inserted between them. Technically, an element is a collection of start tag, attributes, end tag, content between them.
Note: Some elements does not have end tag and content, these elements are termed as empty elements or self-closing element or void elements.
Such as:
<p> Hello world!!! </p>
Example
<!DOCTYPE html>
<html>
<head>
<title>WebPage</title>
</head>
<body>
<h1>This is my first web page</h1>
<h2> How it looks?</h2>
<p>It looks Nice!!!!!</p>
</body>
</html>
All the content written between body elements are visible on web page.
Void element: All the elements in HTML do not require to have start tag and end tag, some elements does not have content and end tag such elements are known as Void elements or empty elements. These elements are also called as unpaired tag.
Some Void elements are <br> (represents a line break) , <hr>(represents a horizontal line), etc.
Nested HTML Elements: HTML can be nested, which means an element can contain another element.
Block-level and Inline HTML elements
For the default display and styling purpose in HTML, all the elements are divided into two categories:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color: lightblue">This is first div</div>
<div style="background-color: lightgreen">This is second div</div>
<p style="background-color: pink">This is a block level element</p>
</body>
</html>
Output:
In the above example we have used
tag, which defines a section in a web page, and takes full width of page.
We have used style attribute which is used to styling the HTML content, and the background color are showing that it’s a block level element.
Inline elements:
Inline elements are those elements, which differentiate the part of a given text and provide it a particular function.
These elements does not start with new line and take width as per requirement.
The Inline elements are mostly used with other elements.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://www.javatpoint.com/html-tutorial">Click on link</a>
<span style="background-color: lightblue">this is inline element</span>
<p>This will take width of text only</p>
</body>
</html>
Output:
Following is the list of the some main elements used in HTML:
Start tag
Content
End tag
Description
<h1> …… <h6>
These are headings of HTML
</h1>??..</h6>
These elements are used to provide the headings of page.
<p>
This is the paragraph
</p>
This element is used to display a content in form of paragraph.
<div>
This is div section
</div>
This element is used to provide a section in web page.
<br>
This element is used to provide a line break. ( void element)
<hr>
This element is used to provide a horizontal line. (void element)
Chrome
IE
Firefox
Opera
Safari
