Tell us what’s happening:
I have errors for tests 5 and 8 even though I put the nav-bar before the header and have an ID that is the same as the ones that I put. Another problem is that the content was completely separated from the left side.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Technical Documentation Page</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
<nav id="navbar">
<header>
<section class="main-section" id="wikitext_and_navigator">
<h1>HTML in Wikitexts (shorter)</h1>
<a class="nav-link" href="#wikitext_and_navigator">HTML in Wikitexts (shorter)</a><br>
<a class="nav-link" href="#wikitext_and_html">HTML in Wikitexts</a><br>
<a class="nav-link" href="#wikitext_and_attributes">Attributes</a><br>
<a class="nav-link" href="#wikitext_and_elements">Elements</a><br>
<a class="nav-link" href="#wikitext_and_obsolete">Obsolete elements</a><br>
<a class="nav-link" href="#wikitext_and_reference">Reference</a><br>
</section>
</header>
</nav>
<main id="main-doc">
<section class="main-section" id="wikitext_and_html">
<h2>HTML in Wikitexts</h2>
<p>The MediaWiki software, which drives Wikipedia, allows the use of a subset of HTML 5 elements, or tags and their attributes, for presentation formatting. However, most HTML functionality can be replicated using equivalent wiki markup or templates.</p>
<p>These alternatives are generally preferred within articles because they are often simpler for most editors to use and less intrusive in the editing interface.</p>
<p>Some tags that resemble HTML are actually MediaWiki parser and extension tags, and so are actually wiki markup. HTML included in pages can be validated for HTML5 compliance by using validation. Note that some elements and attributes supported by MediaWiki and browsers have been deprecated by HTML5 and should no longer be used.</p>
</section>
<section class="main-section" id="wikitext_and_attributes">
<h2>Attributes</h2>
<p>HTML attributes provide additional information about an element and are always specified in the start tag. They are formatted as a name/value pair like <code>name="value"</code>.</p>
<p>Global attributes apply to all tags. Attributes not listed here are not allowed by MediaWiki:</p>
<ul>
<li><code>class</code>: one or more classifications to which the element belongs.</li>
<li><code>dir</code>: text direction— <code>"ltr"</code> (left-to-right), <code>"rtl"</code> (right-to-left) or <code>"auto"</code>.</li>
<li><code>id</code>: unique identifier for the element.</li>
<li><code>lang</code>: primary language for the contents of the element per BCP 47.</li>
<li><code>style</code>: applies CSS styling to the contents of the element.</li>
</ul>
<p>Other tags such as <code><table></code> support specific attributes – these are listed in the appropriate section.</p>
</section>
<section class="main-section" id="wikitext_and_elements">
<h2>Elements</h2>
<p>These HTML elements are supported by the MediaWiki software. This section gives a brief overview of the HTML element, an example, relevant wikimarkup and templates.</p>
<ul>
<li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>, and <code>h6</code>: These tags are headings for the sections with which they are associated. The first one is used for the article title. Headings are styled through CSS and added to the page's table of contents.</li>
<li>Templates: <code>{{fake heading}}</code> for use in documentation</li>
<li>Paragraphs: <code><p>...</p></code> tag places content into a separate paragraph.</li>
<li>br: <code><br></code> inserts the line break.</li>
<li>he <code><hr></code> or <code><hr /></code> represents a paragraph-level thematic break and presents as a horizontal rule</li>
</ul>
<p></p>
</section>
<section class="main-section" id="wikitext_and_obsolete">
<h2>Obsolete elements</h2>
<p>These elements are now obsolete and either deprecated or removed in HTML5, although they are still supported by browsers.</p>
<p>Their use should be avoided on Wikipedia. These tags either have an alternate tag or a template that replaces their function with CSS; the tags are being replaced by editors on pages throughout Wikipedia.</p>
<ul>
<li><code><center>...</center></code> (obsolete) was used to center text elements.</li>
<li><code><font>...</font></code>(obsolete) was used to set the font size, font face and color of text.</li>
<li><code><rb>...</rb></code> (obsolete) was used to mark base text in a ruby annotation.</li>
<li><code><strike>...</strike></code> (obsolete) formatted strike-through characters; use <code><s>...</s></code> or <code><del>...</del></code> instead, depending on the context.</li>
<li><code><tt>...</tt></code> (obsolete) formatted text in a fixed-width font.</li>
</ul>
<p>The development of HTML5 is now so far advanced that it was incorporated into the MediaWiki software and has been the default on Wikimedia wikis since September 2012.</p>
</section>
<section class="main-section" id="wikitext_and_reference">
<h2>Reference</h2>
<ul>
<li><a href="https://en.m.wikipedia.org/wiki/Help:HTML_in_wikitext" target="_blank">Wikipedia: Help:HTML in wikitext</a></li>
</ul>
</section>
</main>
</body>
</html>
body {
background-color: #fefedc;
margin: 1rem;
font-family: 'Fira Sans', Arial, Roboto, sans-serif;
}
h1 {
font-size: 1rem;
border-bottom: solid 2px #aaaaaa;
}
@media only screen and (max-width: 600px) {
#main-doc {
margin-left: 10px;
padding: 20px;
}
#navbar {
width: 100px;
padding: 15px;
}
}
#navbar {
width: 100px;
background-color: #ffffff;
display: block;
color: #000000;
position: fixed;
top: 0;
left: 0;
height: 100vh;
padding: 20px
}
code {
font-family: 'Fira Code', 'Courier New', monospace;
border: 1px solid #000000;
background-color: #eeeeee;
padding: 2px;
margin: 1px;
}
ul {
color: #000022;
}
a {
text-decoration: none;
}
a:hover {
color: #773300;
}
a:visited {
color: #339900;
}
a:focus {
border: 1px solid black;
}
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Challenge Information:
Build a Technical Documentation Page - Build a Technical Documentation Page