Creating Simple Web Pages in HTML: A Quick Cheatsheet

</span>
 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    Page Title


    





    Enter fullscreen mode
    


    Exit fullscreen mode
    






</code>: Declares the document type and version of HTML (HTML5 in this case).

: The root element that wraps all content on the page.

: Contains meta-information about the document, such as the title and character set.

: Where the visible content of the web page is placed.

  
  
  Adding Content to Your Web Page

  
  
  1. Headings
Headings are used to define the hierarchy of your content. There are six levels of headings, from  (most important) to  (least important).

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  2. Paragraphs
Use the  tag to add paragraphs of text.

This is a paragraph.
This is another paragraph.



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  3. Links
Links are created using the  tag. The href attribute specifies the destination URL.

 href="https://www.example.com">Visit Example



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  4. Images
Images are added using the  tag. The src attribute specifies the image file path, and the alt attribute provides alternative text for accessibility.

 src="image.jpg" alt="Description of image">



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Organizing Content

  
  
  1. Lists
HTML supports both unordered () and ordered () lists.


    Unordered List Item 1
    Unordered List Item 2



    Ordered List Item 1
    Ordered List Item 2




    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  2. Tables
Tables are created using the , , , and  tags.


    
        Header 1
        Header 2
    
    
        Data 1
        Data 2
    




    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Forms for User Input
Forms allow users to submit data. Use the  tag with  elements for text, email, buttons, and more.

 action="/submit" method="post">
     for="name">Name:
     type="text" id="name" name="name">
     for="email">Email:
     type="email" id="email" name="email">
     type="submit" value="Submit">




    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Additional Elements

  
  
  1. Buttons
Buttons can be created using the  tag.

Click Me



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  2. Line Breaks and Horizontal Rules
Use  for line breaks and  for horizontal rules.

This is the first line.This is the second line.




    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  3. Divisions and Spans


: A block-level container for grouping content.

: An inline container for styling or grouping text.



    This is inside a div.

This is a  style="color:red;">span inside a paragraph.



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Comments
Comments are notes in your code that are not displayed in the browser. They are written as follows:





    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Putting It All Together
Here’s a complete example of a simple web page:

</span>
 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    My First Web Page


    Welcome to My Website
    This is a simple web page created using HTML.
     href="https://www.example.com">Visit Example
     src="image.jpg" alt="Sample Image">
    
        Item 1
        Item 2
    
     action="/submit" method="post">
         for="name">Name:
         type="text" id="name" name="name">
         type="submit" value="Submit">
    





    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Conclusion
With these basic HTML elements, you can create simple yet functional web pages. As you progress, you can enhance your pages with CSS for styling and JavaScript for interactivity.