Introduction to HTML and Advanced HTML5

HTML Fundamentals

  • HTML (HyperText Markup Language) structures web page content, defining page structure rather than execution logic.

  • Web browsers receive HTML files via HTTP requests and render them visually.

  • Core document components:

    • <!DOCTYPE html>: Specifies the document as HTML5.

    • <html>: Root element wrapping the document.

    • <head>: Stores document metadata, scripts, and links not directly displayed.

    • <body>: Contains all visible page content.

  • Key markup terminology:

    • Tag: Individual opening or closing markers (e.g., <a>, </a>).

    • Element: Complete block from opening tag to closing tag inclusive of content.

    • Attribute: Modifiers inside an opening tag providing extra details (e.g., href="...").

  • Basic text tags:

    • <h1>–<h6>: Document headings ranked by priority.

    • <p>: Standard paragraph block.

    • <br>: Line break element.

    • <strong> / <b>: Bold formatting (<strong> denotes importance).

    • <em> / <i>: Italic formatting (<em> denotes emphasis).

    • <mark>: Highlights selected text.

Links, Images, and Content Structure

  • Hyperlinks: Tagged with <a href="URL">; adding target="_blank" forces destination pages to open in a new tab.

  • Images: Included using the self-closing ` tag, wheresrcpoints to the image file andalt` specifies fallback text for accessibility.

  • Lists:

    • <ul>: Unordered list rendered with bullet points.

    • <ol>: Ordered list rendered with numbers.

    • <li>: Represents individual entries inside lists.

  • Containers:

    • <div>: Block-level layout container that breaks onto a new line.

    • <span>: Inline layout container used to wrap inline text without breaking flow.

HTML Tables

  • Tables organize tabular data into structured rows and columns; they are not intended for general page layout.

  • Structural tags:

    • <table>: Main container element.

    • <tr>: Table row container.

    • <th>: Header cell (bold text by default).

    • <td>: Table data cell.

  • Spanning attributes:

    • colspan: Merges a single cell horizontally across multiple columns.

    • rowspan: Merges a single cell vertically across multiple rows.

HTML Forms

  • Forms collect user input and submit data using <form action="URL" method="POST"> attributes.

  • Primary input types (<input type="...">): text, email, password, checkbox, radio, and submit.

  • Core form elements:

    • <label>: Accessible descriptive text linked to input fields.

    • <textarea>: Multi-line text entry field.

    • <select> and <option>: Dropdown selection lists.

    • <button>: Triggers form submission or associated scripts.

  • Client-side validation attributes:

    • required: Prevents submission if the input field is empty.

    • placeholder: Displays temporary prompt text inside empty fields.

Semantic HTML and Best Practices

  • Semantic Elements: Tags that explicit set meaning (<header>, <nav>, <main>, <section>, <article>, <footer>) over non-descriptive <div> containers.

  • Advantages of semantic markup include screen reader accessibility, improved SEO rankings, and cleaner code maintenance.

  • Essential coding practices:

    • Provide descriptive alt attributes for every <img> tag.

    • Ensure opening tags are properly closed.

    • Indent nested structure elements consistently.

    • Reserve <table> strictly for data displays.