<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"/>
</head>
<nav id="navbar">
<header>Documentation</header>
<a class="nav-link" href="#Doc_1">Doc_1</a>
<a class="nav-link" href="#Doc_2">Doc_2</a>
<a class="nav-link" href="#Doc_3">Doc_3</a>
<a class="nav-link" href="#Doc_4">Doc_4</a>
<a class="nav-link" href="#Doc_5">Doc_5</a>
<main id="main-doc">
<section class="main-section" id="Doc_1">
<header>Doc_1</header>
<code>Hello world</code>
<code>How are you</code>
<code>My name is Narendra</code>
<code>I am from India</code>
<code>Completed B.tech</code>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<p>Tells about Doc 1</p>
<p>contains In depth Information</p>
</section>
<section class="main-section" id="Doc_2">
<header>Doc_2</header>
<code>Java</code>
<code>Python</code>
<code>JavaScript</code>
<code>C++</code>
<code>C#</code>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<p>Tells about Doc 2</p>
<p>contains In depth Information</p>
</section>
<section class="main-section" id="Doc_3">
<header>Doc_3</header>
<code>What</code>
<code>Where</code>
<code>Was</code>
<code>When</code>
<code>Which</code>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<p>Tells about Doc 3</p>
<p>contains In depth Information</p>
</section>
<section class="main-section" id="Doc_4">
<header>Doc_4</header>
<code>HTML</code>
<code>CSS</code>
<code>JavaScript</code>
<code>React.js</code>
<code>Node.js</code>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<p>Tells about Doc 4</p>
<p>contains In depth Information</p>
</section>
<section class="main-section" id="Doc_5">
<header>Doc_5</header>
<code>Front End</code>
<code>Back End</code>
<code>Full Stack</code>
<code>Hr</code>
<code>PM</code>
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<p>Tells about Doc 5</p>
<p>contains In depth Information</p></section>
</main>
</html>
You need closing tag of navbar for it.
Another thing to consider is every <li>
element should be wrapped in <ul>
if you want it unordered or <ol>
if you want it ordered element and rather than using <code>
I believe there is more suitable element such as
<p>
<label>
And you can use <code>
element in the more suitable context, such as the code it self.
Your <main>
should be wrapped inside body element.
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.