locked
Why do we place link tags for CSS, javascript files in <head> tag RRS feed

  • Question

  • User-719614390 posted

    I am using HTML for a while now. I need some clarifications though.

    1. Why do we place link tags for CSS, javascript files in <head> tag?
    2. Why to use semantic tags?
    3. Why do we need DOCTYPE? only for version name or any other specification. 
    4. How to develop multi lingual websites and use them in SPA.
    5. What is difference between <section> and <div>? Mostly div is used now a days.
    6. Wt are data attributes good for? I do not see the performance much improved. Any good practices are appreciated
    7. cookie vs session storage vs local storage?
    8. rel="noopener" why is it used? Need clarifications
    9. Wat are web workers?

    Sorry for multiple questions but am trying to get a conceptual knowledge in these topics.

    Tuesday, April 2, 2019 6:38 PM

Answers

  • User839733648 posted

    Hi ddesaraju,

    • The reason for <link> at the top is browsers have to reflow the layout as CSS files load moving elements around while the user is trying to interact with the page.

    For <script> files at the end, browsers have to block processing the HTML while a JavaScript file is loaded and run in case it makes in Write() calls.

    If the <script> tag is at the end, the browser can still display all of the HTML above the <script> tags while it is processing the JavaScript.

    You could also put the <script> in the head, but you should add $( document ).ready() in your script.

    For more, you could refer to: https://developer.yahoo.com/performance/rules.html?guccounter=1#css_top 

    • The benefit of writing semantic HTML stems from what should be the driving goal of any web page— the desire to communicate.

    By adding semantic tags to your document, you provide additional information about that document, which aids in communication.

    Specifically, semantic tags make it clear to the browser what the meaning of a page and its content is.

    For more, you could refer to: https://www.lifewire.com/why-use-semantic-html-3468271

    • This functionality came about because of the "broken" rendering in old versions of IE.

    It was realised that if Microsoft just "fixed" the IE rendering engine lots of existing sites would not render properly.

    So the way it works is if you put any valid DOCTYPE declaration at all in your page the assumption is that you know what you're doing and your browser will render in a standards compliant way, and if you don't put one in it will render in the old "wrong" way.

    For more, you could refer to: https://en.wikipedia.org/wiki/Quirks_mode#Triggering_different_rendering_modes 

    About the conceptual knowledge of HTML, I suggest you could refer to the following sites to learn:

     https://developer.mozilla.org/en-US/docs/Web/HTML 

     https://www.w3schools.com/html/ 

    And you also could search by Chrome to find the answer to your questions.

    Besides, I suggest that you could make demos when learning, then if you have issues with your code, you could come to community to ask for help.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 3, 2019 5:43 AM
  • User-474980206 posted

    web standards have changed over time. originally script tags and css tags belonged in the <head> because they are not content. CSS like still belong in the head (so its can be applied to html as its rendered), but for faster site loading, the current trend is to move all scripts to end of the document. 

    at one time xml was popular, and there was a trend to make website xml friendly, and use xhtml syntax. DOCTYPE define the html as a xhtml document.  but this is not all obsolete with html 5. you should just have a <html> tag.

       https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

    semantics is import when non-humans are reading the document, say search engines, and site indexers. if your site is trying to get a high SEO rating you better be using semantics. you should use the semantic version of div (which is just a block element) to structure your page.

    its common practice to use progressive code, or templates for adding javascript to a page. the data-* allow adding additional attributes to a html elements to be used by the javascript. while you can just makeup any attribute name, a html verifier will fail the page. Often there are contact obligations for a page to be "valid" html. the data-* is a supported method that allows additional attributes to be added to an element and still be valid html.

    originally browsers only offered cookie storage. the cookie data is sent to the server as header (though javascript could access the cookie in the rendered html - there are restriction on this now). over time addition options where added for javascript to store and fetch data stored by the browser (local storage).  different browser have different local storage options. name/value pairs are the most common, but the webkit browsers (chrome. safari) also support sqlite databases. to make it safe to use local storage on shared computers (where the storage was only need for one session, the session feature was added. session storage is not saved to disk, and is deleted on browser exit.

    when your browser open a new window via an anchor with a target, current browser security allows the new page to access the opener. 

       <a rel="noopener" target="_blank" href="....">

    disables this feature (not supported by IE/edge)

    javascript in the browser is a single thread environment. web workers allow background javascript threads to run. each web worker has it own javascript thread and environment.

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 3, 2019 4:01 PM

All replies

  • User839733648 posted

    Hi ddesaraju,

    • The reason for <link> at the top is browsers have to reflow the layout as CSS files load moving elements around while the user is trying to interact with the page.

    For <script> files at the end, browsers have to block processing the HTML while a JavaScript file is loaded and run in case it makes in Write() calls.

    If the <script> tag is at the end, the browser can still display all of the HTML above the <script> tags while it is processing the JavaScript.

    You could also put the <script> in the head, but you should add $( document ).ready() in your script.

    For more, you could refer to: https://developer.yahoo.com/performance/rules.html?guccounter=1#css_top 

    • The benefit of writing semantic HTML stems from what should be the driving goal of any web page— the desire to communicate.

    By adding semantic tags to your document, you provide additional information about that document, which aids in communication.

    Specifically, semantic tags make it clear to the browser what the meaning of a page and its content is.

    For more, you could refer to: https://www.lifewire.com/why-use-semantic-html-3468271

    • This functionality came about because of the "broken" rendering in old versions of IE.

    It was realised that if Microsoft just "fixed" the IE rendering engine lots of existing sites would not render properly.

    So the way it works is if you put any valid DOCTYPE declaration at all in your page the assumption is that you know what you're doing and your browser will render in a standards compliant way, and if you don't put one in it will render in the old "wrong" way.

    For more, you could refer to: https://en.wikipedia.org/wiki/Quirks_mode#Triggering_different_rendering_modes 

    About the conceptual knowledge of HTML, I suggest you could refer to the following sites to learn:

     https://developer.mozilla.org/en-US/docs/Web/HTML 

     https://www.w3schools.com/html/ 

    And you also could search by Chrome to find the answer to your questions.

    Besides, I suggest that you could make demos when learning, then if you have issues with your code, you could come to community to ask for help.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 3, 2019 5:43 AM
  • User-474980206 posted

    web standards have changed over time. originally script tags and css tags belonged in the <head> because they are not content. CSS like still belong in the head (so its can be applied to html as its rendered), but for faster site loading, the current trend is to move all scripts to end of the document. 

    at one time xml was popular, and there was a trend to make website xml friendly, and use xhtml syntax. DOCTYPE define the html as a xhtml document.  but this is not all obsolete with html 5. you should just have a <html> tag.

       https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

    semantics is import when non-humans are reading the document, say search engines, and site indexers. if your site is trying to get a high SEO rating you better be using semantics. you should use the semantic version of div (which is just a block element) to structure your page.

    its common practice to use progressive code, or templates for adding javascript to a page. the data-* allow adding additional attributes to a html elements to be used by the javascript. while you can just makeup any attribute name, a html verifier will fail the page. Often there are contact obligations for a page to be "valid" html. the data-* is a supported method that allows additional attributes to be added to an element and still be valid html.

    originally browsers only offered cookie storage. the cookie data is sent to the server as header (though javascript could access the cookie in the rendered html - there are restriction on this now). over time addition options where added for javascript to store and fetch data stored by the browser (local storage).  different browser have different local storage options. name/value pairs are the most common, but the webkit browsers (chrome. safari) also support sqlite databases. to make it safe to use local storage on shared computers (where the storage was only need for one session, the session feature was added. session storage is not saved to disk, and is deleted on browser exit.

    when your browser open a new window via an anchor with a target, current browser security allows the new page to access the opener. 

       <a rel="noopener" target="_blank" href="....">

    disables this feature (not supported by IE/edge)

    javascript in the browser is a single thread environment. web workers allow background javascript threads to run. each web worker has it own javascript thread and environment.

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 3, 2019 4:01 PM