Tell us what’s happening:
Keeps say atleast 5 “li” element should be descendants of the “.main-section” element
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!DOCTYPE html>
<html lang="en"/>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width. initial-scale=1.0"/>
<link rel="stylessheet" href="styels.css"/>
<title>HTML Documentation</title>
</head>
<body>
<nav id="navbar">
<header>HTML Guide</header>
<ul class="nav-list">
<li><a class="nav-link" href="#introduction">Introduction</a></li>
<li><a class="nav-link" href="#html_basics">HTML Basics</a></li>
<li><a class="nav-link" href="#html_layout">HTML Layout</a></li>
<li><a class="nav-link" href="#html_elements">HTML Elements</a></li>
<li><a class="nav-link" href="#block_&_inline">Block & Inline</a></li>
<li><a class="nav-link" href="#html_style">HTML Style</a></li>
<li><a class="nav-link" href="#reference">Reference</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="introduction">
<header>Introduction</header>
<p> HTML stands for Hyper Text Markup Language.
HTML is the standard markup language for creating Web pages and describes the structure of a Web page.
</p>
<p>
HTML consists of a series of elements; these elements tell the browser how to display the content.
HTML elements label pieces of content such as "this is a heading", <b>"this is a paragraph", "this is a link"</b>, etc.
</section>
<section class="main-section" id="html_basics">
<header>HTML Basics</header>
<p>
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
</p>
<p>
The HTML document itself begins with <html> and ends with </html>.
</p>
<p>
The visible part of the HTML document is between <body> and </body>
</p>
<h5>HTML Headings</h5>
<p>
HTML headings are defined with the <h1> to <h6> tags.
</p>
<p>
<h1> defines the most important heading. <h6> defines the least important heading:
</p>
<h5>HTML Images</h5>
<p>
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes.
</p>
<h5>HTML Links</h5>
<p>
HTML links are defined with the <a> tag:
The link's destination is specified in the (href) attribute.
Attributes are used to provide additional information about HTML elements.
</p>
<p>
Example of a link to a stylesheet. </br>
<pre>
<code>
<head>
<link rel="stylesheet" href="styles.css"> </br>
</head>
</code>
</pre>
</p>
</section>
<section class="main-section" id="html_layout">
<header>HTML Layout</header>
<p>
Websites often display content in multiple columns (like a magazine or a newspaper).
</p>
<p>
HTML has several semantic elements that define the different parts of a web page:
</p>
<p>
<header> - Defines a header for a document or a section
</p>
<p>
<nav> - Defines a set of navigation links
</p>
<p>
<section> - Defines a section in a document
</p>
<p>
<article> - Defines an independent, self-contained content
</p>
<p>
<aside> - Defines content aside from the content (like a sidebar)
</p>
<p>
<foote> - Defines a footer for a document or a section
</p>
<p>
<details> - Defines additional details that the user can open and close on demand.
</p>
<p>
<summary> - Defines a heading for the <details> element
</p>
</section>
<section class="main-section" id="html_elements">
<header>HTML Elements</header>
<p>
The HTML element is everything from the start tag to the end tag and is defined by a start tag, some content, and an end tag.
</p>
<p>
Example of some HTML elements: </br>
<pre>
<code>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</code>
</pre>
</p>
<h5>Nested Elements</h5>
<p>
HTML elements can be nested inside each other to create a tree-like structure of the content on the web page.
This hierarchical structure is called the DOM (Document Object Model), and it is used by the web browser to render the web page. For example:
</p>
<p>
<pre>
<code>
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
</code>
</pre>
</p>
</section>
<section class="main-section" id="block_&_inline">
<header>Block & Inline</header>
<p>
Every HTML element has a default display value, depending on what type of element it is.
</p>
<p>
The two most common display values are block and inline.
</p>
<h5>Block Elements</h5>
<p>
A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
</p>
<p>
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
Two commonly used block elements are: <p> and <div>.
</p>
<p>
The <p> element defines a paragraph in an HTML document.
</p>
<p>
The <div> element defines a division or a section in an HTML document
</p>
</section>
<section class="main-section" id="html_style">
<header>HTML Style</header>
<p>
The <style> tag is used to define style information (CSS) for a document.
</p>
<p>
Inside the <style> element you specify how HTML elements should render in a browser.
The <style> element must be included inside the <head> section of the document.
</p>
<p>
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
</p>
<p>
<pre>
<code>
<tagname style="property:value;"
</code>
</pre>
</p>
<p>
Multiple styles can be attributted to the same element.
</p>
<p>
<pre>
<code>
<html>
<head> </br>
<style> </br>
h1 {color:red;} </br>
p {color:blue;} </br>
</style> </br>
<style> </br>
h1 {color:green;} </br>
p {color:pink;} </br>
</style> </br>
</head> </br>
<body> </br>
<h1>This is a heading</h1> </br>
<p>This is a paragraph.</p> </br>
</body> </br>
</html> </br>
</code>
</pre>
</p>
</section>
<section class="main-section" id="reference">
<header>Reference</header>
</section>
</main>
</body>
</html>
Your mobile information:
iPhone - iOS15.6
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: