Contribute
HTML 5

Basics Of HTML And CSS - Part 1

HMTL stands for hypertext markup language useful for developing web pages.

Using HTML we can add paragraphs, headings, images into web pages.

Basic Structure

    <!DOCTYPE html>
    <html> ----------------------------------- <html> Start tag
    <head>-------------------------------<head > tag contains scripts and stylesheets
    <title></tilte>--------------------- <title> tag display the tilte of the page
    </head>
    <body>
    _________________________ <body> Contains main content appears on the webpage
    </body>
    </html>-------------------------------------<html> End tag

Let us see the basic HTML tags used for creating a web page.

Heading Tag

Heading tags are defined with <h1> to <h6>.

Example:
  1. <html>  
  2.   
  3.     <head>  
  4.         <title></title>  
  5.     </head>  
  6.   
  7.     <body>  
  8.         <h1>Welcome to csharpcorner</h1>  
  9.         <h2>Welcome to csharpcorner</h2>  
  10.         <h3>Welcome to csharpcorner</h3>  
  11.         <h4>Welcome to csharpcorner</h4>  
  12.         <h5>Welcome to csharpcorner</h5>  
  13.         <h6>Welcome to csharpcorner</h6>  
  14.   
  15. </html>  
Output

Heading Tag

Paragraph Tag:

Paragraph tags are defined with <p></p>.

Example
  1. <Html>  
  2.   
  3.     <Head>  
  4.         <Title>  
  5.         </title>  
  6.     </head>  
  7.   
  8.     <Body>  
  9.         <p>Welcome to csharpcorner</p>  
  10.         <p>Welcome author</p>  
  11.         <p>N.Vinodh</p>  
  12.     </body>  
  13.   
  14. </html>  
Output

Paragraph Tag
Image Tag

Image tags are defined with <img></img>.

Image tags are useful for displaying images.

Example:
  1. <Html>  
  2.   
  3.     <Head>  
  4.         <Title>  
  5.         </title>  
  6.     </head>  
  7.   
  8.     <Body> <img src="images\ccorner.png" alt="logo" /> </body>  
  9.   
  10. </html>  
You can also adjust the height and width of the image inside the image tag
  1. <img src="images\ccorner.png" alt="logo" height="200" width="200" />  
Output

Image Tag

Table Tag

Tables are defined with <table></table>.

<tr></tr> tags contains table rows
<td></td> tags contains table data

Example
  1. <html>  
  2.   
  3. <head>  
  4.     <title></title>  
  5. </head>  
  6.   
  7. <body>  
  8.     <table border="1">  
  9.         <tr>  
  10.             <td> Vinodh</td>  
  11.             <td> Arun</td>  
  12.         </tr>  
  13.         <tr>  
  14.             <td>Bill</td>  
  15.             <td>Tom</td>  
  16.         </tr>  
  17.     </table>  
  18. </body>  
  19.   
  20. </html>  
Output

Table Tag
 
List tag
  • Ordered list
  • Unordered list

Unordered list

Unordered lists are defined with <ul></ul> tag.

Example:

  1. <html>  
  2.   
  3. <head>  
  4.     <title></title>  
  5. </head>  
  6.   
  7. <body>  
  8.     <ul>  
  9.         <li>Article</li>  
  10.         <li>Blogs</li>  
  11.         <li>News</li>  
  12.     </ul>  
  13. </body>  
  14.   
  15. </html>  
Output

Un-Ordered list

Ordered list

Ordered lists are defined with <ol></ol> tag.

Order the list by numbers.

Example
  1. <html>  
  2.   
  3. <head>  
  4.     <title></title>  
  5. </head>  
  6.   
  7. <body>  
  8.     <ol>  
  9.         <li>Article</li>  
  10.         <li>Blogs</li>  
  11.         <li>News</li>  
  12.     </ol>  
  13. </body>  
  14.   
  15. </html>  
Output

Ordered list

Description lists

Description lists are defined with <dl></dl> tag.

<dt></dt> Stands for description term
<dd></dd> Stands for description data

Example
  1. <html>  
  2.   
  3. <head>  
  4.     <title></title>  
  5. </head>  
  6.   
  7. <body>  
  8.     <dl> <dt>  
  9. Article  
  10. </dt>  
  11.         <dd> Basics of HTML and CSS </dd>  
  12.         </ol>  
  13. </body>  
  14.   
  15. </html>  
Output

Output

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs