HTML attributtes help

Hello everyone , i have some problems with several elements and attributes in html Beginning with elements , i do not understand what is the role of some elements like body , head , main , section. Also what is the difference between head and header elements
And i do not understand what is the main purpose of “for” and “id” attribute or when should i use some attributes like name attribute , that means when should i use them and why not ?
Added to that how can i know that the meta element should be nested within the head element not for exemple on other element ?
The last question why should i use the title element and even i do not use it the title will appear just if i made a h1 tag contain the title content (for example Catphotoapp).

I understand that there are many questions, and some of them overlap. I hope you can be patient with me and help me solve these issues, as I really want to grasp the HTML well. If you can’t answer all the questions, that’s okay—even providing a resource like a YouTube video, a free course, or anything else that could help me understand would be greatly appreciated.

Hi. Have you followed through the basic exercises in the HTML responsive web design course? This goes over the key fundamentals. If you need more explanations you could look up each element on W3 schools for more explanation and examples.

A suggestion might be to do the above, and then to post a topic with the ones you are still unsure of and ask for help. This is a lot to ask someone to answer as you have queries with a lot of them.

On h1 to h6, they are pre-determined - you know that if you use them they will print a certain size text. Also they follow industry standards and screen readers interpret them as a heading so they are good for SEO.

There is a manual of industry standards for web design that sets the principles. The Web Content Accessibility Guidelines (WCAG) - it is mentioned on the full stack curriculum in the web design course.

2 Likes

Yes i have followed clearly the first project (cat photo app) . even i made notes to every new notion i have learned , but i tell you i’m a beginner and i faced some problems with english while learning with freecodecamp . Thank you at all

the title is a special element that goes inside the head, it says to the browser what is the title of the page so that it can appear in the tab, an h1 can’t do the same thing
image

body and head are elements for the structure of the html file
the body contains the html elements visible on the page, the head contains other important information that is not visible on the page

section and main go inside body, they are semantic elements that identify parts of the page: main goes around the main content, and section groups together elements

the id is used to uniquely identify an element
the for attribute is used on label element to link the label element with an input element with an id of equal value, it is what allows for a click on the label to select the input

the name attribute goes on input elements, it is used to give a label to the data in the input element when it is trasmitted programmatically, you should always use it when you write an input element

it goes there, it’s standard practice, don’t put it somewhere else

you can continue your html journey with the full stack curriculum: https://www.freecodecamp.org/learn/full-stack-developer/ there is more explained there

2 Likes

You have no idea how much this helps me , Thank you so much ! i truly appreciate your help