# Question with regards to header

**URL:** <https://forum.freecodecamp.org/t/question-with-regards-to-header/377931>\
**Category:** General\
**Created:** [April 23, 2020, 8:14pm UTC](https://forum.freecodecamp.org/t/question-with-regards-to-header/377931 "2020-04-23T20:14:22Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![muhammadjomo](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/muhammadjomo/32/137056_2.png) [@muhammadjomo](https://forum.freecodecamp.org/u/muhammadjomo)\
**Post date:** [April 23, 2020, 8:14pm UTC](https://forum.freecodecamp.org/t/question-with-regards-to-header/377931/1 "2020-04-23T20:14:22Z")

</div>

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 \>

---

<div class="post-metadata">

**Author:** ![Imstupidpleasehelp](https://avatars.discourse-cdn.com/v4/letter/i/7ab992/32.png) [@Imstupidpleasehelp](https://forum.freecodecamp.org/u/Imstupidpleasehelp)\
**Post date:** [April 23, 2020, 8:21pm UTC](https://forum.freecodecamp.org/t/question-with-regards-to-header/377931/2 "2020-04-23T20:21:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![muhammadjomo](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/muhammadjomo/32/137056_2.png) [@muhammadjomo](https://forum.freecodecamp.org/u/muhammadjomo)\
**Post date:** [April 23, 2020, 8:23pm UTC](https://forum.freecodecamp.org/t/question-with-regards-to-header/377931/3 "2020-04-23T20:23:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Imstupidpleasehelp](https://avatars.discourse-cdn.com/v4/letter/i/7ab992/32.png) [@Imstupidpleasehelp](https://forum.freecodecamp.org/u/Imstupidpleasehelp)\
**Post date:** [April 23, 2020, 8:23pm UTC](https://forum.freecodecamp.org/t/question-with-regards-to-header/377931/4 "2020-04-23T20:23:55Z")

</div>

Always include it.  
Don’t mess with the boilerplate

---

<div class="post-metadata">

**Author:** ![snigo](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/snigo/32/128765_2.png) [@snigo](https://forum.freecodecamp.org/u/snigo)\
**Post date:** [April 23, 2020, 8:57pm UTC](https://forum.freecodecamp.org/t/question-with-regards-to-header/377931/5 "2020-04-23T20:57:40Z")

</div>

- `<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.

---

<div class="post-metadata">

**Author:** ![chuckadams](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/chuckadams/32/109651_2.png) [@chuckadams](https://forum.freecodecamp.org/u/chuckadams)\
**Post date:** [April 23, 2020, 9:14pm UTC](https://forum.freecodecamp.org/t/question-with-regards-to-header/377931/6 "2020-04-23T21:14:54Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![muhammadjomo](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/muhammadjomo/32/137056_2.png) [@muhammadjomo](https://forum.freecodecamp.org/u/muhammadjomo)\
**Post date:** [April 24, 2020, 8:00pm UTC](https://forum.freecodecamp.org/t/question-with-regards-to-header/377931/7 "2020-04-24T20:00:10Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![muhammadjomo](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/muhammadjomo/32/137056_2.png) [@muhammadjomo](https://forum.freecodecamp.org/u/muhammadjomo)\
**Post date:** [April 24, 2020, 8:03pm UTC](https://forum.freecodecamp.org/t/question-with-regards-to-header/377931/8 "2020-04-24T20:03:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [April 24, 2020, 8:13pm UTC](https://forum.freecodecamp.org/t/question-with-regards-to-header/377931/9 "2020-04-24T20:13:44Z")

</div>

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

> [Standard metadata names](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name)
> 
> `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](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)

---

<div class="post-metadata">

**Author:** ![snigo](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/snigo/32/128765_2.png) [@snigo](https://forum.freecodecamp.org/u/snigo)\
**Post date:** [April 24, 2020, 8:19pm UTC](https://forum.freecodecamp.org/t/question-with-regards-to-header/377931/10 "2020-04-24T20:19:33Z")

</div>

No 🙂 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.

---

<div class="post-metadata">

**Author:** ![muhammadjomo](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/muhammadjomo/32/137056_2.png) [@muhammadjomo](https://forum.freecodecamp.org/u/muhammadjomo)\
**Post date:** [April 24, 2020, 8:20pm UTC](https://forum.freecodecamp.org/t/question-with-regards-to-header/377931/11 "2020-04-24T20:20:42Z")

</div>

now that makes sense 👌

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:57pm UTC](https://forum.freecodecamp.org/t/question-with-regards-to-header/377931/12 "2021-06-01T18:57:53Z")

</div>


