HTML Basics

HTML (HyperText Markup Language) is the language used to create web pages. It provides the structure for content, such as text, images, and links.

1. What is HTML?

HTML uses tags to structure and define the elements of a webpage. Each element has an opening tag, content, and a closing tag. For example:

<p>This is a paragraph.</p>

Try It Now

  • <p>: Opening tag
  • This is a paragraph.: Content
  • </p>: Closing tag

2. Basic Structure of an HTML Document

Every HTML document has a basic structure that browsers understand:

<!DOCTYPE html>
<html>
<head>
  <title>My First HTML Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>Welcome to my first webpage.</p>
</body>
</html>

Try It Now

Explanation:

  • <!DOCTYPE html>: Declares the document type as HTML5.
  • <html>: The root element of the HTML document.
  • <head>: Contains metadata, such as the title and links to stylesheets.
  • <title>: Sets the title of the webpage (visible in the browser tab).
  • <body>: Contains the visible content of the webpage.

3. Common HTML Tags

Text Formatting Tags

  • <h1> to <h6>: Headings, where <h1> is the largest and <h6> is the smallest. 
    <h1>Main Heading</h1>
<h2>Subheading</h2>

    Try It Now

  • <p>: Paragraph. 
    <p>This is a paragraph.</p>

    Try It Now

  • <b>: Bold text. 
    <b>Bold text</b>

    Try It Now

  • <i>: Italic text. 
    <i>Italic text</i>

    Try It Now

  • <u>: Underlined text. 
    <u>Underlined text</u>

    Try It Now

Links and Images

  • <a>: Hyperlinks. 
    <a href="https://example.com">Visit Example</a>

    Try It Now

  • <img>: Images (self-closing tag). 
    <img src="image.jpg" alt="Description of the image">

    Try It Now

Lists

  • Ordered List: 
    <ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

    Try It Now

  • Unordered List: 
    <ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

    Try It Now

Tables

  • Tables are used to display data in rows and columns. 
    <table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
</table>

    Try It Now

Forms

  • Forms collect user input. 
    <form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <button type="submit">Submit</button>
</form>

    Try It Now

4. HTML Attributes

Attributes provide additional information about an element. They are added within the opening tag.

Examples:

  • Adding Links: 
    <a href="https://example.com" target="_blank">Open Example</a>

    Try It Now

    • href: Specifies the URL.
    • target="_blank": Opens the link in a new tab.
  • Adding Styles: 
    <p style="color:blue;">This is a blue paragraph.</p>

    Try It Now

  • Adding Classes and IDs: 
    <p class="intro">This is an introduction.</p>
<p id="unique">This is unique.</p>

    Try It Now

5. HTML Comments

Comments are ignored by the browser and are used for documentation:

<!-- This is a comment -->

Try It Now

6. Advanced Tags

Div and Span

  • <div>: A container for grouping elements. 
    <div>
  <h1>Title</h1>
  <p>Content inside a div.</p>
</div>

    Try It Now

  • <span>: Used to style inline content. 
    <p>This is a <span style="color:red;">red</span> word.</p>

    Try It Now

Iframes

  • Used to embed other websites. 
    <iframe src="https://example.com" width="300" height="200"></iframe>

    Try It Now

Try all together

Try It Now