HTML ELEMENTS


There are html elements which we use to create a web page.

Headings: <h1> <h2> <h3> <h4> <h5> <h6>

Sections: <section>

Lists: <ul> and <ol> together with <li>

Comments: <!‐‐ a comment ‐‐>


Html Heading

<h1> <h2> <h3> . . . <h6> are used for headings

Browsers show <h1> bigger than <h2>

<h2> bigger than <h3>, and so on

People often 'cheat' by using these elements to easily generate different size text


Heading Tags

A simple example of heading elements

<h1>Introduction to Something</h1>

<h2>An Area of Something</h2>

<h3>A SubArea...</h3>

<p>This subarea is fun! Let's discuss it here in detail.</p>


Using Section

<section> is used to indicate a section

<section>

<h1>Introduction to Something</h1>

<p>Let's discuss something here!</p>

</section>


A simple list using bullets

Now let's consider HTML lists

<ul> means unordered list, <li> means list item

<ul>

<li>The first item</li>

<li>The second item...</li>

<li>Yes... the third item!</li>

</ul>


A simple list using numbers

<ol> means ordered list

<ol>

<li>The first item</li>

<li>The second item...</li>

<li>Yes... the third item!</li>

</ol>


Changing the start number

Add start="number" to fix the starting number

<ol start="1999">

<li>In this year I was born...</li>

<li>In this year I learned to walk...</li>

<li>In this year I learned to program...</li>

<li>In this year I learned SPA techniques...</li>

</ol>


Reversing the order

Add reversed to reverse the order

<ol start="2002" reversed>

<li>In this year I learned SPA techniques...</li>

<li>In this year I learned to program...</li>

<li>In this year I learned to walk...</li>

<li>In this year I was born...</li>

</ol>


Using 'A' letter

Add type="A" to use a letter

<ol type="A">

<li>is for 'Anchor'...</li>

<li>is for 'Body'...</li>

<li>is for 'Cdata'...</li>

<li>is for 'Div'...</li>

</ol>


Comments

A comment looks like this: <!‐‐ a comment ‐‐>

<html>

<! -- This is a simple demonstration of using comments in a web page -- >

<head>

<meta name="author" content="Daniel">

<!-- I can't believe how amazing that guy really is! -->

</head>

<body>

<!--Here'smy simple 'to do' list-- >

<p>Items I need to fix in my business:</p>

<ol> <li>The people</li>

<li>The process</li>

<li>The product</li> </ol>

<!--That'sa lot of things to fix! I better get started soon. -->

</body>

</html>


SIMPLE WEB PAGE USING HTML ELEMENTS

<!doctype html>
<html>
<head>
<!--This is a simple demonstration of using comments in a web page-->
<meta name="author" content="Daniel">
</head>
<body>
<!--html section starts here-->

<section>

<h1>Normal Bullets</h1>

<ul>
<li>The first item</li>
<li>The second item...</li>
<li>Yes... the third item!</li>
</ul>

<h2>Order List</h2>

<ol>
<li>The people</li>
<li>The process</li>
<li>The product</li>
</ol>

<h3>Start Number</h3>

<ol start="1999">
<li>The people</li>
<li>The process</li>
<li>The product</li>
</ol>

<h4>Reversing the order</h4>

<ol start="2002" reversed>
<li>The people</li>
<li>The process</li>
<li>The product</li>
</ol>

<h5>Using 'A' letter</h5>

<ol type="A">
<li>The people</li>
<li>The process</li>
<li>The product</li>
</ol>

</section>
<!-- html section ends here -->
</body>
</html>

Copy above code & try it into your natepad


Browser view of the code:

Html Elements



Copyright © 2020. All rights reserved.