Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

In the demo project, the user uses javascript as the main topic so when showing the code demonstrations it appears clearly in the interface, I chose html and when putting the code demonstrations the opening and closing tags do not appear in the interface. How can I make them appear?

Your code so far

<!-- file: index.html -->
<!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>
<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="What_you_should_already_know">What you should already know</a></li>
    <li><a class="nav-link" href="HTML_basics">HTML basics</a></li>
    <li><a class="nav-link" href="Elements">Elements</a></li>
    <li><a class="nav-link" href="Attributes">Attributes</a></li>
    <li><a class="nav-link" href="Images">Images</a></li>
    <li><a class="nav-link" href="References">References</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<article>
  <p><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content.</p>
  <p>"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p>
</article>
</section>
<section class="main-section" id="What_you_should_already_know">
<header>What you should already know</header>
<article>
  <p>Unlike other programming laguages where you need knowledge in certain areas before starting,  HTML is text-based computer coding, and anyone can learn and run it, as long as they understand letters and basic symbols. So, all you need is basic computer knowledge and the ability to work with files.</p>
</article>
</section>
<section class="main-section" id="HTML_basics">
<header>HTML basics</header> 
<p>HTML (HyperText Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions.</p>
<p>HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. For example, take the following line of content:</p>
<code>My cat is very grumpy</code>
<p>If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:</p>
<code><p>My cat is very grumpy</p></code>




</main>    
</body>
</html>

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

Captura de pantalla 2024-11-26 125025
Captura de pantalla 2024-11-26 125025430×198 7.76 KB

2

Hi there!

When embedding HTML code examples within a user interface (such as a webpage or application), the browser interprets HTML tags as actual elements. To display the tags as part of the text (instead of being interpreted as elements), you need to escape the HTML characters. Specifically:

Replace < with &lt;
Replace > with &gt;

Example code 
<div>Hello, World!</div>
//If you want to display the above

// code it like below 
&lt;div&gt;Hello, World!&lt;/div&gt;

If you’re dynamically inserting the code examples with JavaScript, you can use a function to escape the HTML before adding it to the DOM:

Example code

function escapeHTML(html) {
return html
.replace(/</g, “<”)
.replace(/>/g, “>”);
}

const code = “

Hello, World!
”;
const container = document.getElementById(“code-container”);

container.innerHTML = <pre>${escapeHTML(code)}</pre>;

1 Like
3

Yep, it worked
tysm!

1 Like