Section vs Div and Combo box of HTML

Section vs Div of HTML

Difference Between HTML Section vs Div

Div is the Tag which is defined as a division of the Html document. It is mainly used to group of the block elements mainly it will be used for the CSS Style sheet whenever we use it in the Html page. The section is also a Tag it describes each and every segment of the Html documents i.e. In html, web page have headers, footers, etc these are called as Sections.

Comparison between HTML Section vs Div (Infographics) .

Belows are the top comparison between HTML Section vs Div :

Comparison Table of HTML Div vs Section

The table belows summarize the comparison between HTML Section vs Div :

Html Div TagHtml Section Tag
The tag defines a separate division or sections of the documents.The tag defines a section of documents like chapters, headers, footers and body sections.
div tag is use for html5 version.section tag is use for html5 version.
Div tag contains all the elements where the p tag should not force to do it.Section tag containing article elements in html

Key differences between HTML Section vs Div

Let us discuss some key differences between HTML Section vs Div in the following points:

  • Section elements its make separately to syndicates the content of the element uses instead of article tags elements. In nav tags element uses for navigation menu are a list of search result and map its for specific element,its also put inside the section tags. The sections also global attribute.
  • Section tag is used for a blob of contents that will use for store the individual binary records in the database. the div tags are generally used for block-level types so the elements with no additional feature likes blob type.
  • In every set of concepts have some advantages and difference is there because one is somewhat might other than better.
  • The sections represent some generic or html document, div are also generic flows container.
  • It is also the same like previous versions rule is generic one section tag element is appropriate only if the other elements contents would be listed in an explicit manner.Div is used for div tag in htm5,same like previous version features which is to be used for division tags.

Example #1 – Div Tag

Code:

<html>
    <body>
    <p>Sample.</p>
    <div style="background-color:Green">
    <h3>Welcome To My Domain</h3>
    <p>Welcome To My Domain</p>
    </div>
    </body>
    </html>

Output :

Sample.

Welcome To My Domain

Welcome To My Domain

Example #2 – Section Tag

Code :

 
    <html>
    <body>
    <section>
    <h1>Sample</h1>
    <p>WelcomeWelcomeWelcomeWelcomeWelcomeWelcome</p>
    </section>
    <section>
    <h1>First</h1>
    <p>WelcometomydomainWelcometomydomain
    WelcometomydomainWelcometomydomain</p>
    </section>
    </body>
    </html>   
        

Output :

Sample

WelcomeWelcomeWelcomeWelcomeWelcomeWelcome

First

WelcometomydomainWelcometomydomain WelcometomydomainWelcometomydomain

Combobox in HTML

HTML Combobox is mainly used for building forms in HTML. In which users are able to select an option from the list as per their preference.Combobox in HTML is formed with select element and input type=”text” element.The functionality of the Combobox is as same as a select tag

Syntax of Combobox in HTML

  • As we know Combo box is a combination of select tag and input type=”text”element, so syntax for Combo box is defined within itself only.

Code for this Syntax is as follows:

<input type=text list=value>
      <datalist>
      <option>content</option>
      <option>content</option>
      <option>content</option>
      <option>content</option>
      <option>content</option>
      </datalist>
  • Once the option is selected by the user it will remain as it is still showing on the output screen.
  • With the above syntax, one can add javascript code to do more functionality with the Combobox element. The function like onChange is able to choose an option from the selection list as per user preference.

Code for this Syntax is as follow

<input type=”text” id=”demo” name=”comboboxd

      emo”/>
      <select name=” optionlist ” onChange=”combo(
      this, ’demo’)”>
      <option>option 1</option>
      <option>option 2</option>
      <option>option 3</option>
      <option> option 4 </option>
      <option> option 5 </option>
      </select>           

List will be displaying through javascript is as follows:


var example = listdemo ld.selectedIndex;
var demo = optionlist.options[example].innerHTML;
var demo = optionlist.options[example] .value;

Example #1

Code :

