Comprehensive Guide to HTML tags, Semantic Structures, and Web Architecture, and Attributes

Review of Web Fundamentals and Architecture

• Accessing Internet Resources:

  • Resources available over the internet are accessed using a URL (Uniform Resource Locator).
  • The process involves opening a browser, entering the URL, and hitting enter to initiate a request.

• Client-Server Architecture:

  • When a user sends a request via a URL, the server provides a response.
  • The specific resource returned in this response is typically an HTML document.
  • The browser's role is to take the HTML document, render its code, and display the resulting web page to the user.

• University Hosting Infrastructure:

  • At the University of Waikato, web pages are made available to others on the university internet by storing HTML documents in a specific folder named course_underscore_html (referenced as course_html).
  • The university server address is webapp.cms.waikato.ac.nz.
  • The URL structure to access a user's hosted file is: webapp.cms.waikato.ac.nz/~username/file_path.

• The Forgiving Nature of HTML:

  • Browsers are designed to be extremely forgiving toward HTML errors.
  • If a document contains broken tags or incomplete elements, the web page will not crash; the browser will attempt to complete the elements and render the page as best as it can.

Basic HTML Document Structure and Boilerplate

• File Extension:

  • Any HTML file must end with the .html extension to be recognized by the software.

• Boilerplate Code:

  • Every HTML document requires a standard structure known as "boilerplate code" before content is added.
  • In modern editors like VS Code, the boilerplate can be inserted using the shortcut: ! and then pressing Tab.

• Tab Titles:

  • The name displayed on the browser tab is controlled by the <title> tag located within the head of the document.

Core HTML Formatting Tags

• Heading Tags ($h1$ through $h6$):

  • These tags are used for titles and subsections.
  • $h1$ is typically reserved for the main title of the page (e.g., "University of Waikato").
  • $h2$ and $h3$ are used for secondary and tertiary headings respectively (e.g., "History," "Campuses," "Hamilton").

• Paragraph Tag ($p$):

  • Used to display large portions or blocks of text.

• Horizontal Rule ($hr$):

  • Displays a line that spans the entire width of the browser.
  • This is a self-closing tag, meaning it does not have a separate opening and closing tag.

• Line Break ($br$):

  • Used to add significant vertical space between elements.
  • Like the $hr$ tag, the $br$ tag is a self-closing tag.

• Unordered Lists ($ul$ and $li$):

  • Used to create bulleted lists.
  • $ul$ defines the unordered list container.
  • $li$ (List Item) defines each individual point within the list.

Semantic HTML and Document Meaning

• Definition: Semantic elements describe their meaning to both the browser and the developer, rather than just being structural containers. They make the document more meaningful without necessarily changing the visual layout.

• Primary Semantic Tags:

  • <header>: Used for introductory content, logos (e.g., the University of Waikato logo), and top-level navigation elements.
  • <main>: Contains the primary, unique content of the document.
  • <footer>: Contains information at the bottom of the page, such as references or legal notes.

• Internal Semantic Groupings:

  • <section>: Used to group thematically related content (e.g., a specific section for "History" or "Campuses").
  • <article>: Used for self-contained pieces of content.
  • <aside>: Used for content tangentially related to the main content.

Hyperlinks: Anchors and Attributes

• Anchor Tag ($a$):

  • Used to create hyperlinks that are clickable (text, images, or other elements).
  • Metaphor: Much like a ship uses an anchor to stay in a fixed position, an anchor tag creates a fixed reference point. However, it only becomes a functional link when an attribute is added.

• The Href Attribute:

  • href stands for hypertext reference.
  • An attribute consists of a name (e.g., href) and a value (the destination URL).
  • Example: <a href="https://facebook.com">Facebook Page</a>.

• Internal vs. External Hyperlinks:

  • External Hyperlinks: Lead to a different domain. These use Absolute URLs, which include every component of the URL (e.g., https://google.com).
  • Internal Hyperlinks: Lead to a location within the same domain. These use Relative URLs, which are determined based on the file path relative to the current document (e.g., contact.html).

The ID Attribute and Internal Navigation

• ID Attribute:

  • Gives a specific element a unique identity or "name."
  • Syntax: <h2 id="references">References</h2>.
  • If the same ID is used multiple times on one page, the browser will generally prioritize the first instance it finds.

• Fragment Identifiers:

  • To link to a specific ID on the same page, the href value must start with a hashtag (#) followed by the ID name.
  • Example: <a href="#references">Go to References</a>.
  • Clicking this link will scroll the browser to the element with that specific ID.
  • Note: Smooth transition effects for these jumps require CSS and are not provided by default HTML.

Image Implementation

• Image Tag ($img$):

  • A self-closing tag used to embed images.

• Key Attributes for Images:

  • src (Source): The path to the image, which can be an Absolute URL (web address) or a Relative URL (local file).
  • alt (Alternative Text): A description of the image for screen readers or as a fallback if the image fails to load.

• Clickable Images:

  • An image is made clickable by wrapping the $img$ element inside an $a$ (anchor) element.

Block vs. Inline Level Elements

• Block Level Elements:

  • Take up the entire width of the page by default.
  • Examples: $h1$, $h2$, $p$, $div$.

• Inline Level Elements:

  • Only take up as much space as the content requires.
  • They sit next to each other on the same line if space permits.
  • Examples: $a$, $img$, $span$.

HTML Tables

• Basic Construction:

  • <table>: The container for the table.
  • <tr> (Table Row): Defines a horizontal row of cells.
  • <th> (Table Heading): Defines a header cell, usually bolded and centered by default. Used in the first row.
  • <td> (Table Data): Defines a standard data cell.

• Versatility: Table cells can contain text, images, or other HTML elements.

Comments and Containers

• Common Containers:

  • <div>: A block-level container used to group elements together for structural purposes. It can force inline elements to behave like block-level elements by wrapping them.
  • <span>: An inline-level container used primarily for styling small specific parts of content (e.g., a single word inside a header).

• HTML Comments:

  • Used for developer notes or "To-Do" lists that are not visible to the user on the web page.
  • Syntax: <!-- comment goes here -->.

Reserved Characters and HTML Entities

• Problem: Certain characters (like < and >) are reserved for HTML syntax. If a developer wants to display these characters literally as text, they must use HTML Entities.

• Common Entities:

  • All entities start with an ampersand (&) and end with a semicolon (;).
  • Less than (<): <
  • Greater than (>): >
  • Ampersand (&): &

Questions & Discussion

• Question: What happens if there are duplicate IDs on a page?

• Answer: The browser will prioritize the first one it encounters when performing a jump or navigation via a fragment identifier.

• Question: Can we have smooth scrolling transitions within a page using only HTML?

• Answer: No; smooth transitions require CSS, which is covered in later weeks (specifically Week 3).

• Question: How do you display the text < on a page if the ampersand itself is reserved?

• Answer: You must use the entity for the ampersand (&) followed by the letters, such as <. This will render the literal string < in the browser.