refactor: markup html and reduce stylecomplexity

404.html

@@ -26,7 +26,7 @@ <h4 class="light red-text text-lighten-4 center-on-small-only">Page not found.</
               <h2 class="header">Are You Lost?</h2>
               <p class="caption">
                 The page you were looking for does not exist. If you think this is a mistake and one of our pages has gone missing, Open an issue on
-                <a href="https://github.com/materializecss/materialize/issues/new">GitHub</a>>. Click below to learn more about our CSS framework.
+                <a href="https://github.com/materializecss/materialize/issues/new">GitHub</a>. Click below to learn more about our CSS framework.
               </p>
               <a href="about.html" class="btn-large">Learn More</a>
             </div>

autocomplete.html

@@ -43,7 +43,7 @@
               <pre style="padding-top: 0px">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
-          <code class="language-markup copiedText">
+          <code class="language-html copiedText">
 <xmp>
 <div class="row">
   <div class="col s12">

badges.html

@@ -17,7 +17,7 @@
                 <div class="col s12">
                   <p class="caption">
                     Badges can notify you that there are new or unread messages or notifications. Add the
-                    <code class="language-markup">new</code> class to the badge to give it the background.
+                    <code class="language-html">new</code> class to the badge to give it the background.
                   </p>
 
                   <h3 class="header">Collections</h3>
@@ -31,7 +31,7 @@ <h3 class="header">Collections</h3>
                   <pre style="padding-top: 0px">
               <span class="copyMessage">Copied!</span>
               <i class="material-icons copyButton">content_copy</i>
-              <code class="language-markup copiedText">
+              <code class="language-html copiedText">
 <xmp>
 <div class="collection">
   <a href="#!" class="collection-item"><span class="badge">1</span>Alan</a>
@@ -62,7 +62,7 @@ <h3 class="header">Badges in Dropdown</h3>
                   </ul>
                   <a class="btn dropdown-trigger" href="#!" data-target="dropdown2">Dropdown<i class="material-icons right">arrow_drop_down</i></a>
 
-                  <pre><code class="language-markup">
+                  <pre><code class="language-html">
 <xmp>
 <ul id="dropdown2" class="dropdown-content">
   <li><a href="#!">one<span class="badge">1</span></a></li>
@@ -93,7 +93,7 @@ <h3 class="header">Badges in Navbar</h3>
                     </div>
                   </nav>
 
-                  <pre><code class="language-markup">
+                  <pre><code class="language-html">
 <xmp>
 <nav>
   <div class="nav-wrapper">
@@ -128,7 +128,7 @@ <h3 class="header">Badges in Collapsibles</h3>
                       </div>
                     </li>
                   </ul>
-                  <pre><code class="language-markup">
+                  <pre><code class="language-html">
 <xmp>
 <ul class="collapsible">
   <li>
@@ -172,10 +172,10 @@ <h5 class="light">Custom Caption</h5>
                 <div class="col s12 m9 offset-m3">
                   <p>
                     You can explicitly set the caption in a badge using the
-                    <code class="language-markup">data-badge-caption</code>
+                    <code class="language-html">data-badge-caption</code>
                     attribute.
                   </p>
-                  <pre><code class="language-markup">
+                  <pre><code class="language-html">
 <xmp>
 <span class="new badge" data-badge-caption="custom caption">4</span>
 <span class="badge" data-badge-caption="custom caption">4</span>
@@ -193,7 +193,7 @@ <h5 class="light">Custom Caption</h5>
                 </div>
                 <div class="col s12 m9 offset-m3">
                   <p>You can use our color classes to set the background-color of the badge.</p>
-                  <pre><code class="language-markup"><xmp>
+                  <pre><code class="language-html"><xmp>
 <span class="new badge red">4</span>
 <span class="new badge blue">4</span>
 </xmp>

breadcrumbs.html

@@ -31,7 +31,7 @@ <h3 class="header">Basic</h3>
                   <pre style="padding-top: 0px">
               <span class="copyMessage">Copied!</span>
               <i class="material-icons copyButton">content_copy</i>
