freeCodeCamp's Use Headings to Show Hierarchical Relationships of Content, Learn Accessibility

Channel:
Subscribers:
8,020
Published on ● Video Link: https://www.youtube.com/watch?v=_csR9Pp2YFo



Duration: 4:38
42 views
1


In our lesson today we look at the importance and hierarchical relationship of our content. Whenever you are designing a site it is important to use the proper html elements. What I mean is, using the heading elements properly is important when designing accessible web sites. It is tempting as a beginner to utilize heading elements when in need of bigger text. When bigger text is needed, CSS is a better way of achieving this. Heading elements should be used to structure your site. Headings are for better semantics and to organize your content in proper sections. Every page should only have one h1 element. This is the main subject matter of the page. Then, h2 elements would be sub sections and h3 are sub sections to the h2 material, and so on. Organizing your site in hierarchical order is not only important to organize your site for yourself, but screen readers will read outloud the sub sections of your site to those utlizing them to quickly get an overview of the page. Correctly relating content is a key point of heading elements. Learning to use them correctly is key for any aspiring web developer.




Other Videos By We Will Code


2019-08-01freeCodeCamp's Add an Accessible Date Picker, Accessibility App 2020, We Will Code
2019-07-31freeCodeCamp, Wrap Radio Buttons in a fieldset Element for Better Accessibility, 2020 Web App Help
2019-07-30freeCodeCamp, Improve Form Field Accessibility with the label Element, 2020 Web Accessibility
2019-07-29freeCodeCamp, Improve Chart Accessibility with the figure Element, 2019 Screen Readers Accessibility
2019-07-27freeCodeCamp, Improve Accessibility of Audio Content with the audio Element, 2019 Web Accessibility
2019-07-26freeCodeCamp, Applied Accessibility, Make Screen Reader Navigation Easier with the footer Landmark
2019-07-26freeCodeCamp, Make Screen Reader Navigation Easier with the nav Landmark, Accessible Web Apps 2019
2019-07-26freeCodeCamp, Make Screen Reader Navigation Easier with the header Landmark, Make an Accessible Site
2019-07-25freeCodeCamp's Wrap Content in the article Element, Accessibility Challenges
2019-07-24freeCodeCamp's Jump Straight to the Content Using the main Element, Web App Accessibility
2019-07-24freeCodeCamp's Use Headings to Show Hierarchical Relationships of Content, Learn Accessibility
2019-07-24freeCodeCamp's Applied Accessibility, Know When Alt Text Should Be Left Blank, Accessible Web Apps
2019-07-23freeCodeCamp's Add Text Alternative to Images for Visually Impaired Accessibility
2019-07-23freeCodeCamp's Introduction to the Accessibility Challenge
2019-07-19Jordan Peterson on the Founding Fathers views of Utopia
2019-07-18What would Jordan Peterson ask Vladimir Putin about his beliefs?
2019-01-26freeCodeCamps Switch Statements Practice, Javascript Switch Statement Practice (12)
2018-11-16freeCodeCamp's Introducing Else and Else If Statements, Chaining If Else If Statements (11)
2018-11-15freeCodeCamp's Greater Than, Less Than, AND and Or Operators, Basic Javascript (10)
2018-11-14freeCodeCamp's Array Method Practice, Equality and Strict Equality in Javascript (9)
2018-11-13freeCodeCamp's Global Scope and Functions, Understanding Local & Global Variables In JS (8)



Tags:
free coding lessons
site accessibility
coding
using heading elements
heading element purpose
html