A Beginner's Guide to Understanding HTML

A Beginner's Guide to Understanding HTML

Exploring Basic HTML Tags

HTML :-

HTML is the language used to create web pages. It uses tags to structure content like text, images, and links, allowing browsers to display them properly.

  • HTML stands for Hyper Text Markup Language

  • HTML is the standard markup language for creating Web pages

  • HTML describes the structure of a Web page


use case :-

  • HTML structures web pages.

  • It organizes text, images, and links.

  • It enables multimedia embedding.

  • It creates hyperlinks for navigation.

  • It handles user input through forms.

  • It uses semantic elements for better accessibility.

  • It integrates with CSS and JavaScript for styling and interactivity.


Basic structure :-

The basic structure of an HTML document includes:

  1. <!DOCTYPE html>: Tells the browser the type of document.

  2. <html>: The root element that contains all other elements.

  3. <head>: Contains meta-information like the title and links to styles.

  4. <title>: Sets the page title shown in the browser tab.

  5. <body>: Contains the main content of the page, like text and images.


BLOCK LEVEL VS INLINE LEVEL ELEMENTS

  1. Block-level elements: These elements start on a new line and take up the full width available. Examples include <div>, <h1>, <p>, and <section>.

  2. Inline elements: These elements do not start on a new line and only take up as much width as necessary.

    Examples include <span>, <a>, <img>, and <strong>.

Block level : examples

The syntax for the HTML elements <div>, <h1>, <p>, and <section> is as follows:

  1. <div>:

     <div>
         <!-- Content goes here -->
     </div>
    
  2. <h1>:

     <h1>Main Heading</h1>
    
  3. <p>:

     <p>This is a paragraph.</p>
    
  4. <section>:

     <section>
         <h2>Section Heading</h2>
         <p>Section content goes here.</p>
     </section>
    


inline level : examples

The syntax for the HTML inline-level elements <a>, <img>, <button>, and <span> is as follows:

  1. <a>:

     <a href="URL">Link Text</a>
    
  2. <img>:

     <img src="image.jpg" alt="Description">
    
  3. <button>:

     <button type="button">Button Text</button>
    
  4. <span>:

     <span>Text</span>