Typography: Header Elements Lose Semantics

I see the topography example includes the following HTML which I believe is counter to the HTML spec which states “The h1 element is said to have the highest rank, the h6 element has the lowest rank” https://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

Typography Example Includes:

        <h1 class="mdc-typography--display4">Display 4</h1>
        <h1 class="mdc-typography--display3">Display 3</h1>
        <h1 class="mdc-typography--display2">Display 2</h1>
        <h1 class="mdc-typography--display1">Display 1</h1>
        <h1 class="mdc-typography--headline">Headline</h1>

Why not simply give authors the ability to globally turn MDC Typography on and off by toggling a class on the body or html. As for granular control why not simply add class “mdc” to any type header, i.e., why do we need “-typography–display4” and “-typography–display3”?

[ronnieroyston]

Looks like what is rendered using <h2> thru <h6> is identical to all <h1>'s. I think if you update the typography demo to use <h2> - <h6>, that would be helpful. As it is, it appears to suggest the usage of only <h1> tags.

[amsheehan]

After discussing with the team, we feel that leveraging semantic names for styling considerations runs perpendicular to what semantic markup is all about. e.g.: <h1> - <h6> are semantically meaningful to browsers and web crawlers, but there should be a clear separation from what it means for style, as heading elements really only provide baseline styles with regard to typography.

Further, if we were to add a global flag to control for mdc-typography it means we’re being a little too strict in assuming that the user wants to use Roboto, that display styles are only used on heading elements, that all heading elements are Material Design elements, etc…

As @Garbee stated, we feel it is better for our users to use @extend on our set of mdc-typography styles, or in simple cases, just override the compiled CSS. This approach would be completely appropriate if a user would like to re-map mdc-typography--display* styles to the heading elements of the corresponding level.

As far as changes to the demo, we are always happy to review any pull requests from the community. Thanks!