I am getting the following error.
Error: The element a must not appear as a descendant of the button element.
From line 117, column 28; to line 117, column 58
top_btn'> Back t
Ill put my HTML and CSS below
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>SuperRestraunt</title>
<meta charset="utf-8">
<link href="Style.css" rel="stylesheet">
</head>
<body>
<!-- Top navigation -->
<div class="topnav">
<!-- Centered link -->
<div class="topnav-centered">
<a href="index.html" class="active">Home</a>
</div>
<!-- Left-aligned links (default) -->
<a href="menu.html">Menu</a>
<a href="#contact">Contact</a>
<!-- Right-aligned links -->
<div class="topnav-right">
<a href="#search">Search</a>
<a href="#about">About</a>
</div>
</div>
<main class="wrapper">
<div class="banner">
<h1><span class="name">SuperRestraunt</span></h1>
<h2>Serving the best food in Macon since 2015.</h2>
<h3>Coupons and Weekly Advertisement.</h3>
<div class="row">
<div class="column">
<img src="images/coupon1.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="images/coupon2.jpg" alt="Forest" style="width:100%">
</div>
</div>
<br>
</div>
<div class="row">
<div class="column"></div>
<img class="img1" src="images/burger.jpg" alt="burger">
<div class="column"></div>
<p> Are you looking for the best southern cooking in all of middle Georgia? If so, you have looked in the right place!</p>
<p> Our chefs have over 30 years in combined experience</p>
<h2>About the Owner</h2>
<img class="img2" src="images/chef.jpg" alt="chef">
<p>Executive chef Nicholas St. Clair knew he wanted to do something extraordinary from a young age. Little did he know, his budding culinary expertise would launch him into a whirlwind adventure in the fine dining industry. St. Clair, who graduated with high honors from the California Culinary Institute in Pasadena, CA, polished his cuisine with some of America’s premier chefs over the past five years. St. Clair and his wife, Alison, ventured into the restaurant business with determination for success and passion for fine cuisine. e took a blind leap of faith and opened a place of his own.</p>
</div>
<h2><em>Contact us for a reservations</em></h2>
<p>Please call at least 2 days ahead for all reservations that include 10 or more people.</p>
</main>
<!-- Footer -->
<footer class="footer">
<div class="box">
<p>SuperRestraunt</p>
<p>(478) 302-1981</p>
<p>[email protected]</p>
<p>Contact us via Skype by clicking the following link</p>
<a href="skype:echo123?call">
Call Us Today!
</a>
<br/>
</div>
<div class="box">
<p>Check out are Social Media for more coupons and pictures!</p>
<p>Facebook:</p>
<p>Instagram:</p>
<p>Twitter:</p>
</div>
<div class="box">
<p>Locations:</p>
<br/>
<p>543 Cherry St suite b, Macon, GA 31201</p>
<div class="copyright">
<h2>@copyright: Landon Byrd</h2>
<h2>Fall 2021, All Rights Reserved</h2>
</div>
</div>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</p>
<button class = 'top_btn'> <a href="#top" class = 'top_a'>Back to top of the page</a> </button>
</footer>
</body>
</html>
CSS
/*
Landon Byrd
Fall 2021
Light Blue #06aed5
Darker Blue #086788
Cream White #f2f4f3
Yellow #f0c808
Rich Red #dd1c1a
Black #333
*/
/* Global Settings */
h1 {text-align: center}
h2 {text-align: center; color: #086788;}
h3 {text-align: center; color: #086788; text-decoration: underline #f2f4f3; text-shadow: 2px 2px #f2f4f3;}
.wrapper{width:85%; margin:0 auto; max-width: 960px; }
/* Nav Section */
/* Add a black background color to the top navigation */
.topnav {
position: relative;
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
opacity: 0.5;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #f0c808;
color: white;
}
/* Centered section inside the top navigation */
.topnav-centered a {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Right-aligned section inside the top navigation */
.topnav-right {
float: right;
}
/* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */
@media screen and (max-width: 600px) {
.topnav a, .topnav-right {
float: none;
display: block;
}
.topnav-centered a {
position: relative;
top: 0;
left: 0;
transform: none;
}
}
/* Main Section */
.banner{justify-content: center;background-color: #333; border-radius: 2pt; color: #f2f4f3; border-radius: 5%;}
.name{font-weight: bold; color: #f0c808}
.column {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.img1 {float:left; width: 300px; height: 350px; margin:15px; border-radius: 20%;}
.img2 {float: right; width: 330px; height: 350px; border-radius: 20%;}
body {
background-image: url("images/background.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-size: 16px
}
/* Footer Section */
*{box-sizing: border-box;}
.footer{text-align: center; background-color: #333; color: #f2f4f3; }
.box{float:left; width: 33.33%;}
.footer::after{content: ""; clear:both; display:table;}
.footer .top_btn{
background : #1f1f1f;
border : none;
border-radius : 5px;
width : 200px;
height : 50px;
}
.footer .top_a{
color : #efefef;
text-decoration: none;
font-size:16px;
}
/* copyright section */
.copyright {text-align: center; background-color: #333; color: #f2f4f3; }
/* Menu */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 1.5em;
}
.menu {
font-family: "Inter", sans-serif;
font-size: 14px;
}
.menu-group-heading {
margin: 0;
padding-bottom: 1em;
border-bottom: 2px solid #ccc;
}
.menu-group {
display: grid;
grid-template-columns: 1fr;
gap: 1.5em;
padding: 1.5em 0;
}
.menu-item {
display: flex;
}
.menu-item-image {
width: 80px;
height: 80px;
flex-shrink: 0;
object-fit: cover;
margin-right: 1.5em;
}
.menu-item-text {
flex-grow: 1;
}
.menu-item-heading {
display: flex;
justify-content: space-between;
margin: 0;
}
.menu-item-name {
margin-right: 1.5em;
}
.menu-item-description {
line-height: 1.6;
}
@media screen and (min-width: 992px) {
.menu {
font-size: 16px;
}
.menu-group {
grid-template-columns: repeat(2, 1fr);
}
.menu-item-image {
width: 125px;
height: 125px;
}
}
Thanks in advance for any and all help with this! The button is used as the back to the top of the page button at the very bottom of the site.
CodePudding user response：
The <a> element is not permitted to be inside a button.
The Button Element can only contain Phrasing Content. The <a> Element is an Interactive Content
You can use the link itself without the <button>-element. If you want it to look like a Button, then you can style the link with CSS.
CodePudding user response：
Having an anchor inside a button tag is not correct HTML
Change your button to
<button onclick="window.location.href='#top'" class="top_btn top_a">
Back to top of the page
</button>