HTML Basics Quiz

Study Notes

HTML Basics

HTML, or Hypertext Markup Language, is a fundamental technology for structuring and formatting content on the web. It organizes text, images, links, and other elements into a coherent, interactive experience. HTML is written using tags—elements enclosed in angle brackets < and >—that define the structure and semantics of content.

HTML Attributes

HTML attributes are specifications within tags that provide additional information about how the element should be displayed or behave. Attributes are defined in the form name="value" and often influence the appearance, behavior, or meaning of the containing element.

HTML Tags

HTML tags are elements enclosed in angle brackets that provide structure and semantics to content. Here are some common tags:

<html>: The root element that encloses all other elements in an HTML document.
<head>: Contains metadata and scripting information.
<body>: Contains the main content of the document.
<h1> - <h6>: Defines headings for document structure.
<p>: Defines a paragraph.
<ol> and <ul>: Create ordered and unordered lists, respectively.
<img>: Specifies an image.
<a>: Defines a hyperlink.

HTML Forms

HTML forms are used to collect user input and submit it to a web server. Forms are created using the <form> tag and may include several input elements such as <input>, <select>, <textarea>, and <button>.

HTML Tables

HTML tables are used to display tabular data. They are created using the <table> tag and may include headers (<th>), data cells (<td>), row headers (<th>), and row groups (<tr>).

Example of HTML5 Structure

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Page Title</title>
  </head>

  <body>
    <header>
      <h1>My Page Header</h1>
    </header>
    <main>
      <article>
        <h2>Article Title</h2>
        <p>Article content goes here...</p>
      </article>
      <article>
        <h2>Another Article Title</h2>
        <p>Another article content goes here...</p>
      </article>
    </main>
    <footer>
      <p>Page footer content</p>
    </footer>
  </body>

</html>

In this example, we have a basic HTML5 structure with a header, main content containing two <article> elements, and a footer. This document uses semantic elements like <header>, <main>, and <article> to provide meaning to the content. The <meta> tags define the document encoding and viewport settings, and the <title> element sets the document title.

HTML is a simple but powerful tool for organizing and structuring web content. By using HTML's semantic tags and attributes, web developers can create meaningful, accessible, and user-friendly web pages.