Before Semantic HTML the elements didn’t have any meaning as to what it does or what content goes in it. An element such as <div> was used as a general-purpose element to create things from headers to footers to articles. With Semantic HTML we were introduced to elements that tell developers and browsers exactly what it does and what content should go in it.

JS Interaction without JS:

  1. Creating Popup MODAL:

This HTML snippet creates a modal dialog using the <dialog> element along with an anchor tag <a> acting as a trigger to open the modal.

<a class="modalTrigger" id="modalTrigger"
   href="#modalDialog">
	Open dialog
</a>

<dialog class="modal" id="modalDialog" tabindex="-1" role="dialog">
  <div>
	  <a href="#modalTrigger" aria-label="Close">
	  	&times;
	  </a>
	  <p>Hello Beautiful!</p>
  </div>
</dialog>

// Modal hidden until it matches an anchor target 
// Note: you can't close it with the escape key 
// or trap focus inside of it.
.modal {
  opacity: 0;
  visibility: hidden;
}

// modal fades in when it matches
// an anchor link (i.e. clicked on)
#modalDialog:target {
  opacity: 1;
  visibility: hidden;
}

<a href="#modalDialog" class="modalBtn" id="modalTrigger">Click me to open</a>:
  • This anchor tag serves as the trigger to open the modal dialog. When clicked, it references the id of the <dialog> element (#modalDialog) in its href attribute.
<dialog class="modal" id="modalDialog" tabindex="-1">:
  • This is the <dialog> element representing the modal dialog itself. It has the class “modal” for styling purposes.
  • id=”modalDialog” is used as a reference point for the anchor tag to open the dialog.
  • tabindex=”-1″ ensures that the dialog is not focusable by default, which prevents it from being accessible via keyboard navigation until it’s opened.
<div> inside <dialog>:
  • This <div> contains the content of the modal dialog.
  • It can contain any desired content, such as text, images, forms, etc.
<a href="#modalTrigger" class="close" aria-label="Close dialog">&times;</a>:
  • This anchor tag acts as a close button for the modal dialog.
  • It has href=”#modalTrigger” to close the modal by referencing the trigger element’s id.
  • aria-label=”Close dialog” provides an accessible label for screen readers.
<p>Hello Beautiful!</p>:
  • This is just a placeholder content within the modal dialog.

2. Creating Accordion:

This is an HTML structure for an accordion component commonly used in web development for organizing and displaying content in a collapsible manner. Let’s break it down:

  • <div class=”accordion-item”>: This is the container for each individual accordion item.
  • <input id=”accordion-trigger-1″ class=”accordion-trigger-input” type=”checkbox”>: This is an input element of type checkbox, used as a trigger to expand or collapse the accordion item. The unique ID is associated with the label to toggle the accordion item’s state.
  • <label class=”accordion-trigger” for=”accordion-trigger-1″>Accordion item 1</label>: This is the label associated with the checkbox input. Clicking on this label toggles the checkbox, thereby expanding or collapsing the accordion item.
  • <section class=”accordion-animation-wrapper”>: This is a wrapper element used for animation purposes, typically to animate the expansion and collapse of the accordion item’s content.
  • <div class=”accordion-animation”>: This is another wrapper element for animation, nested within the animation wrapper.
  • <div class=”accordion-transform-wrapper”>: This is another wrapper element that can be used for additional transformations, if needed.
  • <div class=”accordion-content”>: This is the actual content of the accordion item, which includes a heading (<h2>) and paragraphs (<p>).

This CSS code is responsible for styling and animating the accordion component described in the HTML structure provided earlier. Let’s break down each part:

  • .accordion-animation-wrapper: This class is applied to the wrapper element containing the content of each accordion item. It utilizes CSS Grid to control the sizing of the rows. Here’s a breakdown of its properties:
  • display: grid;: This sets the display property of the element to grid, enabling the use of CSS Grid layout.
  • grid-template-rows: 0fr;: This sets the height of the rows to 0, effectively hiding the content initially.
  • overflow: hidden;: This property ensures that any content exceeding the defined grid size will be hidden.
  • transition: grid-template-rows var(–transitionLength) var(–transitionTiming);: This sets up a transition effect for changing the grid-template-rows property. The transition duration and timing function are defined using CSS variables (–transitionLength and –transitionTiming).

.accordion-trigger-input:checked ~ .accordion-animation-wrapper: This is a CSS selector that targets the .accordion-animation-wrapper element when its preceding checkbox input is checked (i.e., when the accordion item is expanded). It adjusts the grid-template-rows property to reveal the content by setting it to 1fr, allowing the content to take up the full available height.

.accordion-animation: This class is applied to another wrapper element within the accordion item. It ensures that the minimum height of this element is 0, allowing the content to collapse fully when the accordion item is closed.

3. Creating Lightbox:

This HTML code represents a thumbnail gallery with a lightbox functionality. Let’s break it down:

Thumbnail Gallery:

  • The thumbnails are wrapped in <a> tags, which link to the corresponding larger images.
  • Each thumbnail image has a class of “thumbnail”.
  • The href attribute of each <a> tag points to an anchor ID corresponding to the larger image.
<!-- thumbnail image wrapped in a link -->
<a href="#img1">
  <img src="img.jpg" class="thumbnail">
</a>


<!-- lightbox container hidden with CSS -->
<a href="#" class="lightbox" id="img1">
  <img src="img.jpg">
</a>

Lightbox Container:

  • There are larger images wrapped in <a> tags with the class “lightbox”.
  • These larger images are hidden by default using CSS.
  • The href attribute of each <a> tag is set to “#”, meaning it doesn’t link anywhere (used for JavaScript functionality).
  • Each larger image has an id attribute corresponding to the anchor ID used in the thumbnail links.
.thumbnail {
  max-width: $thumbnail-size;
}
.lightbox {
  // Hide lightbox image
	display: none;
	// Position/style of lightbox
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: $background-color;
}
.lightbox img {
	/// Pad the lightbox image
	max-width: 90%;
	max-height: 80%;
	margin-top: 2%;
}
.lightbox:target {
	// Remove default outline and unhide lightbox
	outline: none;
	display: block;
}

This additional code appears to be SaSS code, a preprocessor scripting language that is interpreted or compiled into CSS. Here’s a breakdown of the code:

Variables:

  • $thumbnail-size is a variable set to 80px, which defines the maximum width of thumbnail images.
  • $background-color is a variable set to rgba(0,0,0,.8), which defines the background color for the lightbox container with 80% opacity.

Thumbnail Styling:

  • .thumbnail class styles the thumbnail images.
  • max-width limits the maximum width of thumbnail images to $thumbnail-size.
  • margin adds a 1em margin around each thumbnail.
  • float: left floats the thumbnails to the left, allowing them to be displayed horizontally.

Lightbox Styling:

  • .lightbox class styles the lightbox container.
  • display: none hides the lightbox image by default.
  • Various properties position and style the lightbox:
    • position: fixed fixes the position of the lightbox.
    • z-index: 999 sets the stacking order of the lightbox above other elements.
    • width: 100% and height: 100% ensure the lightbox covers the entire viewport.
    • text-align: center centers the content within the lightbox.
    • top: 0 and left: 0 position the lightbox at the top left corner of the viewport.
    • background: $background-color sets the background color of the lightbox.

Lightbox Image Styling:

  • .lightbox img class styles the images within the lightbox.
  • max-width: 90% and max-height: 80% limit the size of the lightbox image to 90% of the width and 80% of the height of the viewport.
  • margin-top: 2% adds a top margin of 2% to the lightbox image.

Displaying Lightbox:

  • .lightbox:target selector targets the lightbox when its corresponding anchor ID is the target.
  • outline: none removes the default outline.
  • display: block displays the lightbox when it is targeted.

Body Styling:

  • margin: 1em adds a 1em margin to the body.
  • text-align: center centers the text content within the body.

Thumbnail Wrapper Styling:

  • .thumb-wrapper class styles the container for thumbnail images.
  • display: flex sets the display property to flex to enable flexbox layout.
  • align-items: center centers the items vertically within the container.
  • justify-content: center centers the items horizontally within the container.

4.  Creating NavTabs:

This HTML code represents a simple tab interface. Let’s break it down:

<div class="tabs">    
   <div class="tab">
       <input type="radio" name="tabgroup" id="tab-1" checked>
       <label for="tab-1">Label One</label>
       <div class="content">
          <p>Tab One Content</p>
       </div> 
   </div>
   <div class="tab">
       <input type="radio" name="tabgroup" id="tab-2">
       <label for="tab-2">Label Two</label>
       <div class="content">
           <p>Tab Two Content</p>
       </div> 
   </div>
    <div class="tab">
       <input type="radio" name="tabgroup" id="tab-3">
       <label for="tab-3">Label Three</label>
       <div class="content">
           <p>Tab Three Content</p>
       </div> 
   </div>
</div

Tabs Container (.tabs):

  • Wraps all the tabs.

Individual Tab (.tab):

Each tab consists of:

  • An <input> element with type “radio” and a unique id within the same name group.
  • A <label> element associated with the corresponding input via the for attribute.
  • A <div> element with class “content” containing the content to be displayed when the tab is selected.

Tab Content (.content):

  • Contains the content to be displayed when the tab is selected.
  • This content is wrapped within a <div> element with the class “content”.

Tab Labels:

  • The text for the tab labels (“One”, “Two”, “Three”) is specified within the <label> elements.

Initial Selection:

  • The tab with checked attribute is initially selected (tab-1 in this case).
.tab [type="radio"] {
    position: absolute;
    height: 0;
    width: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    &:focus + label {
        outline: 2px dotted black;
    }
}
.content {
    position: absolute;
    top: 1em;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}
[type="radio"]:checked ~ label {
    z-index: 2;
}
[type="radio"]:checked ~ label ~ .content {
    z-index: 1;
    opacity: 1;
}

This additional code is a combination of Sass and CSS styles for the tab interface you provided earlier. Here’s a breakdown of the styles:

  • Tabs Container (.tabs):
    • Positioned relative to its containing block.
    • Height set to 180px for all tab groups.
    • Displayed as a block element.
    • Centered horizontally with auto margin.
    • Width set to 460px.
  • Individual Tab (.tab):
    • Floated to the left.
    • Label Styling:
      • Cursor set to pointer to indicate interactivity.
      • Background color set to #c69.
      • Font size set to 1.2em.
      • Border radius applied to create rounded corners (5px on the top).
    • Radio Button Styling:
      • Positioned absolutely to remove them from the document flow.
      • Clipped to make them invisible.
      • On focus, the adjacent label gets a dotted outline.
      • When checked, the adjacent label’s background color changes to #c99.
      • When checked, the content associated with the tab becomes visible (z-index set to 1).
  • Tab Content (.content):
    • Background color set to wheat.
    • Border set to 1px solid #c69.
    • Border radius applied to create rounded corners (5px on the bottom).
    • Padding applied to the content area.
    • Positioned absolutely to overlay the tabs.
    • Width set to 100% to cover the entire width of the tab container.
    • Positioned 2em from the top to avoid overlapping with the tabs.
    • Positioned from left: 0, right: 0, bottom: 0 to stretch the content to fill the tab container vertically.
  • Body Styling:
    • Font family set to monospace.
    • Font size set to 1.1em.

Briefing Semantic HTML:

Semantic HTML refers to using HTML elements that carry meaning beyond just formatting to structure the content of a webpage in a meaningful way. These elements provide context to both browsers and developers, making the content more accessible, search engine-friendly, and easier to understand and maintain. Here’s a brief overview of some common semantic HTML elements:

  • <header>: Represents introductory content or a group of navigational links at the top of a document or section.
  • <nav>: Defines a container for navigation links, typically used for menus, tables of contents, or other navigational blocks.
  • <main>: Contains the main content of the document, excluding header, footer, and sidebar content.
  • <section>: Defines sections in a document, typically with a heading, used to group related content together.
  • <article>: Represents independent, self-contained content, such as a blog post, forum post, or news article.
  • <aside>: Represents content that is tangentially related to the content around it, such as sidebars, pull quotes, or advertisements.
  • <footer>: Contains footer information for a section or the entire document, often including copyright information, contact details, or links to related resources.
  • <figure>: Represents self-contained content, such as images, diagrams, photos, or code snippets, along with an optional caption (<figcaption>).
  • <figcaption>: Represents a caption or legend for the content of a <figure> element.
  • <blockquote>: Indicates that the enclosed text is a longer quotation from another source.
  • <cite>: Indicates the title of a creative work, such as a book, movie, or article, often used within <blockquote> or <q> elements.

Using semantic HTML elements properly can improve accessibility, enhance SEO, and make your code more readable and maintainable. Additionally, it helps assistive technologies like screen readers to interpret and navigate the content more accurately, providing a better user experience for all visitors to your website.

Conclusion:

In summary, leveraging semantic HTML alongside JavaScript behavior, even in scenarios where JavaScript is disabled, fortifies website accessibility, enhances cross-browser compatibility, and reinforces progressive enhancement principles, ultimately resulting in a more inclusive and robust web ecosystem.

This page was last edited on 28 July 2024, at 5:37 pm