<html>

    <head>
    <title>Example of Combobox</title>
    </head>
    <style>
    .combo{
    padding:10px;
    }
    </style>
    <h4>Front End Development languages</h4>
    <body>
    <select class="combo">
    <option value="Select">Select....</option>
    <option value="html">HTML 5</option>
    <option value="css">CSS 3</option>
    <option value="javascript">Javascript/Ajax</option>
    <option value="bootstrap">Bootstrap</option>
    <option value="react">React JS</option>
    <option value="vue">Vue JS</option>
    <option value="2">Angular 2</option>
    <option value="4">Angular 4</option>
    <option value="5">Angular 5</option>
    <option value="6">Angular 6</option>
    <option value="7">Angular 7</option>
    <option value="8">Angular 8</option>
    <option value="CSS fw">CSS framework</option>
    <option value="rw">Responsive Web Design</option>
    <option value="dom">DOM scripting</option>
    <option value="preprocessors">Saas, Less</option>
    <option value="api">HTML 5 API</option></select>
    </body>
    </html>      

Output:

Front End Development language

Eample #2

Code :

<!DOCTYPE html>
    <html>
    <body>
    <h2>Student Details</h2>
    <input list="stud" name="demo">
    <datalist id="stud">
    <option value="Student Details"> </option>
    <option value="Registration"> </option>
    </datalist>
    <input type="submit">
    </form>
    </body>
    </html>
    <!—Registration form code-->
    <html>
    <head>
    <title>Student Details</title>
    <style>
    h3{
    text-align: center;
    }
    table{
    color:white;
    background-color:chocolate;
    border-collapse: collapse;
    border: 2px solid black;
    }
    table.inner{
    border: 0px
    }
    </style>
    </head>
    <body>
    <h3>STUDENT REGISTRATION FORM</h3>
    <form>
    <table align="center" cellpadding = "6">
    <tr>
    <td>FIRST NAME</td>
    <td><input type="text" name="First_Name"/>
    </td>
    </tr>
    <tr>
    <td>LAST NAME</td>
    <td><input type="text" name="Last_Name"/>
    </td>
    </tr>
    <tr>
    <td>DATE OF BIRTH</td>
    <td><input type="date" name="Birth_date" /></td>
    </tr>
    <tr>
    <td>EMAIL ID</td>
    <td><input type="text" name="Email_Id" maxlength=
      "100" /></td>
    </tr>
    <tr>
    <td>MOBILE NUMBER</td>
    <td>
    <input type="text" name="Mobile_Number" maxlength=
    "10" />
    </td>
    </tr>
    <tr>
    <td>GENDER</td>
    <td>
    Male <input type="radio" name="Gender" value=
    "Male" />
    Female <input type="radio" name="Gender" value=
    "Female" />
    Transgender <input type="radio" name="Gender" 
    value="Transgender" />
    </td>
    </tr>
    <tr>
    <td>CITY</td>
    <td><input type="text" name="City" maxlength=
      "20" />
    </td>
    </tr>
    <tr>
    <td>PINCODE</td>
    <td><input type="text" name="pincode"  />
    </td>
    </tr>
    <tr>
    <td>STATE</td>
    <td><input type="text" name="State" />
    </td>
    </tr>
    <tr>
    <td>COUNTRY</td>
    <td><input type="text" name="Country" value=
      "India"
     readonly="readonly" /></td>
    </tr>
    <tr>
    <td>HOBBIES <br /><br /><br /></td>
    <td>
    Writing
    <input type="checkbox" name="Hobby_1" value=
    "Writing" />
    Sketching
    <input type="checkbox" name="Hobby_2" value=
    "Designing" />
    Designing
    <input type="checkbox" name="Hobby_3" value=
    "Cooking" />
    <br />
    Others
    <input type="checkbox" name="Hobby_4" value="Other">
    <input type="text" name="Other_Hobby" maxlength="30" />
    </td>
    </tr>
    <tr>
    <td>Percentage</td>
    <td><input type="text" name="percentage"/ maxlength="2" 
      placeholder="marks in %"></td>
    </tr>
    <tr>
    <td colspan="2" align="center">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>    
<input type=text list=value>
      <datalist>
      <option>content</option>
      <option>content</option>
      <option>content</option>
      <option>content</option>
      <option>content</option>




STUDENT REGISTRATION FORM

FIRST NAME
LAST NAME
DATE OF BIRTH
EMAIL ID
MOBILE NUMBER
GENDER Male Female Transgender
CITY
PINCODE
STATE
COUNTRY
HOBBIES


Writing Sketching Designing
Others
Percentage

Leave a Reply

Your email address will not be published. Required fields are marked *