Web Development — HTML
List-Text Format-PRE and CODE Tags|Series: 03
Category : Web Development | HTML
In this web development series, you will understand the concept of the List-Text Format-PRE and CODE Tags in HTML, In web development series : 02 you can understand the concept of meta tag, heading tag, paragraph tag, Comments tag, Horizontal Line tag and Line Break tag.
List in HTML
- Definition List
- Ordered List
- Unordered List
Definition List tags is used to mostly for Table of Contents or Dictionary Items.
Example
<dl>
<dt>title</dt>
<dd>description</dd>
</dl>Ordered List Tags is used to used for Numbering Items or list of elements wherever we want and it display in numeric orders.
<ol>
<li>Items1</li>
<li>Items2</li>
<li>Items3</li>
</ol>code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="List">
<title>List</title>
</head>
<body>
<!--
- Definition List - <dl><dt></dt><dd></dd></dl>
- Ordered List - <ol><li></li></ol>
- UnOrdered List - <ul><li></li></ul>
-->
<h1>Definition List</h1>
<p>Used mostly for Table of Contents or Dictionary Items.</p>
<dl>
<dt>This is Definition Title</dt>
<dd>This is Definition Description</dd>
</dl>
<hr>
<h1>Ordered List (ol, li)</h1>
<p>Used for Numbering Items like Eg. Shopping List.</p>
<ol>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ol>
<hr>
<h1>UnOrdered List (ul, li)</h1>
<p>Used for Bullet points.</p>
<p>Why HTML used for?</p>
<ul>
<li>Create own Web Pages</li>
<li>Design Websites</li>
<li>Show off the skills</li>
</ul>
</body>
</html>OUTPUT
Both ordered list and unordered list code
<h1>Mixed Items</h1>
<ol>
<li>Programming Languages:</li>
<ul>
<li>HTML5</li>
<li>CSS</li>
<li>javaScript</li>
</ul>
<li>Scritping Languages:</li>
<ul>
<li>PHP</li>
<li>Python</li>
</ul>
</ol>
Text Formatting Options
- Strong
- Emphasis
- Underline
- Italics and this kind of formatting only we use in the webpage’s, and four tags are inline elements or tag which is the tag’s are used inside the block elements
Strong Formatting
<strong></strong> is used for strong or bold the importance test in webpage.
Emphasis and Italics
<em></em> Emphasis tag and strong tag elements can both be used to increase the importance of certain words or sentences in the webpage’s.
<i></i> Italic tag is used to show the text displays the text in italic format.
Underline
<u></u> Underline the Text.
code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Text Formatting Options">
<title>Text Formatting Options</title>
</head>
<body>
<!--
<strong> - Bold the Text.
<i> - Italics the Text.
<u> - Underline the Text.
<em> - Emphasis the Text.
-->
<h1>Today's News</h1>
<hr>
<strong></strong>
<h2>Main News 1</h2>
<p>1. "<strong>Lorem Ipsum</strong> is simply dummy text of the <u>printing and typesetting industry</u>. <br />Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br />when an unknown printer took a galley of type and scrambled it to make a type specimen book."</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br />Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br />when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<i>"Nice Article - Worth reading" - <strong>John, Smith</strong></i>
<hr>
<h2>Main News 2</h2>
<p>2. "<strong>Lorem Ipsum</strong> is simply dummy text of the <u>printing and typesetting industry</u> <br />Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br />when an unknown printer took a galley of type and scrambled it to make a type specimen book."</p>
<em>"Nice Article - Worth reading" - <strong>Jane</strong></em>
</body>
</html>OUTPUT
PRE and Code Tags
PRE Tag is used to format text exactly it is written in webpage’s.
Code Tag is used to display source code in webpage’s.
code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="PRE and Code Tags">
<title>PRE and Code Tags</title>
</head>
<body>
<!--
<pre> is used to format text exactly it is written.
<code> is to display source code
-->
<h1>PRE Tag</h1>
<pre>
T H I S
I S
A
P R E
T A G
</pre>
<hr>
<h3>Paragraph tag</h3>
<p>
T H I S
IS
A
P
T A G
</p>
<hr>
<h1>Code tag</h1>
<h3>We use javaScript code here.</h3>
<code>
function add($a, $b){
return $a + $b;
}
</code>
<hr>
<code>
<pre>
function add($a, $b){
return $a + $b;
}
</pre>
</code>
</body>
</html>OUTPUT
What next?
In our next blog we going to see Link Tag, Section and Article Tags and Additional Tags in HTML.
Next in the series : Link Tag, Section and Article Tags Additional Tags in HTML.
Coming soon.
Comment down your suggestions if any.
Find me on LinkedIn : Sudhakaran S
If you liked the blog never mind to hit that clap👏 and share this with your friends who will benefit. By the way don’t forget to follow 💙
