Tell us what’s happening:
Please can I have assistance, I am almost finished my project but the run test has four errors and, I cant seem to fix the problem. #1: The first child of each .main-section should be a header element. #2: Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s. #3: Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”). #4: Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id).
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">
<title>HTML Technical Documentation Page</title>
<link rel="stylessheet" href="./styles.css"/>
</head>
<body>
<nav id="navbar">
<header>HTML Documentation</header>
<ul>
<li><a class="nav-link" href="#Introduction">Introduction</a></li>
<li><a class="nav-link" href="#Example_of_HTML">Example of HTML</a></li>
<li><a class="nav-link" href="#How_HTML_works">How HTML works</a></li>
<li><a class="nav-link" href="#HTML_Features">HTML Features</a></li>
<li><a class="nav-link" href="#HTML_Hierarchy">HTML Hierarchy</a></li>
<li><a class="nav-link" href="#What_are_HTML_elements">What are HTML elements</a></li>
<li><a class="nav-link" href="#What_are_HTML_atrributes">What are HTML attributes</a></li>
<li><a class="nav-link" href="#HTML_Syntax">HTML Syntax</a></li>
<li><a class="nav-link" href="#Cons_of_HTML">Cons of HTML</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 basics:</p>
<p>HTML (HyperText Markup Language) is a markup language used to structure and organize the content on a web page. It uses various tags to define the different elements on a page, such as headings, paragraphs, and links.</p>
<p>What is HTML?</p>
<p>HTML (HyperText Markup Language) is used to structure and format the content of websites on the World Wide Web. Web Developers use it to create a skeleton of modern websites and web apps.
In simple words, HTML is the primary building block to create and structure website content.</p>
<p>Let's see what HyperText Markup Language means.</p>
<ul>
<p>HyperText:<p/>
<li>HyperText is a way of organizing text that allows the reader to easily navigate and access related information. It takes the reader to a different part of the same web page, or to a different web page altogether.</li>
<p>Markup language:</p>
<li>
A markup language is a computer language that is used to add structure and formatting to a text document. Markup languages use a system of tags to define the structure and content of a document. These tags are interpreted by a program or application to display the document in a specific way.
</li>
</ul>
</section>
<section class="main-section" id="Example_of_HTML">
<header>Example of HTML</header>
<p>Let's see a simple example of HTML.</p>
<code><pre>
<!DOCTYPE html>
<html>
<head>
<title>freecodecamp.org</title>
</head>
<body>
<h1>HTML Tutorial</h1>
<p>You'll learn about HTML.</p>
</body>
</html>
</pre></code>
<p>In the above program,</p>
<ul>
<li><code><!DOCTYPE html></code> - defines that this document is an HTML document</li>
<li><code><html></code> -root element of an HTML page which encloses all other elements in the HTML page</li>
<li><code><head></code> - contains information about the page, such as the title and metadata</li>
<li><code><title></code> - specifies a title for the HTML page which is shown in the browser's title bar</li>
<li><code><body></code> - defines the main content of the page and is a container for all the visible contents, such as headings, paragraphs, lists, etc</li>
<li><code><h1></code> - defines a heading</li>
<li><code><p></code> - defines a paragraph of HTML document</li>
</ul>
</section>
<section class="main-section" id="How_HTML_works">
<header>How HTML works</header>
<p>HTML works by defining the structure and content of a web page using a series of tags like <code><h1>,</code><code><p></code>, etc. Each tag has a meaning and can be used to define the purpose of the content it encloses. For example,</p>
<code><pre>
<!DOCTYPE html>
<thtml>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Programiz</title>
</head>
<body>
<center><h1>freecodecamp</h1></center>
<h1>Learn to Code for Free</h1>
<p>
Learn to code with our beginner-friendly tutorials and examples.
Read interactive tutorials, and write and test your code to learn programming.
<p>
<button>Join for free</button>
</body>
</html>
</pre></code>
<p>As you can see, a web browser reads HTML tags and displays them on the browser by interpreting their meaning. In the above code:</p>
<ul>
<li><code><h1></code> tag - displays the content inside it as a heading</li>
<li><code><p></code> tag - displays the content inside it as a paragraph</li>
<li><code><center></code> tag - displays contents inside it at the center of the page</li>
</ul>
</section>
<section class="main-section" id="HTML_Features">
<header>HTML Features</header>
<p>HTML is a text-based language used to create web pages. It has several features that make it a powerful and widely used language for creating web pages. Some of these features include:</p>
<ul>
<li>HTML is a standard language used for creating and structuring web pages. It allows for the organization of content using elements such as headings, paragraphs, lists, and tables.</li>
<li>It supports a wide range of media types, including text, images, audio, and video, which makes web pages more engaging and interactive.</li>
<li>HTML is a flexible language that can be used with other technologies, such as CSS and JavaScript, to add additional features and functionality to a web page.</li>
<li>Since HTML is compatible with all browsers, web pages created in HTML are displayed across a variety of platforms and devices.</li>
<li>Furthermore, it is an open and standardized language, which is constantly being updated and improved by a community of developers and experts.</li>
</ul>
</section>
<section class="main-section" id="HTML_Hiearchy">
<header>HTML Hierarchy</header>
<p>HTML elements are hierarchical, which means that they can be nested inside each other to create a tree-like structure of the content on the web page.</p>
<p>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>
<code><pre>
<!DOCTYPE html>
<html>
<head>
<title>My web page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
<p>It contains a
<strong>main heading</strong> and <em> paragraph </em>.
</p>
</body>
</html>
</pre></code>
<p>In this example, the html element is the root element of the hierarchy and contains two child elements: head and body. The head element, in turn, contains a child element called the title, and the body element contains child elements: h1 and p.</p>
<p>Let's see the meaning of the various elements used in the above example.</p>
<ul>
<li><code><html></code>: the root element of the DOM, and it contains all of the other elements in the code</li>
<li><code><head></code>: contains metadata about the web page, such as the title and any linked CSS or JavaScript files</li>
<li><code><title></code>: contains the title of the web page, which will be displayed in the web browser's title bar or tab</li>
<li><code><body></code>: contains the main content of the web page, which will be displayed in the web browser's window</li>
<li><code><p></code>: contains the paragraphs of text on the web page</li>
<li><code><strong></code>, <code><em></code>: child elements of the <code><p></code> elements, they are used to mark text as important and emphasized respectively
</li>
</ul>
</section>
<section class="main-section" id="What_are_HTML_elements?">
<header>What are HTML elements?</header>
<p>HTML elements consist of several parts, including the opening and closing tags, the content, and the attributes. Here is an explanation of each of these parts:</p>
<p><code><p>Learn to code for free at Freecodecamp.org</p></code></p>
<p>here,</p>
<ul>
<li>The opening tag: <code><p></code> This consists of the element name, wrapped in angle brackets. It indicates the start of the element and the point at which the element's effects begin.</li>
<span></span>
<li>The closing tag: <code></p></code> This is the same as the opening tag, but with a forward slash before the element name. It indicates the end of the element and the point at which the element's effects stop.</li>
<li>The content: <strong>Learn to code for free at Freecodecamp.org</strong> This is the content of the element, which can be text, other elements, or a combination of both.</li>
<li>The element: <code><p>Learn to code for free at Freecodecamp.org</p></code> The opening tag, the closing tag, and the content together make up the element.
</li>
</ul>
</section>
<section class="main-section" id="What_are_html_atrributes">
<header>What are HTML atrributes</header>
<p>HTML elements can have attributes, which provide additional information about the element. They are specified in the opening tag of the element and take the form of name-value pairs. Let's see an example:</p>
<p><code><a href="http://www.freecodecamp.org"> Example </a></code></p>
<p>The href is an attribute. It provides the link information about the <a> tag. In the above example,</p>
<p>href - the name of attribute</p>
<p>https://www.freecodecamp.org - the value of attribute</p>
</section>
<section class="main-section" id="HTML_syntax">
<header>HTML Syntax</header>
<p>We need to follow a strict syntax guidelines to write valid HTML code. This includes the use of tags, elements, and attributes, as well as the correct use of indentation and white space. Here are some key points about HTML syntax:</p>
<ol>
<li> HTML tags consist of the element name, wrapped in angle brackets. For example,
</li>
<p><code><h1></code>, <code><p></code>, <code><img> are some HTML tags.</code></p>
<li> HTML elements are created by enclosing the content of the element inside the opening and closing tags of the element. For example,</li>
<p><code><span>Some text here<span></code> : is an HTML element.</p>
<li>HTML attributes are used to provide additional information about HTML elements and are specified in the opening tag of the element. For example,</li>
<p><code><a target="www.google.com">Click here</a> </code>: Here, target is an attribute.</p>
<li>HTML code should be well-formed and properly indented, with each element on its own line and each level of hierarchy indented by one level. This makes the code easier to read and understand, and can help to avoid errors. For example,</li>
<code><pre><html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>My First HTML Page</h1>
<p> Hello World!</p>
</body>
</html></pre></code>
</ol>
</section>
<section class="main-section" id="Cons_of_HTML">
<header>Cons of HTML</header>
<p>Here are some of the cons of using HTML:</p>
<ul>
<li>text-based language, which can make it difficult to read and write</li>
<li>may not be powerful enough to handle some of the more complex features found in modern web pages</li>
<li>can be challenging to maintain and update over time</li>
<ul>
</section>
<section class="main-section" id="Reference">
<header>Reference</header>
<p>All the information on this page was gathered from <a href="https://www.programiz.com/html/what-is-html">Programiz</a></p>
</section>
<footer>
Done by: Brandon Thomas
</footer>
</main>
</body>
</html>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36 Edg/118.0.2088.61
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: