Blog - James A. Smith

My Blog

Welcome to my blog where I share thoughts on web development, technology, and personal experiences.

Semantic HTML5 Elements

Posted on April 13, 2026

HTML5 introduced several new semantic elements that provide better structure and meaning to web pages. Here are some of the key semantic elements:

Section

Sections are used to group related content together. They typically have a heading and can contain other elements like paragraphs, images, and lists.

Aside

Asides are used for content that is tangentially related to the main content. They are often presented as sidebars or callout boxes.

Article

Articles are for self-contained content that could be distributed independently from the rest of the site. Examples include a forum post, a magazine or newspaper article, or a blog entry.

Main

The main element is used to encapsulate the dominant content of the body of a document. There should only be one main element per document.

Forms, Lists, and Data

HTML5 also improved form elements and introduced better ways to structure lists and tabular data.

New York Bob 25 Los Angeles Charlie 35 Chicago End of Table WCAG - The Four Pillars of Accessibility Perceivable - Information must be presentable in ways users can perceive Operable - User interface components and navigation must be operable by all users Understandable - Information and the operation of the user interface must be understandable Robust - Content must be robust enough to be interpreted by a wide variety of user agents, including assistive technologies, This is the point of semantic HTML Decorative, Informative, or Functional. If the image is decorative, use an empty alt attribute (alt=''). If the image is informative, provide a brief description of the image in the alt attribute. If the image is functional (e.g., a button or link), describe its function in the alt attribute

Decorative, Informative, or Functional. If the image is decorative, use an empty alt attribute (alt=''). If the image is informative, provide a brief description of the image in the alt attribute. If the image is functional (e.g., a button or link), describe its function in the alt attribute

This is an inline quotation.

This is a block quotation. It is used for longer quotes that are set apart from the main text.

CSS Basics and Visual Identity

Element selector - h1, p, ul, li, etc.
Class selector - .header, .button
ID Selector - #nav, #home, #about
Pseudo-Selector - :hover,

CSS: Cascading Style Sheets an Inherent property of CSS, the rule that is further down on the CSS file will be applied last, and shown on the screen

Hierarchy

1) Inline stlying - Not good practice, CSS will only apply to what it is written
2) Internal CSS - In the head of the HTML document, applies to the whole document
3) External Stylesheet - link:css
ID is more specific than class, and class is more specific than element. Therefore, ID will override class, and class will override element. If two of the same type are applied, the one that is lower on the CSS file will be applied.

Box Model

Every HTML element can be considered as a box. The CSS box model describes the rectangular boxes that are generated for elements in the document tree and consists of: margins, borders, padding, and the actual content.
Web Safe Fonts vs Web fonts

Web Safe Fonts - A set of fonts that are widely available across different operating systems and devices. Examples include Arial, Times New Roman, and Courier New.

Web Fonts - Custom fonts that can be embedded into web pages using services like Google Fonts or Adobe Fonts. These fonts may not be installed on the user's device but are downloaded when the page loads.
font-family: Specifies the typeface for text in order left to right in the line.
Font sizes:

Select a base number - body text size

Select a ratio - determine spacing and relationship between elements

Generate Scale

Apply to design

Color Theory

Primary Colors - Red, Blue, Yellow

Secondary Colors - Green, Orange, Purple

Tertiary Colors - Red-Orange, Yellow-Orange, Yellow-Green, Blue-Green, Blue-Purple, Red-Purple

Complementary Colors - Colors opposite each other on the color wheel (e.g., Red and Green)

Analogous Colors - Colors next to each other on the color wheel (e.g., Blue, Blue-Green, Green)

Triadic Colors - Three colors evenly spaced around the color wheel (e.g., Red, Yellow, Blue)

Color swatch Design Systems Adobe Color Coolors WebAIM Contrast Checker
Hierarchy: Size, weight, color, adn position determine where to look on the page
Week 6 - Layout Conversion and Interactive Components

CSS Positioning

Static - Default position, follows normal document flow

Relative - Positioned relative to its normal position

Absolute - Positioned relative to the nearest positioned ancestor (not static)

Fixed - Positioned relative to the viewport, stays in the same place when the page is scrolled

Sticky - Toggles between relative and fixed, based on the user's scroll position

Grid is a 2 dimensional layout system; think x and y axis

Similar to the flexbox, grid is also predicated on a container + items framweork

We apply grid to the container that will be a grid

This will then make it look like a grid, and the items inside will be grid items

Styling

grid-template-columns: Defines the number and size of the columns in the grid

grid-template-rows: Defines the number and size of the rows in the grid

grid-gap: Sets the spacing between rows and columns

grid-column: Specifies how many columns an item should span

grid-row: Specifies how many rows an item should span

justify-items: Aligns items horizontally within their grid area

align-items: Aligns items vertically within their grid area

Week 7: Responsive Design

Local Storage

Something that persists from site visit to site visit. Such as Dark Mode on specific websites.

Cookies

Session Storage stores while the window is open

Who Owns User Data?

When you save in localStorage, it improves experiences, personalization without

Organization, user retention, data analytics, shared advertising, aggregate usage patterns

Data as Power

Who can read the data you are providing? Just your JavaScript? Analytics tools? Marketing partners?

Profit: Can "innocent" preferences be monetized?

Queries

Media and Queries

Media queries thing about the entire page, and allow us to apply CSS based on some property. Max-width:900px, min-width, are most common

Container queries do the same, but within a specific container on the page.

Breakpoints: When one set of rules takes over from another set of rules

Clamp()

clamp() scales smoothly between minimum and maximum values.

Storage Options

LocalStorage: Persistent, domain specific

Session Specific

Cookies