-              <code class="language-markup copiedText">
+              <code class="language-html copiedText">
 <xmp>
 <nav>
   <div class="nav-wrapper">

buttons.html

@@ -29,7 +29,7 @@ <h3 class="header">Filled <small class="secondary-text">(Standard)</small></h3>
               <pre style="padding-top: 0px">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
-<code class="language-markup copiedText"><xmp><a class="btn">Standard Button</a>
+<code class="language-html copiedText"><xmp><a class="btn">Standard Button</a>
 <a tabindex="0" class="btn filled">Create</a>
 <a tabindex="0" class="btn filled icon-left">
   <i class="material-icons">add</i>Create
@@ -55,7 +55,7 @@ <h3>Tonal</h3>
               <pre style="padding-top: 0px">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
-          <code class="language-markup copiedText">
+          <code class="language-html copiedText">
 <xmp>
 <a tabindex="0" class="btn tonal">Create</a>
 <a tabindex="0" class="btn tonal icon-left">
@@ -81,7 +81,7 @@ <h3 class="header">Outlined</h3>
               <pre style="padding-top: 0px">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
-          <code class="language-markup copiedText">
+          <code class="language-html copiedText">
 <xmp>
 <a tabindex="0" class="btn outlined">Create</a>
 <a tabindex="0" class="btn outlined icon-left">
@@ -113,7 +113,7 @@ <h3 class="header">Elevated</h3>
               <pre style="padding-top: 0px">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
-          <code class="language-markup copiedText">
+          <code class="language-html copiedText">
 <xmp>
 <a tabindex="0" class="btn elevated">Create</a>
 <a tabindex="0" class="btn elevated">
@@ -144,7 +144,7 @@ <h3 class="header">Text</h3>
               <pre style="padding-top: 0px">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
-          <code class="language-markup copiedText">
+          <code class="language-html copiedText">
 <xmp>
 <a tabindex="0" class="btn text">Create</a>
 <button class="btn text icon-left">
@@ -167,7 +167,7 @@ <h3 class="header">Floating</h3>
               <pre style="padding-top: 0px">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
-          <code class="language-markup copiedText">
+          <code class="language-html copiedText">
 <xmp>
 <a class="btn-floating btn-large waves-effect waves-light">
   <i class="material-icons">add</i>
@@ -188,7 +188,7 @@ <h4 class="header">Submit Button</h4>
               <pre style="padding-top: 0px">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
-          <code class="language-markup copiedText">
+          <code class="language-html copiedText">
 <xmp>
 <button class="btn icon-right waves-effect waves-light" type="submit" name="action">
   Submit<i class="material-icons right">send</i>
@@ -206,7 +206,7 @@ <h4 class="header">Large</h4>
               <pre style="padding-top: 0px">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
-          <code class="language-markup copiedText">
+          <code class="language-html copiedText">
 <xmp>
 <a class="btn-large waves-effect waves-light">Button</a>
 <a class="btn-large icon-left waves-effect waves-light">
@@ -231,7 +231,7 @@ <h4 class="header">Small</h4>
               <pre style="padding-top: 0px">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
-          <code class="language-markup copiedText">
+          <code class="language-html copiedText">
 <xmp>
 <a class="btn-small waves-effect waves-light">Button</a>
 <a class="btn-small icon-left waves-effect waves-light">
@@ -263,7 +263,7 @@ <h3 class="header">Disabled</h3>
               <pre style="padding-top: 0px">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
-<code class="language-markup copiedText"><xmp><a class="btn-large disabled">Button</a>
+<code class="language-html copiedText"><xmp><a class="btn-large disabled">Button</a>
 <a class="btn disabled">Button</a>
 <a class="btn-flat disabled">Button</a>
 <a class="btn-floating disabled">

cards.html

@@ -33,7 +33,7 @@ <h3 class="header">Basic Card</h3>
               <pre style="padding-top: 0px;">
                 <span class="copyMessage">Copied!</span>
                 <i class="material-icons copyButton">content_copy</i>
-                <code class="language-markup copiedText">
+                <code class="language-html copiedText">
 <xmp>
 <div class="card">
   <div class="card-content">
