Question with regards to header

hi guys what i would like to know is why people use the following between header elements on a survey form and what purpose does it serve?

< head >
< meta charset=“UTF-8” >
< meta name=“viewport” content=“width=device-width”, initial-scale=1 >
< /head >

This is just boilerplate HTML.
Think of it like a foundation for your house , you don’t mess with it.

1 Like

so should i always include it or how do i know when to include it or not

Always include it.
Don’t mess with the boilerplate

  • <meta charset="UTF-8"> is used for security reasons whenever page has any kind of user textual input. It doens’t allow user to input characters with different encoding format (which easily leads to number of possible attacks)

  • <meta name="viewport" content="width=device-width"> (You no longer need to use initial scale) basically tells device’s browser that your page is responsive and ready to be displayed on any device.

2 Likes

@Imstupidpleasehelp: It’s better to explain what things are for rather than to just telling people to not touch them.

@snigo: The charset attribute on the meta tag doesn’t do anything for security, since clients can still send back whatever bytes they want in the payload and declare them in whatever charset they want in the headers. What it’s for is to tell the browser what the page’s charset is in if the charset is missing in the Content-Type header. If it’s in the header, the meta tag is ignored. A well-behaved server/app should always be setting the charset in the Content-Type header anyway.

The meta charset tag is a good hint to editors if the doc isn’t in utf8 (utf8 is the default), but the webserver may still make you recode it anyway if it demands to serve up all html as utf8. I believe Apache can do some encoding magic using file extensions, but that’s apache-specific.

Wasn’t aware that initial-scale was obsolete. Good to know.

1 Like

thank you very very much chuck , i kind of get what you saying but i havent come across it in the tutorials and this is complete french for me ie. charset payload utf8 etc. where can i learn more about it?

so does that mean once i add < meta name=“viewport” contentt=“width=device-width” > my webpage become automatically responsive to any device hence there is no need for me to type any further responsive codes because its really confusing me. thanks

No that is not what that means. You can read more about the viewport meta tag.

Standard metadata names

viewport: gives hints about the size of the initial size of the viewport. Used by mobile devices only.

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

1 Like

No :slight_smile: That would be awesome, isn’t it?
Without this meta tag, browser will presume your webpage isn’t responsive (for mobile devices) even if it is.

now that makes sense :ok_hand: