HTML Semantic Elements

HTML Semantic Elements

• HTML5 introduces semantic elements to provide meaning to structure of a web page
• Replaces generic div elements with descriptive elements
• Examples:
  • header: defines the header section of a document or section
  • nav: defines a section of navigation links
  • main: defines the main content section of a document
  • section: defines a self-contained section of related content
  • article: defines an independent piece of content
  • aside: defines a piece of content that is related to the surrounding content
  • footer: defines the footer section of a document or section

CSS Grid

• A two-dimensional grid system for layout
• Grid container: the element that contains the grid
• Grid items: the elements that are direct children of the grid container
• Grid tracks: the horizontal or vertical lines that make up the grid
• Grid cells: the spaces between the grid tracks
• Properties:
  • grid-template-columns and grid-template-rows: define the number and size of grid tracks
  • grid-column and grid-row: define the grid cells that an item occupies
  • justify-items and align-items: define the alignment of grid items within cells

Responsive Design

• The practice of designing websites that adapt to different screen sizes and devices
• Techniques:
  • Media queries: apply different styles based on device characteristics (e.g. screen size, orientation)
  • Flexible grids and images: use relative units (e.g. percentages, ems) instead of fixed units (e.g. pixels)
  • Mobile-first design: design for small screens first, then add styles for larger screens
  • Breakpoints: define points at which the layout changes in response to screen size

Web Accessibility

• The practice of designing websites that are usable by everyone, including people with disabilities
• Guidelines:
  • Perceivable: provide alternative text for images, provide closed captions for audio and video
  • Operable: make navigation intuitive and consistent, provide sufficient time for users to read and use content
  • Understandable: make text readable and understandable, help users avoid and correct mistakes
  • Robust: maximize compatibility with assistive technologies and future technologies
• Tools:
  • WAVE Web Accessibility Evaluation Tool: evaluates a website's accessibility
  • Lighthouse: audits a website's accessibility, performance, and best practices

Flexbox

• A one-dimensional layout mode for laying out items in a row or column
• Container properties:
  • display: flex or display: inline-flex: enable flexbox layout
  • flex-direction: define the direction of the flexbox layout (row or column)
• Item properties:
  • flex-grow and flex-shrink: define how items grow or shrink in relation to each other
  • flex-basis: define the initial main size of an item
  • justify-content and align-items: define the alignment of items within the container

HTML Semantic Elements

• HTML5 introduces semantic elements to provide meaning to the structure of a web page
• Replaces generic div elements with descriptive elements
• Examples of semantic elements include:
  • header: defines the header section of a document or section
  • nav: defines a section of navigation links
  • main: defines the main content section of a document
  • section: defines a self-contained section of related content
  • article: defines an independent piece of content
  • aside: defines a piece of content that is related to the surrounding content
  • footer: defines the footer section of a document or section

CSS Grid

• A two-dimensional grid system for layout
• Grid container: the element that contains the grid
• Grid items: the elements that are direct children of the grid container
• Grid tracks: the horizontal or vertical lines that make up the grid
• Grid cells: the spaces between the grid tracks
• Properties include:
  • grid-template-columns and grid-template-rows: define the number and size of grid tracks
  • grid-column and grid-row: define the grid cells that an item occupies
  • justify-items and align-items: define the alignment of grid items within cells

Responsive Design

• The practice of designing websites that adapt to different screen sizes and devices
• Techniques include:
  • Media queries: apply different styles based on device characteristics (e.g. screen size, orientation)
  • Flexible grids and images: use relative units (e.g. percentages, ems) instead of fixed units (e.g. pixels)
  • Mobile-first design: design for small screens first, then add styles for larger screens
  • Breakpoints: define points at which the layout changes in response to screen size

Web Accessibility

• The practice of designing websites that are usable by everyone, including people with disabilities
• Guidelines include:
  • Perceivable: provide alternative text for images, provide closed captions for audio and video
  • Operable: make navigation intuitive and consistent, provide sufficient time for users to read and use content
  • Understandable: make text readable and understandable, help users avoid and correct mistakes
  • Robust: maximize compatibility with assistive technologies and future technologies
• Tools include:
  • WAVE Web Accessibility Evaluation Tool: evaluates a website's accessibility
  • Lighthouse: audits a website's accessibility, performance, and best practices

Flexbox

• A one-dimensional layout mode for laying out items in a row or column
• Container properties:
  • display: flex or display: inline-flex: enable flexbox layout
  • flex-direction: define the direction of the flexbox layout (row or column)
• Item properties:
  • flex-grow and flex-shrink: define how items grow or shrink in relation to each other
  • flex-basis: define the initial main size of an item
  • justify-content and align-items: define the alignment of items within the container