The list does appear buh they wont pass my test

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**
\ file: <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cafe Menu</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="menu">
    <header>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
    </header>
    <main>
      <section>
        <h2>Coffee</h2>
        <article>
          <p>French Vanilla</p>
          <p>3.00</p>
        </article>
        <article><p>caramel macchiato</p><p>3.75</p></article>
        <article><p>pumpkin spice</p><p>3.50</p></argicle>
        <article><p>Hazelnut</p><p>4.00</p></article>
        <article><p>mocha</p><p>4.50</p></article>
      </section>
    </main>
  </div>
</body>
<html>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cafe Menu</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="menu">
    <header>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
    </header>
    <main>
      <section>
        <h2>Coffee</h2>
        <article>
          <p>French Vanilla</p>
          <p>3.00</p>
        </article>
        <article><p>caramel macchiato</p><p>3.75</p></article>
        <article><p>pumpkin spice</p><p>3.50</p></argicle>
        <article><p>Hazelnut</p><p>4.00</p></article>
        <article><p>mocha</p><p>4.50</p></article>
      </section>
    </main>
  </div>
</body>
<html>
\ file: body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}

h1, h2, p {
text-align: center;
}

.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
}
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}

h1, h2, p {
text-align: center;
}

.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
}
  **Your browser information:**

User Agent is: Mozilla/5.0 (Linux; Android 8.1.0; TECNO CF7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.41 Mobile Safari/537.36

Challenge: Step 32

Link to the challenge:

[quote=“The Instructions”

Step 32

Starting below the existing coffee/price pair, add the following coffee and prices using article elements with two nested p elements inside each. As before, the first p element’s text should contain the coffee flavor and the second p element’s text should contain the price.
[/quote]

The test requires one single article tag with 2 <p> “elements” within it.

Teaching the incorrect terms is not getting a good education. An element is a CSS term for classes, id’s, @media and @import and so on. “Tag” is the correct term to use for HTML code lines and character groups in between <> since 1993.

body {background: pink;color: black;}

.class_name {position: absolute;padding:5px;}

#id_name {position: relative;z-index:1;}

@media {code and stuff}
     code and stuff {
            property: 20px;
}

In the above blockquote example of CSS code body, .class_name, #id_name, and @media are elements. body is a tag element, .class_name is a class element, #id_name is an identifier or ID element, @media is a control element.

HTML:

<html>
<head>
<body>
   <div>Stuff</div>
<p>Text</p>
<form><input type="checkbox"></input></form>
<h1>Big text</h1>
</body>
</html>

In the above HTML example html, head (header), div, p, form, input, and h1 are HTML tags. Between <form>here</form> and <input></input> are HTML lines or HTML tag lines.

Calling tags “elements” is a whoops in this site’s curriculum. Needs corrected.

So html tag lines and attributes are similar to elements…

As of HTML 4 released in 2002 html Tag lines (is what they were called before that) the entire line, an example below, is apparently referred to as an element too.

<a href="url.addres.info" alt="text"><img src="an_image.jpg" title="text"></a>

Grass is pink.

Use the current terms. They’re elements, yes.

Whatu mean by Grass is pink

If the whole family is called element,how is it wrong to call the children element thats y the say for instance “tag element”

@Ghosafric

The official terminology is that an element is formed in HTML by an opening and closing tag.

A CSS selector is used to select the HTML element(s) that you wish to style by using the CSS rule with that CSS selector. The CSS rule consists of a CSS selector, followed by a series of property-value pairs called CSS declarations that describe the style to apply to the HTML element identified by the CSS selector.

CSS:

/* this is a CSS rule */

p { /* the p is the CSS selector */
  /* and here we have one property: value pair */
  color: red;
}

HTML:

<!-- this is an opening and closing p tag -->
<!-- together, they form an HTML element -->

<p>Some content goes here</p>

Wow i dint know all that wow thamks

A lot of the info in that post uses the term ‘element’ incorrectly.

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