Seven html elements to use in daily coding

In our previous lesson we did introduction of html. In this lesson, we're looking at seven html elements we'll use when designing web pages. They're more than seven but we're srarting with these ones.

Websites we browse is made up of multiple web pages. For example, when navigating, we open many web pages, sign up, sign in, sport, music are all different web pages put together to make the website functioning.

After going through this lesson, you will be able to explain to someone what these elements does to a web page, their functions and code examples.

We'll be looking at the following elements one after the other:

1. DIV element
2. NAV element
3. SPAN element
4. HEADINGS elements
5. LISTS elements
6. BUTTON element
7. HR element

'DIV ELEMENT'

Let's start with the 'DIV' element according to how they're listed above.

The 'DIV' keyword is abbreviation of division. It is used in dividing web pages.

If you carefully look at Facebook, you'll find out that the top area where those notifications, message, friend request alerts appear is different from where you see friends posts, photos. This is because they separated it from the main page body. That place is called header.

The 'div element' is non-single element, it has opening and closing tag.

See the code example below:

<div>

</div>

'NAV ELEMENT'

This 'nav' stands for navigation. It is used for making navigation menu/bar. It is not necessary you must use 'Nav element' to make navigation menu,

Example of how navigation menu look is:

sport articles news entertainment

See the code example below:

<header>

<nav>sport music news entertainment<\nav>

<\header>

'SPAN ELEMENT'

Span element is similar with the 'div' element. Personally, I used it for separating text but there are more things to be separate using span element.

See the code example below:

My mother has <span>​blue​<​/span​> eyes.

• html linking tag
• 
  
• php like button system
• 
  
• php mysql delete statement
• 
  
• JavaScript WYSIWYG rich text editor
• 
  
• Computer shortcut keys
• 
  
• Responsive web design
• 
  
• Fetching php mysql data randomly
• 
  

'HEADING ELEMENTS'

This elements is for making paragraph headings. The elements are 'h1', 'h2', 'h3', 'h4', 'h5' and 'h6'.

The 'H1' is the biggest heading, while 'H6' is the smallest heading element.

See the code example below:

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

'LISTS ELEMENTS'

The lists elements is for making number listing or bullet listing. There are many other lists format but these two are the common ones.

The number list is called 'ol', which stand for ordered list.

See the code example below:

<ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

The bullet list is called 'ul', which stand for unordered list.

See the code example below:

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

'BUTTON ELEMENT'

The name button is not far from you, right? This element make a clickable button appear on the web page. It can be use as submit button or for other purpose when JavaScript function is attached to it

See the code example below:

<button type="button">Click Me!</button>

'HR ELEMENT'

The 'HR' stands for Horizontal Rule. This element is used for making horizontal line on the web page.

This element is single, it has no opening and closing tag.

See the code example below:

<hr>

Drop your questions in the comment box if there is any.