Tell us what’s happening:
Hey! So I go to test my code but every time, I keep getting test #5 wrong which states “the first child of each .main-section should be a header element.”. I checked numerous times and all my section elements which contains a “main-section” has a header as its first child but it keeps telling me the opposite. Please help.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Technical Documentation Page</title>
<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="#HTML:_Creating_Content">HTML: Creating Content</a>
</li>
<li>
<a class="nav-link" href="#So_what_is_HTML?">So what is HTML?</a>
</li>
<li>
<a class="nav-link" href="#Anatomy_of_an_HTML_element">Anatomy of an HTML element</a>
</li>
<li>
<a class="nav-link" href="#Nesting_Elements">Nesting Elements</a>
</li>
<li>
<a class="nav-link" href="#Void_Elements">Void Elements</a>
</li>
<li>
<a class="nav-link" href="#Creating_your_first_HTML_document">Creating your first HTML document</a>
</li>
<li>
<a class="nav-link" href="#Images">Images</a>
</li>
<li>
<a class="nav-link" href="#Marking_up_text">Marking up text</a>
</li>
<li>
<a class="nav-link" href="#Paragraphs">Paragraphs</a>
</li>
<li>
<a class="nav-link" href="#Lists">Lists</a>
</li>
<li>
<a class="nav-link" href="#Links">Links</a>
</li>
<li>
<a class="nav-link" href="#Reference">Reference</a>
</li>
</ul>
</nav>
<main id="main-doc">
<section id="Introduction" class="main-section">
<header>Introduction</header>
<article>
<p>HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).</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>
<p>An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by < and >. The name of an element inside a tag is case-insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the < title > tag can be written as < Title >, < TITLE >, or in any other way. However, the convention and recommended practice is to write tags in lowercase.</p>
</article>
</section>
<section id="HTML:_Creating_Content" class="main-section">
<header>HTML: Creating Content</header>
<article>
<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. This article provides a basic understanding of HTML and its functions, and shows you how to create the basic content for your first website.</p>
<table>
<tbody>
<tr>
<th>Prerequisites:</th>
<td>Basic familiarity with your computer operating system, the basic software you will use to build a website, and file systems.</td>
</tr>
<tr>
<th>Learning outcomes:</th>
<td>
<ul>
<li>The purpose and function of HTML.</li>
<li>The basic parts of HTML syntax — opening and closing tags, elements, attributes, head, body.</li>
<li>Common HTML elements including paragraphs, headings, images, lists, and links.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</article>
</section>
<section id="So_what_is_HTML?" class="main-section">
<header>So what is HTML?</header>
<article>
<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><span><</span>p<span>></span> My cat is very grumpy <span><</span>/p<span>></span></code>
</article>
</section>
<section id="Anatomy_of_an_HTML_element" class="main-section">
<header>Anatomy of an HTML element</header>
<article>
<p>Let's explore this paragraph element a bit further.</p>
<img src="https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content/grumpy-cat-small.png" alt="paragraph containing opening tag, closing tag, content, and element" width="600" height="200" loading="lazy">
<p>The main parts of our element are as follows:</p>
<ol>
<li><strong>The opening tag:</strong> This consists of the name of the element (in this case, p), wrapped in opening and closing <strong>angle brackets.</strong> This states where the element begins or starts to take effect — in this case where the paragraph begins.</li>
<li><strong>The closing tag:</strong> This is the same as the opening tag, except that it includes a <em>forward slash</em> before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.</li>
<li><strong>The content:</strong> This is the content of the element, which in this case, is just text.</li>
<li><strong>The element:</strong> The opening tag, the closing tag, and the content together comprise the element.</li>
</ol>
<p>Elements can also have attributes that look like the following:</p>
<img src="https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content/grumpy-cat-attribute-small.png" width="600" height="100" loading="lazy">
<p>Attributes contain extra information about the element that you don't want to appear in the actual content. Here, <code>class</code> is the attribute <em>name</em> and <code>editor-note</code> is the attribute <em>value.</em> The class attribute allows you to give the element a non-unique identifier that can be used to target it (and any other elements with the same <code>class</code> value) with style information and other things.</p>
<p>Attributes that set a value always have:</p>
<ol>
<li>A space between it and the element name (or the previous attribute, if the element already has one or more attributes).</li>
<li>The attribute name followed by an equal sign.</li>
<li>The attribute value wrapped by opening and closing quotation marks.</li>
</ol>
</article>
</section>
<section id="Nesting_Elements" class="main-section">
<header>Nesting Elements</header>
<article>
<p>You can put elements inside other elements too — this is called <strong>nesting.</strong> If we wanted to state that our cat is <strong>very</strong> grumpy, we could wrap the word "very" in a <code><span><</span>strong<span>></span></code> element, which means that the word is to be strongly emphasized:</p>
<code><span><</span>p<span>></span>My cat is <span><</span>strong<span>></span>very<span><</span>/strong<span>></span> grumpy.<span><</span>/p<span>></span></code>
<p>You do however need to make sure that your elements are properly nested. In the example above, we opened the <code><span><</span>p<span>></span></code> element first, then the <code><span><</span>strong<span>></span></code> element; therefore, we have to close the <code><span><</span>strong<span>></span></code> element first, then the <code><span><</span>p<span>></span></code> element. The following is incorrect:</p>
<code><span><</span>p<span>></span>My cat is <span><</span>strong<span>></span>very grumpy.<span><</span>/p<span>></span><span><</span>/strong<span>></span></code>
<p>The elements have to open and close correctly so that they are clearly inside or outside one another. If they overlap as shown above, then your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results. So don't do it!</p>
</article>
</section>
<section id="Void_Elements" class="main-section">
<header>Void Elements</header>
<article>
<p>Some elements have no content and are called <strong>void elements.</strong> Take the <code><span><</span>img<span>></span></code> element that we already have in our HTML page:</p>
<code><span><</span>img src="images/firefox-icon.png" alt="My test image" /<span>></span></code>
<p>This contains two attributes, but there is no closing <code><span><</span>/img<span>></span></code> tag and no inner content. This is because an image element doesn't wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.</p>
</article>
</section>
<section id="Creating_your_first_HTML_document" class="main-section">
<header>Creating your first HTML document</header>
<article>
<p>That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page. Let's create a basic HTML file, and have a look at what it is made up of:</p>
<ol>
<li>Inside your <code>web-projects</code> folder, create another new folder called <code>first-website</code>.</li>
<li>Inside <code>first-website</code>, Create a new file called <code>index.html</code>, and insert the following code into the file exactly as shown:</li>
</ol>
<div>
<pre>
<code>
<span><span><</span>!doctype html<span>></span></span>
<span><span><</span>html lang="en-US"<span>></span></span>
<span><span><</span>head<span>></span></span>
<span><span><</span>meta charset="utf-8" /<span>></span></span>
<span><span><</span>meta name="viewport" content="width=device-width" /<span>></span></span>
<span><span><</span>title<span>></span>My test page<span><</span>/title<span>></span></span>
<span><span><</span>/head<span>></span></span>
<span><span><</span>body<span>></span></span>
<span><span><</span>img src="" alt="My test image" /<span>></span></span>
<span><span><</span>/body<span>></span></span>
<span><span><</span>/html<span>></span></span>
</code>
</pre>
</div>
<p>Here, we have the following:</p>
<ul>
<li><code><span><</span>!doctype html<span>></span></code> — The <strong>doctype</strong> is a required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days, they don't do much and are basically just needed to make sure your document behaves correctly. That's all you need to know for now.</li>
<li><code><span><</span>html<span></span>></span><span><</span>/html<span>></span></code> — the <code><span><</span>html<span>></span></code> element. This element wraps all the content on the entire page and is sometimes known as the root element. It also includes the <code>lang</code> attribute, setting the primary language of the document.</li>
<li><code><span><</span>head<span>></span><span><</span>/head<span>></span></code> — the <code><span><</span>head<span>></span></code> element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like <strong>keywords</strong> and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.</li>
<li><code><span><</span>meta charset="utf-8"<span>></span></code> — This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.</li>
<li><code><span><</span>meta name="viewport" content="width=device-width"<span>></span></code> — This <strong>viewport element</strong> ensures the page renders at the width of viewport, preventing mobile browsers from rendering pages wider than the viewport and then shrinking them down.</li>
<li><code><span><</span>title<span>></span><span><</span>/title<span>></span></code> — the <span><</span>title<span>></span> element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favorite it.</li>
<li><code><span><</span>body<span>></span><span><</span>/body<span>></span></code> — the <code><span><</span>body<span>></span></code> element. This contains <em>all</em> the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.
</li>
</ul>
</article>
</section>
<section id="Images" class="main-section">
<header>Images</header>
<article>
<p>Let's turn our attention to the <code><span><</span>img<span>></span></code> element:</p>
<code><span><</span>img src="" alt="My test image" /<span>></span></code>
<p>This embeds an image into our page in the position it appears. It does this via the src (source) attribute, which contains the path to our image file.</p>
<p>We have also included an <code>alt</code> (alternative) attribute. In the <code>alt</code> attribute, you specify descriptive text for users who cannot see the image, possibly because of the following reasons:</p>
<ol>
<li>They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.
</li>
<li>Something has gone wrong causing the image not to display. If the <code>src</code> attribute does not contain a valid path to an image, the alt text will be displayed instead:
</li>
</ol>
<p>My Test Image</p>
<p>The keywords for alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of "My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox logo: a flaming fox surrounding the Earth."</p>
<p>Let's get your image displaying now.</p>
<ol>
<li>Inside the <code>first-website</code> folder, Create a new folder called <code>images</code>, and put the image you chose in the previous example inside this folder.
</li>
<li>Inside the <code><span><</span>img<span>></span></code> tag's <code>src</code> attribute value, enter the path to your image. It is inside a folder called <code>images</code>, which is inside the same directory as your <code>index.html</code> file, therefore the path will be <code>images/</code> plus the name of your image. For example, if your image was called <code>firefox-icon.png</code>, your <code>src</code> attribute would look like this: <code>src="images/firefox-icon.png"</code>.
</li>
<li>replace the <code>alt<code> attribute value — <code>My test image</code> — with some text that better describes your image.
</li>
<li>Open your <code>index.html</code> file inside a web browser. You should see your image displayed. If not, check your <code><span><</span>img<span>></span></code> element against our code above; make sure it is not missing any of the syntax, such as the quote marks. Make sure the image filename is correct.
</li>
</ol>
</article>
</section>
<section id="Marking_up_text" class="main-section">
<header>Marking up text</header>
<article>
<p>This section will cover some essential HTML elements you'll use for marking up the text.</p>
<p>Headings</p>
<p>Heading elements allow you to specify that certain parts of your content are headings — or subheadings. In the same way that a book has the main title, chapter titles, and subtitles, an HTML document can too. HTML contains 6 heading levels, <code><span><</span>h1<span>></span> - <span><</span>h6<span>></span></code>, although you'll commonly only use 3 to 4 at most:</p>
<pre>
<code>
<span><span><</span>!-- 4 heading levels: --<span>></span></span>
<span><span><</span>h1<span>></span>My main title<span><</span>/h1<span>></span></span>
<span><span><</span>h2<span>></span>My top level heading<span><</span>/h2<span>></span></span>
<span><span><</span>h3<span>></span>My subheading<span><</span>/h3<span>></span></span>
<span><span><</span>h4<span>></span>My sub-subheading<span><</span>/h4<span>></span></span>
</code>
</pre>
<p>Now try adding a suitable main title to your HTML page just above your <span><</span>img<span>></span> element. Save the file and view it in a browser to see the effect.</p>
</article>
</section>
<section id="Paragraphs" class="main-section">
<header>Paragraphs</header>
<article>
<p>As explained above, <code><span><</span>p<span>></span></code> elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content:</p>
<code><span><</span>p<span>></span>This is a single paragraph<span><</span>/p<span>></span></code>
<p>Add your sample text from the previous article into one or a few paragraphs, placed directly below your <code><span><</span>img<span>></span></code> element. Save it and look at your page in a browser.</p>
</article>
</section>
<section id="Lists" class="main-section">
<header>Lists</header>
<article>
<p>A lot of the web's content is lists and HTML has special elements for these. Marking up lists always consists of at least 2 elements. The most common list types are ordered and unordered lists:</p>
<ol>
<li><strong>Unordered lists</strong> are for lists where the order of the items doesn't matter, such as a shopping list. These are wrapped in a <code><span><</span>ul<span>></span></code> element.</li>
<li><strong>Ordered lists</strong> are for lists where the order of the items does matter, such as a list of cooking instructions in a recipe. These are wrapped in an <code><span><</span>ol<span>></span></code> element.</li>
</ol>
<p>Each item inside the lists is put inside an <code><span><</span>li<span>></span></code> (list item) element.</p>
<p>For example, if we wanted to turn the part of the following paragraph fragment into a list</p>
<div>
<pre>
<code>
<span><span><</span>p<span>></span></span>
<span>At Mozilla, we're a global community of technologists, thinkers, and builders working together…</span>
<span><span><</span>p<span>></span></span>
</code>
</pre>
</div>
<p>We could modify the markup to this</p>
<div>
<pre>
<code>
<span><span><</span>p<span>></span>At Mozilla, we're a global community of<span><</span>/p<span>></span></span>
<span><span><</span>ul<span>></span></span>
<span><span><</span>li<span>></span>technologists<span><</span>/li<span>></span></span>
<span><span><</span>li<span>></span>thinkers<span><</span>/li<span>></span></span>
<span><span><</span>li<span>></span>builders<span><</span>/li<span>></span></span>
<span><span><</span>/ul<span>></span></span>
<span><span><</span>p<span>></span>working together…<span><</span>/p<span>></span></span>
</code>
</pre>
</div>
<p>Try adding an ordered or unordered list to your example page, and view the result in a browser.</p>
</article>
</section>
<section id="Links" class="main-section">
<header>Links</header>
<article>
<p>Links are very important — they are what makes the web a web! To add a link, we need to use a specific element — <code><span><</span>a<span>></span></code> — "a" being the short form for "anchor". To make text within your paragraph into a link, follow these steps:</p>
<ol>
<li>Choose some text. We chose the text "Mozilla Manifesto".</li>
<li>
<p>Wrap the text in an <code><span><</span>a<span>></span></code> element, as shown below:</p>
<code><span><</span>a<span>></span>Mozilla Manifesto<span><</span>/a<span>></span></code>
</li>
<li>
<p>Give the <a> element an href attribute, as shown below:</p>
<code>
<span><</span>a href=""<span>></span>Mozilla Manifesto<span><</span>/a<span>></span>
</code>
</li>
<li>
<p>Fill in the value of this attribute with the web address that you want the link to point to:</p>
<pre>
<code>
<span><</span>a href="https://www.mozilla.org/en-US/about/manifesto/"<span>></span>
Mozilla Manifesto
<span><</span>/a<span>></span>
</code>
</pre>
</li>
</ol>
<p>You might get unexpected results if you omit the <code>https://</code> or <code>http://</code> part, called the protocol, at the beginning of the web address. After making a link, click it to make sure it is sending you where you wanted it to.</p>
</article>
</section>
<section id="Reference" class="main-section">
<header>Reference</header>
<article>
<ul>
<li>All the documentation on this page is taken word for word on <a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">MDN</a></li>
</ul>
</article>
</section>
</main>
</body>
</html>
/* file: styles.css */
@media (max-width: 768px) {
#navbar {
width: 358px;
}
#main-doc {
width: 318px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page