Menu
HTML

HTML Basic

1. HTML Document Structure:

An HTML document is structured with a few key elements:

  • <!DOCTYPE html>: Declaration specifying the HTML version (HTML5 in this case).
  • <html>: The root element of an HTML page.
  • <head>: Contains meta-information about the HTML document.
  • <title>: Sets the title of the HTML document (shown in the browser tab).
  • <body>: Contains the content of the HTML document.                                                                                       

2. Headings and Paragraphs:

  • <h1> to <h6>: Heading tags, where <h1> is the largest and <h6> is the smallest.
  • <p>: Paragraph tag.
<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Main Heading</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

3. Links:

  • <a>: Anchor tag for creating hyperlinks.
<a href="https://www.example.com">Visit Example.com</a>

4. Lists:

  • <ul>: Unordered list.
  • <ol>: Ordered list.
  • <li>: List item.
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

5. Images:

  • <img>: Image tag for embedding images.
<img src="image.jpg" alt="Description of the image">

6. Forms:

  • <form>: Form container.
  • <input>: Input field.
  • <label>: Label for an input field.
  • <button>: For crating the Button.
<form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    
    <button type="submit">Submit</button>
</form>

7. Comments:

  • <!-- Comment here -->: HTML comments.
<!-- This is a comment -->
<p>This is a paragraph.</p>

This is a paragraph.

8. Tables:

  • Tables are created using the <table> element, and rows are defined with <tr>. Cells within a row are defined with <td> (data cell) or <th> (header cell).
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

9. Divisions and Spans: 

<div> and <span> are container elements used for grouping and applying styles to other elements. <div> is a block-level container, and <span> is an inline container.

<div style="background-color: lightblue;">
    <p>This is inside a div.</p>
</div>
<p>This is outside the div.</p>

 

HTML