What is the relationship of the `h1` and `p` elements in regards to the `form`?

I still making confusion on how the elements are related…
In this exercise … https://www.codecademy.com/courses/learn-html/lessons/html-forms/exercises/creating-form?action=resume_content_item
We had to add a h1 element under form and add p under h1 like this:
form action="/practice.html" method=“post”
h1>Menu</h1
p> Davie’s Food Menu</p
</form
My question is… Is h1 and p siblings and child of form? or is p child of h1 and grandchild of form ???

Note the example above doesn’t have the right open and close tags because it modifies my text :upside_down_face:

I still don’t understand how it works … Thanks

I believe from what you’ve described that <h1> and <p> are siblings, and are children of your <form> element. To format your code so that it will display properly in the forum, go to a blank line, click on the </> button in the menu bar above where you type. You will see this:
capture_r

Paste your code in the space indicated, and we will see it with its original formatting and special characters preserved.

11 Likes

hello @midlindner … thanks for the tip … now I know how to use a piece of code to display between my text… Haha… got love learn this things! :smile:
Appreciate your help!

2 Likes

What is the button to which you refer? I see no buttons anywhere, and always just type all of the code myself. I’d love a shortcut, as I have seen in some of the videos.

1 Like

Above the text box that you type in, there should be a few icons to format your response (including B and I – bold and italics). The 6th icon is the </> which will let you input your code! Hope this helps!

3 Likes

Even I had difficulty in understanding it, thanks @aranishanker for clarifying further. :slightly_smiling_face:

1 Like

Hi,
I do not see these icons above my textbox. Any chance you can take a screenshot to show me?


imagen

2 Likes

It is not a fool question! :wink:

2 Likes
Thank youuuu
<form>
  <h1>
  <p>

h1 and p are child of form.

<form>
  <h1>
    <p>

h1 is child of form, p is child of h1, so it is grandchild of form.

Hopefully my understanding of parent, child, grandchild is correct

I don’t think this is correct.

HTML doesn’t care about whitespace, so indenting your element tags is not going to change the actual structure of the document. Indentation is meant to more easily indicate parent/child relationships to the developer reading the code (either yourself or someone else).

Some elements are block elements and some are inline elements. These elements affect the structure of the document. Block elements can contain other block elements or inline elements (aka can be parents). Inline elements contain data. <h1> and <p> are inline elements, if I’m not mistaken.

To read more about block layout elements vs inline layout elements, chekc out the MDN article on the subject.

Also, I am new so if someone more experienced than me can confirm this, it would be much appreciated.

Hi @codedcolt0961340047,

You are correct in that whitespace/indentation does not affect structure or relationships between elements in HTML, but <h1> and <p> are not inline elements, they are block elements - they take up the whole width of the document, section or other elements that may contain them. This is a good read on the topic.

@tildapinheiro9541952 As for the relationship between <h1>, <p> and the <form>, the heading and the paragraph are indeed siblings (they share the same parent) and the form’s children (the beforementioned parent). This, however, does not affect the form submission in any way, they are there to provide (additional) information.

Cheers!

1 Like