I’m just wanting a better understand for the use of separate meta tags. My search online didnt give me much of an answer about this. Why would we use different meta tags for the view port and charset attributes?
Some of these tags cannot be added to the same meta element.
You would have to read the specifications to find out more about that.
The meta tag is used to provide information about the document for the browser and search engines.
The viewport meta tag is used to control the layout of a web page on different devices and screen sizes. For example, setting the viewport to width=device-width makes the page match the width of the device screen.
The charset meta tag is used to specify the character encoding for the document. This is important because different characters might not display correctly if the wrong encoding is used. For example, setting the charset to UTF-8 ensures that all characters are displayed correctly, regardless of the language used on the page.
In summary, separate meta tags are used for viewport and charset attributes because they serve different purposes and need to be set independently of each other.
1 Like
Although you expounded, you didn’t give me much outside of what I already know outside of (i.e them are not the same and having different results). I just want to know are the results so different that it would cause a bug. Would a result that is not intended to happen happen because we put them in the same tag? Is the code not going to be read well enough to therefore cause a negative effect? I need more of an example.
yes. mixing them would not be considered valid html.
The specs go into detail about which ones work with which.
Let me know if you have trouble understanding something there.
Thank you for the reply but this didnt really help me with my inquiry though. Thanks for putting out the energy and trying to help though, again. Greatly appreciated
This help a little more by saying but not saying the computer cannot recognize the code. Thanks.
The curriculum has already done the work of distilling the information about correct syntax for us. Your question though is going beyond the curriculum so I’m trying to provide you with something definitive to answer you.
Whenever you have a question that is not easily found in the curriculum or in general google, the specs of the language is where the definitive answer is to be found.
For this case, the specs (linked from MDN are HTML Standard)
And the specific series of phrases that lead to understanding why the curriculum makes you create two meta tags for charset and viewport are here:
Exactly one of the
name,http-equiv,charset, anditempropattributes must be specified.
If either
name,http-equiv, oritempropis specified, then thecontentattribute must also be specified. Otherwise, it must be omitted.
So you can see that if you said <meta name=... you cannot also add charset based on the first rule given “Exactly one of the …”
While the content attribute for example is required if you specify the name (as per the second rule).
Etc.
It doesn’t really explain why, though. I believe the parsing rules for charset would not work as you might have an element like this.
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"/>
Which would fail the parsing for the charset
2.5.3 Extracting character encodings from meta elements
The algorithm for extracting a character encoding from a
metaelement, given a string s, is as follows. It either returns a character encoding or nothing.
- Let position be a pointer into s, initially pointing at the start of the string.
- Loop: Find the first seven characters in s after position that are an ASCII case-insensitive match for the word “
charset”. If no such match is found, return nothing.
But that honestly still doesn’t explain why the parsing rules are the way they are. Also, the specs are hard to read and I feel a little dumb when reading them. 
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.