Question
<!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en"> <!-- head...
<!-- DOCTYPE declaration -->
<!DOCTYPE html>
<!-- HTML boilerplate code -->
<html lang="en">
<!-- head tag -->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Personal Webpage</title>
</head>
<!-- body tag -->
<body>
<style>
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.centerImage {
text-align:center;
display:block;
}
.main {
margin-left: 160px; /* Same as the width of the sidenav */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
</style>
<div class="sidenav">
<a href="index.html">Home</a>
<a href="resume.html">Resume</a>
<a href="projects.html">Projects</a>
<a href="contact.html">Contact</a>
<a href="social.html">Social</a>
</div>
<div class="main">
<h2>Megumin</h2>
<p>This is my personal webpage to introduce myself.</p>
<p>This my photo.</p>
<center>
<img src="./images/photo.jpg" alt="centered image" height="680" width="500">
</center>
</div>
</body>
</html>
Please help me to fix the problem in W3C Markup Validator
Answers
Ans)You cannot use tags like center for w3c validator:
blow code will work fine
----------------------------------------------------------------------------------------------------------------------------------------
<!-- DOCTYPE declaration -->
<!DOCTYPE html>
<!-- HTML boilerplate code -->
<html lang="en">
<!-- head tag -->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Personal Webpage</title>
<style>
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.centerImage {
text-align:center;
display:block;
}
.main {
margin-left: 160px; /* Same as the width of the sidenav */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
.main .img{
text-align: center;
}
</style>
</head>
<!-- body tag -->
<body>
<div class="sidenav">
<a href="index.html">Home</a>
<a href="resume.html">Resume</a>
<a href="projects.html">Projects</a>
<a href="contact.html">Contact</a>
<a href="social.html">Social</a>
</div>
<div class="main">
<h2>Megumin</h2>
<p>This is my personal webpage to introduce myself.</p>
<p>This my photo.</p>
<div class="img">
<img src="./images/photo.jpg" alt="centered image" height="680" width="500">
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------