HTML Course

Introduction

HTML, or HyperText Markup Language, is the standard markup language used to create web pages. It provides the structure and content of a webpage, allowing developers to define elements such as headings, paragraphs, images, links, and more. HTML uses tags to mark up different parts of the content, making it possible for browsers to interpret and display the webpage correctly.

Boilerplate and Encoding

HTML boilerplate: This is a boilerplate that includes the basic structure and essential elements every HTML document needs. 


  <! DOCTYPE html >
      < html lang ="en" >
          < head >
              < meta charset ="UTF-8" >
              < meta name ="viewport" content ="width=device-width, initial-scale=1.0" >
              < title>Document</ title >
              < link rel ="stylesheet" href ="styles.css" >
          </ head >
          < body >
          </ body >
      </ html >
  • DOCTYPE: This is used to tell browsers which version of HTML you're using.
  • html Element: This represents the top level element or the root of an HTML document. To specify the language for the document, you should use the lang attribute.
  • head Element: The head section contains important meta data which is behind-the-scenes information needed for browsers and search engines.
  • meta Elements: These elements represent your site's metadata. These element have details about things like character encoding, and how websites like Twitter should preview your page's link and more.
  • title Element: This element is used to set the text that appears in the browser tab or window.
  • UTF-8 character encoding: UTF-8, or UCS Transformation Format 8, is a standardized character encoding widely used on the web. Character encoding is the method computers use to store characters as data. The charset attribute is used inside of a meta element to set the character encoding to UTF-8.

Link states

  • :link: This is the default state. This state represents a link which the user has not visited, clicked, or interacted with yet. You can think of this state as providing the base styles for all links on your page. The other states build on top of it.
  • :visited: This applies when a user has already visited the page being linked to. By default, this turns the link purple - but you can leverage CSS to provide a different visual indication to the user.
  • :hover: This state applies when a user is hovering their cursor over a link. This state is helpful for providing extra attention to a link, to ensure a user actually intends to click it.
  • :focus: This state applies when we focus on a link.
  • :active: This state applies to links that are being activated by the user. This typically means clicking on the link with the primary mouse button by left clicking, in most cases.

HTML Accessibility

Introduction to Accessibility
  • Web Content Accessibility Guidelines:The Web Content Accessibility Guidelines (WCAG) are a set of guidelines for making web content more accessible to people with disabilities. The four principles of WCAG are POUR which stands for Perceivable, Operable, Understandable, and Robust.
Assistive Technology for Accessibility
  • Screen readers:Software programs that read the content of a computer screen out loud. They are used by people who are blind or visually impaired to access the web.
  • Large text or braille keyboards: Used by people with visual impairments to access the web.
  • Screen magnifiers:Software programs that enlarge the content of a computer screen. They are used by people with low vision to access the web.
  • Alternative pointing devices:Used by people with mobility impairments to access the web. This includes devices such as joysticks, trackballs, and touchpads.
  • Voice recognition: Used by people with mobility impairments to access the web. It allows users to control a computer using their voice.
WAI-ARIA, Roles, and Attributes
  • WAI-ARIA: It stands for Web Accessibility Initiative - Accessible Rich Internet Applications. It is a set of attributes that can be added to HTML elements to improve accessibility. It provides additional information to assistive technologies about the purpose and structure of the content.
  • ARIA roles: A set of predefined roles that can be added to HTML elements to define their purpose. This helps people using assistive technologies understand the content of the website. Examples include role="tab", role="menu", and role="alert".