HTML: Did you know all these things belong to the <head>?
π§΅π A thread
π§΅π A thread
[1] But first what is the "HEAD"? π©βπ¬
The head of an HTML document is the part that is not displayed in the web browser when the page is loaded.
It contains information such as the page <title>, links to CSS, links to custom favicons, and other metadata.
The head of an HTML document is the part that is not displayed in the web browser when the page is loaded.
It contains information such as the page <title>, links to CSS, links to custom favicons, and other metadata.
[2] Ok, another unknown word: "METADATA", what is this? π§±
METADATA = data about the HTML.
These are things such as the author, and important keywords that describe the document, etc.
METADATA = data about the HTML.
These are things such as the author, and important keywords that describe the document, etc.
[3] Let's start with something that goes before the <head> π
And it's the Doctype.
The Doctype is a META TAG in HTML5 and it goes at the top of all your HTML pages.
<!DOCTYPE html>
And it's the Doctype.
The Doctype is a META TAG in HTML5 and it goes at the top of all your HTML pages.
<!DOCTYPE html>
[4] Charset π
Don't forget the Charset!
<meta charset="UTF-8">
Don't forget the Charset!
<meta charset="UTF-8">
[5] Viewport π±
Setting the viewport helps to make your website look good on all devices
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Setting the viewport helps to make your website look good on all devices
<meta name="viewport" content="width=device-width, initial-scale=1.0">
[4] Title π»
A title should be used on all pages
According to w3schools: "The <title> element is required and it defines the title of the document"
A title should be used on all pages
According to w3schools: "The <title> element is required and it defines the title of the document"
[5] Description β¨
A meta description is provided, it is unique and doesn't possess more than 150 characters.
<meta name="description" content="Hi there twitter!">
A meta description is provided, it is unique and doesn't possess more than 150 characters.
<meta name="description" content="Hi there twitter!">
[6] Icon π€
A favicon can be added to a page:
<link rel="icon" href="favicon.ico" type="image/x-icon">
There are lots of other icon types to consider, this is just an example. β
A favicon can be added to a page:
<link rel="icon" href="favicon.ico" type="image/x-icon">
There are lots of other icon types to consider, this is just an example. β
[7] Link π
Link is one of the most important things! Sometimes we write the CSS file and somehow we forget to link it to the HTML file π
<link rel="stylesheet" href="my-css-file.css">
Link is one of the most important things! Sometimes we write the CSS file and somehow we forget to link it to the HTML file π
<link rel="stylesheet" href="my-css-file.css">
[8] Script π
As I mention a bit earlier, sometimes we write the JS file and somehow we forget to link it to the HTML file π
<script src="my-js-file.js" defer></script>
As I mention a bit earlier, sometimes we write the JS file and somehow we forget to link it to the HTML file π
<script src="my-js-file.js" defer></script>
That's it from me! π
But there are more things we can add to the <head>, can you think some of them?
P.S. Did you find this thread useful?
Share some feedback and let me know if I should continue them or not.
But there are more things we can add to the <head>, can you think some of them?
P.S. Did you find this thread useful?
Share some feedback and let me know if I should continue them or not.
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
