Technical documentation issue: my code has been showing error since yesterday and don't know how to fix it

HTML Documentation HTML: HyperText Markup Language

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).

"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. HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as


, , , , , , , 

,

, , ,
and many others. 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
  
tag can be written as
 

,
  
, or in any other way. HTML basics
  • 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.
So what is HTML?

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: My cat is very grumpy

If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:

My cat is very grumpy

Anatomy of an HTML element
  1. The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect, in this case where the paragraph begins.
  2. The closing tag: This is the same as the opening tag, except that it includes a forward slash 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.
  3. The content: This is the content of the element, which in this case, is just text. The element: The opening tag, the closing tag, and the content together comprise the element.

Attributes contain extra information about the element that you don't want to appear in the actual content. Here, class is the attribute name and editor-note is the attribute value. 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 class value) with style information and other things. An attribute should always have the following:

  1. A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
  2. The attribute name followed by an equal sign.
  3. The attribute value wrapped by opening and closing quotation marks.

Note: Simple attribute values that don't contain ASCII whitespace (or any of the characters " ' ` = < > ) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more consistent and understandable. Nesting elements

You can put elements inside other elements too, this is called nesting. If we wanted to state that our cat is very grumpy, we could wrap the word "very" in a

  
element, which means that the word is to be strongly emphasized:

 

My cat is very

You do however need to make sure that your elements are properly nested. In the example above, we opened the

 

element first, then the
  
element; therefore, we have to close the element first, then the
 

element. The following is incorrect:

 

My cat is very grumpy.

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!

Empty elements

Some elements have no content and are called empty elements. Take the

  
element that we already have in our HTML page:


        <img src="images/firefox-icon.png"
      

This contains two attributes, but there is no closing

  
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.

Anatomy of an HTML document

That wraps up the basics of individual HTML elements, but they aren't handy on their own. Now we'll look at how individual elements are combined to form an entire HTML page. Let's revisit the code we put into our

index.html

example (which we first met in the Dealing with files article):




  
<meta charset="utf-8">
<title>My test page</title>
My test image

Here, we have the following:

  <ul>
  • — doctype. It 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.
  • the
    element. This element wraps all the content on the entire page and is sometimes known as the root element.
  •   
    the
    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 keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.
  •   
    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.
  •   
    the
      
    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.
  •   
    the
      
    element. This contains all 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.
  • Images

    Let's turn our attention to the element again:

     My test image 
      <p>
    

    As we said before, it 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.

    We have also included an alt (alternative) attribute. In this attribute, you specify descriptive text for users who cannot see the image, possibly because of the following reasons:

    • They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.
    • Something has gone wrong causing the image not to display. For example, try deliberately changing the path inside your src attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:

    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." Try coming up with some better alt text for your image now.

    Marking up text

    This section will cover some of the essential HTML elements you'll use for marking up the text.

    Headings

    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,

     

    , although you'll commonly only use 3 to 4 at most:

    
    

    My main title

    My top level heading

    My subheading

    My sub-subheading

    Now try adding a suitable title to your HTML page just above your

      
    element.
            </p>
    
    • Note: You'll see that your heading level 1 has an implicit style. Don't use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO. Try to create a meaningful sequence of headings on your pages, without skipping levels.
    Paragraphs

    As explained above,

     

    elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content:

    This is a single paragraph

    Add your sample text (you should have it from What will your website look like?) into one or a few paragraphs, placed directly below your

    element.

    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:

  • Ordered lists are for lists where the order of the items does matter, such as a recipe. These are wrapped in an
    element.
  • <header>Lists</header>
    <article>
    <p>
    

    1. Unordered lists are for lists where the order of the items doesn't matter, such as a shopping list. These are wrapped in a
      element.
    Each item inside the lists is put inside an 
  • (list item) element.

    For example, if we wanted to turn the part of the following paragraph fragment into a list

    At Mozilla, we’re a global community of technologists, thinkers, and builders working together ...

    Links

    Links are very important, they are what makes the web a web! To add a link, we need to use a simple element

    "a" being the short form for "anchor". To make text within your paragraph into a link, follow these steps:
    Mozilla Manifesto
  • Give the
    element an href attribute, as shown below:
  • Mozilla Manifesto
  • Fill in the value of this attribute with the web address that you want the link to link to:
  • Mozilla Manifesto

    You might get unexpected results if you omit the https:// or http:// 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.

    • href might appear like a rather obscure choice for an attribute name at first. If you are having trouble remembering it, remember that it stands for hypertext reference.

    Add a link to your page now, if you haven't already done so.

    Reference
    • All the documentation in this page is taken from MDN

    In order to make helping you as easy as possible we really need a link to your project (a link to the codepen or wherever you are hosting it).

    Yes, what bbsmooth says. If you’re building it locally, a git repo would work too.

    And if you want to post code, please surround it with backticks so it shows properly, three on the line before, 3 on the line after:

    ```
    <h1>howdy</h1>
    ```
    

    Like that. You can use a single backtick for inline code.

    Thanks for the link. Now we need to know what specific error you are referring to.

    I can’t even run any test to know the exact issue, I don’t know maybe I made mistakes with the tags or whatsoever

    I typed all the code and content inside my Google docs, then I copied it and paste it to codepen.io when I get done with it in Google docs

    Since you are on the tech doc project I’m assuming you have done the previous ones and I’m assuming you added the FCC test suite to those? You would do the same thing here.

    Have you done the previous projects yet? If so, did you add the FCC test suite to them?

    I guess that’s where issue came from, I was uncomfortable to type in codepen.io that’s why typed everything inside Google docs

    Yes. I done the previous project and passed all the test

    I typed the last three project tags and content inside codepen.io

    As was mentioned in your survey project, when a test fails click the red button to see which test(s) are failing and text to help you correct the issue.
    Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

    On a side note, you really need to be using HTML entities and not the tags when you reference them in your doc.

    OK, you’ve got the FCC test suite included in the project properly, I believe the issue is with your HTML. The test suite is not adding to your project correctly because you have a lot of HTML errors.

    Using the <code> tag does not mean you can use other tags inside of it for display purposes. If you want a tag to show on the page without being interpreted by the browser as being an actual tag then you have to switch out the less than and greater than signs with their HTML entity equivalents, which are &lt; and &gt;.

    So if you want the <title> tag to appear on the page then you have to code it as &lt;title&gt;. You’ll probably have to fix all of these issues before the test suite shows up.

    Okay. Am gonna try that

    I unable to run the test suite that’s why I didn’t find the issue. I guess something is wrong with some tags in the document

    This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.