Basics of HTML (Hypertext Markup Language)

HTML is the standard markup language used to create the structure and content of web pages. It consists of a series of elements that define the different parts of a webpage. Here are the basics:

1. HTML Document Structure:

   <!DOCTYPE html>
   <html lang="en">
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <!-- Content goes here -->
  • <!DOCTYPE html>: Declaration of HTML5 document type.
  • <html>: Root element of an HTML page.
  • <head>: Contains metadata like character set, viewport settings, and page title.
  • <meta>: Provides additional information about the document.
  • <title>: Sets the title of the webpage.
  • <body>: Contains the content of the webpage.

2. HTML Elements:

  • Elements are composed of tags, attributes, and content.
  • Tags: Enclosed in angle brackets (< >), they define the beginning and end of an element.
  • Attributes: Provide additional information about an element and are always included in the opening tag.

3. Common HTML Elements:

  • Headings: <h1>Heading 1</h1> <h2>Heading 2</h2> <!-- ... --> <h6>Heading 6</h6>
  • Paragraphs: <p>This is a paragraph.</p>
  • Links: <a href="https://example.com">Visit Example</a>
  • Lists: <ul> <li>Item 1</li> <li>Item 2</li> </ul> <ol> <li>Item 1</li> <li>Item 2</li> </ol>
  • Images: <img src="image.jpg" alt="Description">
  • Forms: <form action="/submit" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username"> <input type="submit" value="Submit"> </form>
  • Semantic Elements: <header> <h1>Website Header</h1> </header> <article> <h2>Article Title</h2> <p>Article content goes here.</p> </article> <footer> <p>Copyright © 2023</p> </footer>

4. Attributes:

  • Class and ID: <p class="highlight">This paragraph has a class.</p> <div id="main-content">This is the main content.</div>
  • Style: <p style="color: red;">This paragraph is red.</p>
  • Href (for Links): <a href="#section2">Jump to Section 2</a>
  • Src (for Images):
    html <img src="image.jpg" alt="Description">

5. HTML Comments:

  • Comments are ignored by browsers and can be used for adding notes within the code.
    html ¨K30K

6. Validation:

  • Always ensure your HTML code is well-formed and follows the proper structure.


Understanding the basics of HTML is fundamental for anyone involved in web development. It serves as the foundation for creating content-rich and structured web pages. As you progress, you’ll explore more advanced HTML features and its integration with other technologies for building dynamic and interactive web applications.