@@ -83,7 +83,7 @@ <h3 class="header">Image Card</h3>
             <pre style="padding-top: 0px;">
               <span class="copyMessage">Copied!</span>
               <i class="material-icons copyButton">content_copy</i>
-              <code class="language-markup copiedText">
+              <code class="language-html copiedText">
 <xmp>
 <div class="card">
   <div class="card-image">
@@ -151,7 +151,7 @@ <h3 class="header">FABs in Cards</h3>
             <pre style="padding-top: 0px;">
               <span class="copyMessage">Copied!</span>
               <i class="material-icons copyButton">content_copy</i>
-              <code class="language-markup copiedText">
+              <code class="language-html copiedText">
 <xmp>
 <div class="row">
   <div class="col s12 m6">
@@ -204,7 +204,7 @@ <h3 class="header">Horizontal Card</h3>
             <pre style="padding-top: 0px;">
               <span class="copyMessage">Copied!</span>
               <i class="material-icons copyButton">content_copy</i>
-              <code class="language-markup copiedText">
+              <code class="language-html copiedText">
 <xmp>
 <div class="col s12 m7">
   <h2 class="header">Horizontal Card</h2>
@@ -252,15 +252,15 @@ <h3 class="header">Card Reveal</h3>
           <div class="col s12 m5">
 
             <p class="caption">
-             Here you can add a card that reveals more information once clicked. Just add the <code class="language-markup">card-reveal</code> div with a <code class="language-markup">span.card-title</code> inside to make this work. Add the class <code class="language-markup">activator</code> to an element inside the card to allow it to open the card reveal.
+             Here you can add a card that reveals more information once clicked. Just add the <code class="language-html">card-reveal</code> div with a <code class="language-html">span.card-title</code> inside to make this work. Add the class <code class="language-html">activator</code> to an element inside the card to allow it to open the card reveal.
             </p>
           </div>
           <div class="col s12">
 
             <pre style="padding-top: 0px;">
               <span class="copyMessage">Copied!</span>
               <i class="material-icons copyButton">content_copy</i>
-              <code class='language-markup copiedText'>
+              <code class='language-html copiedText'>
 <xmp>
 <div class="card">
   <div class="card-image">
@@ -338,15 +338,15 @@ <h5>Card Action Options</h5>
           </div>
           <div class="col s12 m6">
             <p class="caption">
-             You can make your card-action always visible by adding the class <code class="language-markup">sticky-action</code> to the overall card.
+             You can make your card-action always visible by adding the class <code class="language-html">sticky-action</code> to the overall card.
             </p>
           </div>
           <div class="col s12">
 
             <pre style="padding-top: 0px;">
               <span class="copyMessage">Copied!</span>
               <i class="material-icons copyButton">content_copy</i>
-              <code class="language-markup copiedText">
+              <code class="language-html copiedText">
 <xmp>
 <div class="card sticky-action">
   ...
@@ -366,12 +366,12 @@ <h5>Card Action Options</h5>
           <div class="col s12">
             <h3 class="header">Tabs in Cards</h3>
             <p class="caption">
-             You can add tabs to your cards by adding a dividing <code class="language-markup">cards-tabs</code> div inbetween your header content and your tab content.
+             You can add tabs to your cards by adding a dividing <code class="language-html">cards-tabs</code> div inbetween your header content and your tab content.
             </p>
             <pre style="padding-top: 0px;">
               <span class="copyMessage">Copied!</span>
               <i class="material-icons copyButton">content_copy</i>
-              <code class="language-markup copiedText">
+              <code class="language-html copiedText">
 <xmp>
 <div class="card">
   <div class="card-content">
@@ -463,7 +463,7 @@ <h3 class="header">Card Sizes</h3>
             <pre style="padding-top: 0px;">
               <span class="copyMessage">Copied!</span>
               <i class="material-icons copyButton">content_copy</i>
-              <code class="language-markup copiedText">
+              <code class="language-html copiedText">
 <xmp>
 <div class="card small">
   <!-- Card Content -->
@@ -568,7 +568,7 @@ <h3 class="header">Card Panel</h3>
             <pre style="padding-top: 0px;">
               <span class="copyMessage">Copied!</span>
               <i class="material-icons copyButton">content_copy</i>
