We started the class with a revision of the previous class as usual with, Introduction to HTML, HTML document structure, importance of HTML and so on... You can go through the previous class here for more context this is what our instructor taught us this week.
Understanding Semantic HTML
Semantic HTML involves using HTML elements that reflect the meaning and purpose of the content, rather than focusing solely on how it looks visually. This approach enhances the clarity and structure of the content, making it easier for both users and machines—such as search engines and assistive technologies—to interpret.
Prioritizing Meaning Over Appearance
The key principle here is to select HTML elements based on their semantic significance. For instance, an <h1> tag should not be used merely for its default large and bold styling; instead, it should denote the primary heading or title of the content. By adhering to this practice, developers create more meaningful, accessible web pages that better serve user needs and improve search engine optimization.
Non – Semantic Markup Example
<div>
<div>Semantic Markup</div>
<div>
<span>one word</span>
<span>one word</span>
<span>one word</span>
<span>one word</span>
</div>
</div>
<div>
<div>
<div>five words</div>
</div>
<div>
<div>three words</div>
<div>forty-six words</div>
<div>forty-four words</div>
</div>
</div>
<div>
<div>five words</div>
</div>
Semantic Markup Example
<header>
<h1>Semantic Markup</h1>
<nav>
<a>one word</a>
<a>one word</a>
<a>one word</a>
<a>one word</a>
</nav>
</header>
<main>
<header>
<h1>five words</h1>
</header>
<section>
<h2>three words</h2>
<p>forty-six words</p>
<p>forty-four words</p>
</section>
</main>
<footer>
<p>five words</p>
</footer>
Accessibility and Machine-Readability in Semantic HTML
Semantic markup plays a crucial role in enhancing both accessibility and machine-readability of web content. For example, browser developer tools can illustrate how the Accessibility Object Model (AOM) interprets semantic versus non-semantic markup differently. Assistive technologies, such as screen readers, depend on the AOM to accurately understand the structure and meaning of the content.
Roles and Landmarks
Within semantic HTML, roles and landmarks are essential concepts. Elements like <header>, <nav>, <main>, and <footer> come with implicit roles that designate them as landmarks for assistive technologies. This designation allows users, especially those relying on screen readers, to navigate web content more efficiently. By using semantic elements, developers can significantly improve the user experience for individuals with disabilities, making websites more inclusive and easier to navigate.
Using the Role Attribute in Semantic HTML
While semantic elements come with built-in implicit roles, the role attribute can also be applied to any HTML element to designate a specific role. However, it is generally advised to use the appropriate semantic element rather than relying solely on the role attribute. For example:
<div role="banner">
<span role="heading" aria-level="1">Three words</span>
<div role="navigation">
<a>one word</a>
</div>
</div>
Choosing the Right Elements
The emphasis here is on selecting the most suitable HTML elements based on their semantic meaning and functionality, rather than their visual characteristics. Developers should consider questions like, "Which element accurately reflects the purpose of this section?" when constructing HTML. Utilizing semantic HTML is vital for enhancing accessibility, improving machine-readability, and providing a clearer structure and meaning to content. This practice not only benefits users but also contributes to better web development standards overall.
HTML Elements for Structuring Content
In HTML, various semantic elements help organize content effectively:
<header>: This element is used for introductory content at the top of a page, section, or article. It can include elements like logos, titles, and navigation menus.<nav>: This tag wraps major navigation blocks, such as menus, making it clear where users can find links to different sections of the site.<main>: Representing the primary content area unique to a specific page, there should only be one element per page to clarify the main focus of that content.<article>: Ideal for self-contained pieces of content, such as blog posts or news articles, which can be distributed or reused independently.<section>: This element groups related content, such as chapters or parts of a guide, to create a logical structure within the document.<aside>: Used for content that is tangentially related to the main content, like sidebars or supplementary information, helping to keep the main flow distinct.<footer>: This tag is reserved for footer content, including copyright notices, contact details, or related links at the bottom of a page, section, or article.
By using these semantic elements appropriately, developers can create well-structured, meaningful web pages that enhance both user experience and accessibility.
HTML Attributes
In HTML, there are two main types of attributes: Boolean attributes and Enumerated attributes.
Boolean Attributes
Boolean attributes are those that, when present, are always considered true. Examples include attributes like autofocus, checked, disabled, and required. If any of these attributes are included in an element, it signifies that the element is, for instance, disabled or required. Notably, the presence of the attribute alone suffices, and it does not require a value. For example:
<input required>
<input required="">
<input required="required">
All three variations indicate that the input is required.
Enumerated Attributes
Enumerated attributes, on the other hand, can be a bit confusing as they have a predefined set of valid values. If an enumerated attribute is present without a specified value, it defaults to a specific value. For instance, using the contenteditable attribute in a <style> tag without a value:
<style contenteditable>
This is equivalent to writing:
<style contenteditable="true">
By understanding these attribute types, developers can use HTML more effectively, ensuring proper functionality and behaviour of web elements.
Overview of Global Attributes in HTML
Global attributes in HTML are flexible attributes that can be used with any HTML element, including those in the <head> section. There are over 30 such attributes, but their effects can differ based on the specific element. For example, applying the hidden attribute to a <meta> tag has no visible effect since meta content is not rendered on the page.
Important Global Attributes
- id: This attribute provides a unique identifier for an element, serving various functions such as:
Targeting a link’s fragment identifier.
Identifying elements for scripting.
Associating a label with form elements.
Offering descriptions for assistive technologies.
Enhancing CSS targeting specificity.
class: The class attribute allows for styling and targeting elements with CSS and JavaScript. It can hold a space-separated list of case-sensitive class names, which are particularly useful in frameworks and component libraries.
style: This attribute applies inline CSS styles directly to an element. Its value consists of property-value pairs, formatted like a CSS block. For example:
<div style="color: red; font-size: 16px;">
This text is red and 16 pixels in size.
</div>
- tabindex: The tabindex attribute can be added to any element to make it focusable. It defines the element's position in the tab order:
A negative value (like -1) allows focus via JavaScript but excludes it from the tab sequence.
A value of 0 makes the element focusable and part of the default tab order.
Positive values prioritize focus but are generally discouraged.
hidden: This attribute hides an element from view while keeping it in the DOM.
inert: This boolean attribute, when present, causes the browser to ignore user input events for the element and its children, including focus and interaction from assistive technologies.
lang: This attribute specifies the language of the element's content, improving accessibility and search engine optimization.
aria-*(ARIA attributes): These attributes enhance accessibility for users with disabilities by providing additional semantic information about the elements, making it easier for assistive technologies to interpret the content.
Additional global attributes include dir, draggable, spellcheck, title, and accesskey. By effectively using these global attributes, developers can significantly improve the functionality, accessibility, and styling of their HTML documents.
Role Attribute
The role attribute enhances the semantic meaning of content, allowing screen readers to convey the expected user interactions. For example:
<div role="banner">
<span role="heading" aria-level="1">Three words</span>
<div role="navigation">
<a>one word</a>
<a>one word</a>
</div>
</div>
In this example, the roles clarify the structure and function of the elements for assistive technologies.
ARIA Attributes
WAI-ARIA attributes like aria-* improve accessibility for users with disabilities. For instance, to create a checkable menu item, you can use the following code:
<li role="menuitemcheckbox" aria-checked="true">Sort by Last Modified</li>
With CSS, you can style the checked state:
[aria-checked="true"] { font-weight: bold; }
[aria-checked="true"]::before { background-image: url(checked.gif); }
Contenteditable Attribute
The contenteditable attribute makes an element editable and focusable. It can take values like true or false, with a default of inherit when not specified. Here are equivalent ways to set the attribute:
<style contenteditable>
<style contenteditable="">
<style contenteditable="true">
If set to false, as in <style contenteditable="false">, the element becomes non-editable, unless it’s inherently editable, like a <textarea>.
Custom Data Attributes
Custom attributes can be created using the data-* prefix, allowing developers to store extra information about an element without using non-standard attributes. Examples include:
<blockquote data-machine-learning="workshop"
data-first-name="Blendan" data-last-name="Smooth"
data-formerly="Margarita Maker" data-aspiring="Load Balancer"
data-year-graduated="2022">
HAL and EVE could teach a fan to blow hot air.
</blockquote>
<div data-user-id="12345" data-role="admin"></div>
<article id="electric-cars" data-columns="3" data-index-number="12314" data-parent="cars"> </article>
These data-* attributes can be accessed in JavaScript through the dataset property of an element, making it easy to retrieve and manipulate additional information associated with HTML elements.
By utilizing these attributes effectively, developers can enhance the accessibility, interactivity, and data handling capabilities of their web applications.
Overview of Text Elements in HTML
HTML provides a variety of elements for structuring text, ensuring clarity and organization in web documents.
Headings
The heading elements, ranging from <h1> to <h6>, are used to create a hierarchy of titles, with <h1> representing the most important heading. It is recommended to have only one <h1> per page, followed by subsequent headings in a logical order (e.g., <h2>, <h3>, etc.). This structure aids in both readability and SEO.
Paragraphs and Quotes
<p>: This element is used for regular paragraph text, allowing for clear separation of ideas.<blockquote>: Designed for longer quoted passages, this element can include a tag to attribute the source of the quote. For example:
<blockquote cite="https://example.com">
"This is a famous quote."
</blockquote>
-
<cite>: This element is used to reference the source of a quote or creative work, providing context and credibility.
HTML Entities
HTML entities are special character codes that begin with an ampersand (&) and end with a semicolon (;). They are useful for displaying characters that are reserved in HTML or not easily typed on a keyboard. Notable examples include:
©for the copyright symbol(©)<for the less-than symbol(<)>for the greater-than symbol(>)™for the trademark symbol(™)
Additional Text Elements
Other useful text-related elements include:
<q>: For inline quotes.<sub> and <sup>: For subscript and superscript text.<mark>: To highlight text.<strong> and <em>: To emphasize text, with<strong>indicating strong importance and<em>for emphasis.<code>: To display code snippets.<pre>: For preformatted text, maintaining whitespace and line breaks.<br>: To insert line breaks.
Links in HTML
In HTML, links are created using the <a> element, formatted as <a href="url">Link Text</a>. The href attribute specifies the destination URL or file path that the link points to.
Link Attributes
target: This attribute dictates how the link opens. For instance, using
target="_self"opens the link in the same window, whiletarget="_blank"opens it in a new window or tab.download: This attribute prompts a download of the linked file instead of opening it in the browser. For example:
<a href="file.pdf" download>Download PDF</a>
Descriptive Link Text
It's crucial to use descriptive link text that conveys meaning even when taken out of context. Instead of generic phrases like "Click here," opt for more informative phrases, such as "Read more about accessibility."
Fragment Identifiers
Fragment identifiers allow users to link directly to specific sections of a page. This is achieved using the id attribute in the target section. For instance:
<a href="#section">Link Text</a>
Additionally, many websites provide a "skip to content" link at the top of the page, enabling keyboard users to bypass navigation and jump straight to the main content. This can be implemented as follows:
<a href="#main-content">Skip to main content</a>
URL Types
Absolute URLs: These include the full web address. For example:
<a href="https://www.oluwasetemi.dev">Visit My Website</a>Relative URLs: These are shorter and specify the path from the current page, making them useful for internal links. An example would be:
<a href="/about">About Us</a>
Navigation in HTML
The element is used to enclose major navigation sections, such as menus, providing a semantic way to define navigation links on a webpage.
List Elements
<ul>: This element creates an unordered list, which typically displays items with bullet points.<ol>: This element generates an ordered list, where items are displayed with numbers or other indicators to denote their sequence.<li>: This tag is used for individual list items within either<ul>or<ol>elements.
Example of Navigation Structure
Here’s an example of a breadcrumb navigation structure using these elements:
<nav aria-label="breadcrumbs">
<ol role="list">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/learn">Learn</a>
</li>
<li>
<a href="/learn/html">Learn HTML!</a>
</li>
<li aria-current="page">
Navigation
</li>
</ol>
</nav>
In this example, the element wraps an ordered list (
- ) that outlines the navigation path. Each
- represents a specific link, and the aria-current="page" attribute indicates the current page in the navigation context. This structure not only enhances user experience but also improves accessibility for assistive technologies.
HTML Tables
HTML tables are designed for presenting tabular data organized into rows and columns. They serve as a semantic tool for structuring information that requires comparison, sorting, calculation, or cross-referencing.
Table Structure
The basic structure of a table is defined by the
<caption>: This element provides a descriptive title for the table, offering context to the data presented.<thead>: This section contains the header rows of the table, typically used for column titles.<tbody>: This part holds the main data rows of the table.<tfoot>: This optional section can include footer rows, often used for summary information or totals.
Within these sections, you'll employ:
<tr>: This tag represents a table row.<th>: This element designates table header cells, which are usually bolded and centered.<td>: This element denotes table data cells, where the actual data is displayed.
Example of an HTML Table
Here’s a simple example of an HTML table:
<table>
<caption>Monthly Sales Data</caption>
<thead>
<tr>
<th>Month</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$1,000</td>
</tr>
<tr>
<td>February</td>
<td>$1,200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$2,200</td>
</tr>
</tfoot>
</table>
In this example, the table illustrates monthly sales data, with a clear header, body, and footer. This structured approach not only enhances readability but also improves the accessibility of the information presented.
Accessibility and Semantics in HTML Tables
Proper table structure and the use of semantic elements are essential for ensuring accessibility. Assistive technologies, such as screen readers, depend on this structure to interpret tabular data and its relationships effectively.
Semantic Elements
The
<th>element is crucial, as it automatically carries implicit ARIA roles of eithercolumnheaderorrowheader, based on thescopeattribute. This attribute can be set to values likecol,row,colgroup, orrowgroupto clearly define the header's scope.For more complex tables, the headers attribute can be utilized to link data cells to their corresponding header cells, enhancing clarity for users of assistive technologies.
Merging Cells
Similar to spreadsheet applications like Microsoft Excel and Google Sheets, HTML allows for merging cells. This is achieved using:
colspan: This attribute merges two or more adjacent cells within a single row. For example:
<td colspan="2">Merged Cell</td>rowspan: This attribute merges cells vertically across multiple rows and is applied to the cell in the top row. For instance:
<td rowspan="2">Merged Cell</td>
Styling and Responsiveness
While tables can be styled using CSS, it is advisable to avoid deprecated attributes like cellpadding, cellspacing, or align. Instead, modern CSS properties such as border-collapse, border-spacing, and caption-side should be utilized for better styling and responsiveness.
I am Ikoh Sylva a Cloud Computing Enthusiast with few months hands on experience on AWS. I’m currently documenting my Cloud journey here from a beginner’s perspective. If this sounds good to you kindly like and follow, also consider recommending this article to others who you think might also be starting out their cloud journeys to enable us learn and grow together.
You can also consider following me on social media below;
Top comments (0)