Paragraph Element
The paragraph element is generally used for denoting a paragraph. Any textual
content can be mentioned inside this element.
It is defined using <p>…</p> tag.
<!DOCTYPE html>
<html>
<body>
<p>This is a Paragraph</p>
</body>
</html>
Division and Span Elements
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements - which is then styled with CSS or
manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
<!DOCTYPE html>
<html>
<body>
<div>
<p> This is first paragraph </p>
<p> This is second paragraph </p>
<p> This is third paragraph </p>
</div>
</body>
</html>
Span elements
• The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute.
• The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline
element.
<!DOCTYPE html>
<html>
<body>
<div>
<span>first section of paragraph</span>
<span>second section of paragraph</span>
</div>
</body>
</html>
HTML List
Unordered List
An unordered list starts with the <ul> tag. Each list item starts with the
<li> tag.
The list items will be marked with bullets (small black circles) by default
<h1>Courses offered:</h1>
<ul>
<li>HTML5</li>
<li>CSS</li>
<li>JS</li>
<li>Bootstrap</li>
</ul>
<h1>Courses offered:</h1>
<ul style="list-style-type: square;">
<li>HTML5</li>
<li>CSS</li>
<li>JS</li>
<li>Bootstrap</li>
</ul>
Note: There is a type attribute to define the types of bullet points, which is not recommended to be
used as per the latest HTML version.
In HTML, it is also possible to nest lists into different levels.
<h1>Courses Offered:</h1>
<ul>
<li>Markup
<ul>
<li> Basics of HTML
<ul>
<li> First level course on HTML </li>
</ul>
</li>
<li> Adaptive HTML </li>
</ul>
</li>
<li>Styling
<ul>
<li> CSS3
<ul>
<li> Latest version of CSS </li>
</ul>
</li>
</ul>
</li>
</ul>
Ordered List
The HTML <ol> tag defines an ordered list. An ordered list can be
numerical or alphabetical. Ordered HTML List. An ordered list starts
with the <ol> tag.
<h1>Courses offered:</h1>
<ol type="a" start="d" reversed>
<li>HTML5</li>
<li>CSS</li>
<li>JS</li>
<li>Bootstrap</li>
</ol>
Ordered lists can be nested with ordered lists
or unordered lists.<h1>Courses Offered:</h1>
<ol>
<li>Markup
<ol>
<li> Basics of HTML
<ul>
<li> First level course on HTML </li>
</ul>
</li>
<li> Adaptive HTML </li>
</ol>
</li>
<li>Styling
<ol>
<li> CSS3
<ul>
<li> Latest version of CSS </li>
</ul>
</li>
</ol>
</li>
</ol>
Description List
• The definition list, also known as DL, is one of them, and it is essential for
structuring information in an organized way.
<dl>
<dt> Description Term 1 </dt>
<dd> Description Definiton 1 </dd>
<dt> Description Term 2 </dt>
<dd> Description Definition 2 </dd>
</dl>
Quotation and Citation Element
The HTML Quotation elements are used to insert quoted texts in a web page, that
is the portion of texts different from the normal texts in the web page
Quotation Example
• <p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As
the world's leading conservation organization, WWF works in nearly
100 countries. At every level, we collaborate with people around the
world to develop and deliver innovative solutions that protect
communities, wildlife, and the places in which they live.
</blockquote>
Link Element
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little
hand.
The HTML <a> tag defines a hyperlink. It has the following syntax:
Hyperlinks can be of any of the below types:
Text hyperlink:
<a href="Enquire.html"> Click here to connect to us </a><br/>
<a href="http://www.google.com"> Click here to go to Google website </a>
Image hyperlink:
<a href="http://www.google.com"> <img src="google.jpg" /></a>
Bookmark hyperlink:
<h2 id="top">Topic</h2>
<p>Detail……</p>
<p>Detail……</p>
<p>Detail……</p>
<a href="#top">Go to Top</a>
Email hyperlink:-
<a href="mailto:[email protected]?Subject=Hello%20again">Send
Mail</a>
The target attribute can hold the following values:
<html>
<body>
<a href="https://owasp.org/" target="_blank">
Opens OWASP website in new tab
</a>
<br/>
<a href="https://owasp.org/" target="_top">
Opens OWASP website in same tab
</a>
</body>
</html>
Text-Level Semantic Elements
<!DOCTYPE html>
<html>
<body>
<p><abbr title="HyperText Markup Language">HTML</abbr> stands for
HyperText Markup Language</p>
<p>This <small>SMALL</small> text</p>
<p>This <mark>mark</mark> text</p>
<p>This <strong>strong</strong> text</p>
<p>This <em>emphasis</em> text</p>
<p>H <sub>2</sub> O</p>
<p>x <sup>2</sup> y</p>
</body>
</html>
Global Attributes
• Attributes that can be used with all HTML elements are called "Global
attributes“
• <div>
• <p contenteditable="true">This is editable</p>
• <p dir="rtl">The direction of the text is from right to left</p>
• <p title="mydemo">Hover your mouse here to see the title</p>
• <p id="id1">ID should be unique for each element</p>
• </div>