-              <code class="language-markup copiedText">
+              <code class="language-html copiedText">
 <xmp>
 <div class="row">
   <div class="col s12 m5">

carousel.html

@@ -44,7 +44,7 @@
               <pre style="padding-top: 0px;">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
-          <code class="language-markup copiedText">
+          <code class="language-html copiedText">
 </xmp>
 <div class="carousel">
   <a class="carousel-item" href="#one!"><img src="images/placeholder/250x250_a.png"></a>
@@ -284,7 +284,7 @@ <h3 class="header">Full Width Slider</h3>
               <pre style="padding-top: 0px;">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
-          <code class="language-markup copiedText">
+          <code class="language-html copiedText">
 <xmp>
 <div class="carousel carousel-slider">
   <a class="carousel-item" href="#one!"><img src="images/placeholder/800x400_a.jpg"></a>
@@ -314,7 +314,7 @@ <h3 class="header">Special Options</h3>
                 The carousel doesn't only support images but also allows you to
                 make content carousels. You can add fixed items to your carousel
                 by adding a div with the class
-                <code class="language-markup">carousel-fixed-item</code> and
+                <code class="language-html">carousel-fixed-item</code> and
                 adding your fixed content in there.
               </p>
               <p>
@@ -349,7 +349,7 @@ <h2>Fourth Panel</h2>
               <pre style="padding-top: 0px;">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
-          <code class="language-markup copiedText">
+          <code class="language-html copiedText">
 <xmp>
 <div class="carousel carousel-slider center">
   <div class="carousel-fixed-item center">

checkboxes.html

@@ -14,8 +14,8 @@
             <div id="checkbox" class="section scrollspy">
               <p>
                 Use checkboxes when looking for yes or no answers. The
-                <code class="language-markup">for</code> attribute is necessary to bind our custom checkbox with the input. Add the input's
-                <code class="language-markup">id</code> as the value of the <code class="language-markup">for</code> attribute of the label.
+                <code class="language-html">for</code> attribute is necessary to bind our custom checkbox with the input. Add the input's <code class="language-html">id</code> as
+                the value of the <code class="language-html">for</code> attribute of the label.
               </p>
               <form action="#">
                 <p>
@@ -59,7 +59,7 @@
               <pre style="padding-top: 0px">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
-          <code class="language-markup copiedText">
+          <code class="language-html copiedText">
 <xmp>
 <form action="#">
   <p>

chips.html

@@ -35,7 +35,7 @@
         <pre style="padding-top: 0px;">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
-          <code class="language-markup copiedText">
+          <code class="language-html copiedText">
 <xmp>
 <div class="chip">
   <img src="images/yuna.jpg" alt="Contact Person"> Jane Doe
@@ -75,7 +75,7 @@ <h3 class="header">Contacts</h3>
         <pre style="padding-top: 0px;">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
-          <code class="language-markup copiedText">
+          <code class="language-html copiedText">
 <xmp>
 <div class="chip">
   <img src="images/yuna.jpg" alt="Contact Person">
@@ -92,7 +92,7 @@ <h3 class="header">Contacts</h3>
         <h3 class="header">Tags</h3>
         <p class="caption">
           To create a tag chip just add a close icon inside with the class
-          <code class="language-markup">close</code>.
+          <code class="language-html">close</code>.
           <div class="chip">
             Tag
             <i class="close material-icons">close</i>
@@ -101,7 +101,7 @@ <h3 class="header">Tags</h3>
         <pre style="padding-top: 0px;">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
-          <code class="language-markup copiedText">
+          <code class="language-html copiedText">
 <xmp>
 <div class="chip">
   Tag
@@ -140,7 +140,7 @@ <h3 class="header">Javascript Plugin</h4>
         <pre style="padding-top: 0px;">
           <span class="copyMessage">Copied!</span>
           <i class="material-icons copyButton">content_copy</i>
-          <code class="language-markup copiedText">
+          <code class="language-html copiedText">
 <xmp>
 <!-- Default with no input (automatically generated)  -->
 <div class="chips"></div>