It starts with the Document Type Declaration, this is a way to tell the browser this is an HTML page, and which version of HTML we are using.
Next we have the html tag, always at the beginning after doctype
Most tags come in pairs with an opening tag and a closing tag, there are a few tags that are self closing.
Body is where we will put all our visual page content.
Attributes can be added to the starting tag of an element. They can include things like classes, ids and data-* attributes. They have a key="value" syntax.
or multiple attributes
The title tag is very important for SEO optimization.
It can be used in both the
<head> and body>```.
When it's used inside the head element, it must contain only link, style and meta elements.
When it's part of the body it can contain content including other tags.
<link> tag is commonly used for linking to an external style sheet. But it can also be used for other purposes such as assisting search engines by providing links to relevant resources, and providing information on the website's navigational structure, etc.
href - Specifies the location of the linked document, crossorigin - Specifies how the element handles cross-origin requests ( anonymous || use-credentials ) media - Specifies on what device the linked document will be displayed
rel - Required. Specifies the relationship between the current document and the linked document, they include,
- stylesheet size - Specifies the size of the linked resource. Only for rel="icon" type - Specifies the media type of the linked document
When you are not linkning an external style sheet you can use the style element to hold the css.
<base> tag specifies the base URL/target for all relative URLs in a document.
There can be at maximum one
<base> element in a document, and it must be inside the
<meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. Very important to SEO...
The charset meta tag is used to set the page character encoding. utf-8 in most case
HTML5 introduced a method to let web designers take control over the viewport (the user's visible area of a web page), through the
<meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
The robots meta tag instructs the Search Engine bots whether to index a page and follow links, default is index and follow.
You can alo use the following meta tag to redirect a page somewhere else. Change the content value to get redirected immediately.
X-UA-Compatible is a document mode meta tag that allows web authors to choose what version of Internet Explorer the page should be rendered as. ie-edge will use the latest version.