Survey Project 2 Query on Semantic HTML

[Codemiester]

Hi everyone,

I’m just beginning the second project and would like advice on what the most structurally appropriate html is.

Looking at the project template I see the designer has made a few choices.

The whole of the survey is contained in a div. Would it be appropriate to use a main tag seeing as this is the total content of a web page?

Within the form tag each label/paragraph and input is nested within a div.form-group. Could these divs be updated to become any other tags? maybe section?

In terms of accessibility. While I don’t know any Javascript. Is it worth including any ARIA attributes?

Thanks for all your help

[marcuoware]

The project is structured in a way that , with or without Javascript ,what is checked is the Html and Css part .So it all depends on you.

[iamaxi]

Hi Codemiester

Well I’m a beginner in Web Development and I got into this problem too, the most important thing is you try to be original and create it as you like.

I did put the whole survey in a div that has more divs in it for each other attributes.
I’ll leave my code pen profile here so try to get some ideas from it.

Survey Form

[iamaxi]

Also don’t be afraid to search more stuff, I learned a lot of stuff from searching how to stylize my survey and give it life instead to make a simple thing.
Don’t try to just pass the tests, try to make it as hard as possible and you will be happy at the final. It also will help you for your portofolio

[marcuoware]

Creative , the header , main and footer tags are to make your code readeable , so as long as you are not using div in their stead i think is ok .
You could even use this div to make the form responsive

[iamaxi]

Yea you’re right I just forgot about them, it could be so much easier to read the code if I had them.

[marcuoware]

Yup and it a good practice to always use them ,if not for your sake : other programs to read your codes with ease too

[Codemiester]

Thanks for opening up the conversation!

Summary

I think the div.container that wraps around the form is for basic layout purposes, but also plays a key role in making the project responsive with media queries. It looks like the designer may have taken a mobile-first approach as the queries target screens progressively bigger travelling down the style sheet. I’ll try to use the main tag in place of div. I don’t think it will make any difference dynamically as they are both block elements.

Here is a really helpful link I found on HTML semantics for forms

https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form

Thanks again for indulging me and contributing your thoughts