INTRODUCTION TO HTML

INTRODUCTION TO HTML(Hyber-Text Markup Language) 

HTML, or HyperText Markup Language, is a foundational technology used to create web pages. It is a markup language that structures content on the web and is one of the core technologies of the World Wide Web. HTML is not only pivotal for web development but also plays a crucial role in content presentation and layout.

HTML Document Structure

Every HTML document follows a specific structure. Here’s a breakdown:

1. <!DOCTYPE html>

This declaration defines the document as HTML5 and must be the first line in every HTML file.

2. <html>
The root element of an HTML page. Everything inside the <html> tag is considered part of the document.

3. <head>

The <head> section contains meta-information about the page, like the title, character set, or links to stylesheets.

  • <title>: Sets the title of the page, which appears in the browser tab.

4. <body>

The <body> section contains the actual content that the user sees on the web page, like headings, paragraphs, images, and links.

Basic HTML Tags:

These tags are fundamental for structuring simple web pages.

  • <h1> to <h6>: Headings, with <h1> being the largest and <h6> the smallest.
  • <p>: Defines a paragraph.
  • <a>: Anchor tag, used for creating hyperlinks (href attribute for the URL).
  • <img>: Embeds an image (src for the image URL and alt for alternative text).
  • <br>: Inserts a line break.
  • <hr>: Inserts a horizontal line.
  • <ul>: Unordered list (bulleted).
  • <ol>: Ordered list (numbered).
  • <li>: List item, used inside <ul> or <ol>.
  • <div>: Division, used to group block-level elements.
  • <span>: Inline container, used to group text or inline elements for styling.
  • <nav>: Defines a navigation section, typically for menus or links.
Forms Tags:

  • <form>:Defines a form for user input.
    • <input>: Input field for text, password, email, etc. (various type attributes like text, checkbox, radio).
    • <textarea>: Multi-line input field (text area).
    • <button>: Clickable button.
    • <select>: Drop-down menu.
    • <option>: Defines options inside a drop-down (<select>).
    • <label>: Associates a text label with a form element.

    Table Tags:

    <table>: Creates a table.
    • <tr>: Table row.
    • <td>: Table data cell.
    • <th>: Table header cell.
    • <thead>: Groups the table header content.
    • <tbody>: Groups the body content of the table.
    • <tfoot>: Groups the footer content of the table.

     Lists:

    List the items in Ordered or Un-ordered(<ul>, <ol>).

    Lists are used to display items in a structured way. You can create unordered lists with <ul> (bulleted) and ordered lists with <ol>(numbered). The items are defined using <li> (list item)

    Divisions:  <div>

    The <div> tag is a container used to group elements for styling or layout purposes:

    <div>
  <h2>Section Title</h2>
  <p>This is a paragraph within a div.</p>
</div>

    Image tag:<img>
    <img src ="/location/image.png"  alt="Image"/>
    src- source of the image
    alt - it's an alternative, when the image is unable to load on user screen the text in alt was displayed

    Link:
    <a href="https://example.com" target="_blank">Visit Example</a>
  • <href>: Specifies the URL the link points to.
  • target="_blank" : Opens the link in a new tab.

    • Conclusion
    HTML is the backbone of every website. Once you're familiar with these basic tags and structures, you'll be ready to start building your own web pages. Keep practicing by creating more complex layouts, and soon, you'll be mastering the art of web development!
    Stay tuned for more posts on styling your web pages using CSS and making them interactive with JavaScript!