Admittedly, I'm new to coding so I'm sure there may be many issues in my code. The errors that are showing up right now are all " Element ol is not allowed here." If someone can please help me resolve this, it would be greatly appreciated, thank you. My code is listed below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Paula's Lists</title>
<link rel="stylesheet" href="lists.css">
<style>
.instagramlogo{
position: absolute;
width: 50px;
left: 20px;
top: 20px;
cursor: pointer;
}
.linkedinlogo{
position: absolute;
width: 50px;
left: 100px;
top: 20px;
cursor: pointer;
}
* {
box-sizing: border-box;
}
.column1 {
margin-top: 40px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
.column2{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
.column3{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
.column4{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
.column5{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
hr{
position: center;
margin-top: 10px;
border-color: #009688;
width: 40%;
margin-left: 31.5%;
}
</style>
</head>
<body>
<div >
<div >
<a href="https://www.instagram.com/shegonnacode/"><img src="images/pngfind.com-instagram-png-22629.png" alt="Instagram logo" ></a>
<a href="https://www.linkedin.com/in/paula-m-175737200/"><img src="images/pngfind.com-linkedin-png-533561.png" alt="Linkedin logo" ></a>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="lists.html">Lists</a></li>
<li><a href="contacts.html">Contact</a></li>
</ul>
</div>
<h1>Paula's Lists</h1>
<span>Get to know me better with the following lists which showcase my perspectives on tech-related concepts!</span>
<div >
<div style="background-color:#aaa;">
<h3>Programming Languages I'd Like to Learn</h3>
<ol>
<ol type="1">
<li>Python</li>
</ol>
<ol type="a">
<li>Javascript</li>
</ol>
<ol type="A">
<li>C</li>
</ol>
<ol type="i">
<li>Swift</li>
</ol>
<ol type="I">
<li>PHP</li>
</ol>
</ol>
</div>
<hr>
<div style="background-color:#bbb;">
<h3>Career Aspirations</h3>
<ul style="list-style-type:disc;">
<li>Software Engineer</li>
</ul>
<ul style="list-style-type:circle;">
<li>Video Game Developer</li>
</ul>
<ul style="list-style-type:square;">
<li>Cyber Security Analyst</li>
</ul>
</div>
<hr>
<div style="background-color:#ccc;">
<h3>Favorite Language so Far</h3>
<dl>
<dt>CSS</dt>
<dd>CSS stands for Cascading Style Sheets</dd>
</dl>
</div>
<hr>
<div style="background-color:#ddd;">
<h3>Favorite Class Topic</h3>
<ol>
<li>Introduction to Web Development</li>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</ol>
</div>
<hr>
<div style="background-color:#ddd;">
<h3>My Inspiration in Tech</h3>
<ul>
<li>Elon Musk</li>
<ul>
<li>Founder and CEO of Tesla SpaceX</li>
</ul>
</ul>
</div>
</div>
</div>
<script src=https://my.gblearn.com/js/loadscript.js></script>
</body>
</html>
As I stated, I am a noob with coding as I have just begun so I believe it may have something to do with spacing. I have tried to rearrange, but have failed miserably. Any help would be appreciated, thank you!
CodePudding user response：
In your code you have
<ol>
<ol type="1">
<li>Python</li>
</ol>
<ol type="a">
<li>Javascript</li>
</ol>
<ol type="A">
<li>C</li>
</ol>
<ol type="i">
<li>Swift</li>
</ol>
<ol type="I">
<li>PHP</li>
</ol>
</ol>
You have ol elements directly inside an ol element. You should have li elements as the direct children of ol. See 