inna-arabejo / semantic-html

A refactored webpage that improves web accessibility with proper semantic structure and comments in both HTML and CSS.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Semantic HTML Homework Assignment

License: MIT

Task of refactoring the Horiseon webpage.

Create a Horiseon webpage that needs to be refactored. Meaning that the mock-up should be 90 percent original with the other 10 percent worked on to improve the codebase for better web accessability. HTML will be organized with semantic elements that clearly define its content and follows semantic structure. The semantic layout of CSS will be organized to follow the semantic structure of HTML elements. CSS selectors and properties can be combined for efficiency. Be sure to comment on both HTML and CSS before each element and section of a page.

Why is web accessability important?

When a website improves their accessability, it allows for better visibility on web searchces. Web accessability also allows people with disabilities to have better user experience. It gives them access to the webpage by using assistive technologies like screen readers.

Usage:

This program can be run through a browser to the the deployed application. Alternatively, to run this application locally you will need to:

  1. Clone this repository to receive all of the files
  2. Make sure you are in the directory of the application. It should be in a folder named semantic-html.
  3. Right-click on the index.html file
  4. Click on Open in Default Browser
  5. The browser should render the web page

Screenshot

Horiseon Web Page Screenshot

Link To the Final Page

Horiseon final page link

License

This code is licensed under the MIT License.

About

A refactored webpage that improves web accessibility with proper semantic structure and comments in both HTML and CSS.


Languages

Language:HTML 61.0%Language:CSS 39.0%