HTML

HTML (HyperText Markup Language)

HyperText - refers to links that connect web pages to one another (within single website or between websites)
Markup - HTML uses ‘markup’ to annotate text, images, and other content for display in Web browser.
HTML tags are case-insensitive but the convection is to use lowercase.
Tag - refers to just the content in the brackets like <h1>.
Element - refers to the opening and closing tag and the content between those tags like <h1>Hello</h1>.
Non-replaced elements - like tags used for text
Replaced elements - which are replaced by objects (non-text), like image, input.
Void elements - similar to replaced elements, but are not closed, like input, img do not need to be closed. Using a slash like <img src='' /> was used in old days, but you can still do it for consistency between JSX and HTML.
Attributes - name/value pairs added to tags, to provide more information about the element. It is recommended to always quote attributes (Although you can provide values that don’t have space/special characters without quotes, don’t do this for consistency sake).
The attribute keys/values are case-insensitive. But any values you define outside the specification like in class, id are case-sensitive.
HTML should only be used to structure content, not to define the content’s appearance. Although, you can use strong, em, h1 to alter the appearance, but these are used more for semantic purposes. And the appearance would still be governed by CSS.

TODO. Put in lighthouse page

https://pagespeed.web.dev/

<html>

Use <!DOCTYPE html>. doctype tells the browser to use standard mode, otherwise browsers might use quirks mode.

In old days, pages were written typically written in two version, one for Netscape Navigator, and one for Microsoft Internet Explorer. So as to adopt W3C web standard, browsers started supported three modes

quirks mode - the layout emulates behavior in Navigator 4 and Internet Explorer 5.
limited-quirks mode - only a limited number of quirks.
no-quirks mode - the behavior is described by the modern HTML/CSS specification.

Usage

<!DOCTYPE html>
<html lang="en-US">
  ...
</html>

<head>

<base>

<base href='' target='_self'>

The base url to be used through the document for relative URLs.
You can also specify the default target value for all a, area, form tags.
If multiple specified, only the first encounter of href, target would be used.
Open graph tags do not use base, so specify absolute path.
When pointing to fragments (internal links), it would trigger an HTTP request to the base URL with the fragment attached. For example, <base href='https://example.com/"> and the tag <a href="#anchor">, would point to https://example.com/#anchor.

<title>

<title>Page title</title>

A longer descriptive title performs better than short or generic titles. So avoid one or two word titles, instead use a descriptive phrase.
Search engines will display the first 55-60 characters of page title, text beyond that may be lost. So have the important/critical parts come earlier in the 55-60 character range.
Do not use keyword blobs, as the seo algorithm would reduce your page’s position in the search results.

<style>

<style title='default style'> - to specify alternating stylesheets, which can be selected from Page Style submenu.
<style media=''> - to define a media query
<style nonce='random_text'> - HTTP support Content-Security-Policy (CSP): style-src, which means only the stylesheets from the specified url can be used.
```
Content-Security-Policy: style-src <source> <source>;
Content-Security-Policy: style-src https://example.com/
```
The above rule disallow the following stylesheets
```
<link href="https://not-example.com/main.css" rel="stylesheet" />

<style>
  #inline-style {
  }
</style>

<style>
  @import url('https://not-example.com/main.css') print;
</style>
```
This also disables inline style attributes <div style=''>, as well as styles that are applied in JavaScript by setting style attribute directly document.querySelector('div').setAttribute('style', '').

But you can still set properties on style attribute directly using document.querySelector('div').style.display = 'none'.

You can use nonce-source to only allow specific inline style blocks. Generate a random nonce value and include it in the policy (you can also create hashes from your inline styles, and then include them in content policy)
```
Content-Security-Policy: style-src 'nonce-2726c7f26c'

<style nonce='2726c7f26c'>
  // this works now
</style>
```
<style blocking="render"> - Useful when importing stylesheets, as this would block the execution until the stylesheets are loaded.

<link>

rel values (can bse used with <a>, <link>, <form>)

alternate - indicate an alternate representation of current document. rel='alternate stylesheet'. Similar to <style title='alternate stylesheet'>. With hreflang it indicates a translation.
author - to provide document providing author info
canonical - define the preferred url for the current document
icon - to add favicon. You can specify multiple icon and provide media query, to handle which one should be displayed.
license - document with license info.
manifest - to provide manifest file.
next - if the document is in a series, then you can specify the next document here, and it can help with prefetching.
prev - similar to above.
stylesheet
dns-prefetch - tells the browser to preemptively perform DNS resolution for the target resource’s origin.
modulepreload - preemptively fetch the script and dependencies, and store it in the document’s module map for later evaluation (only fetched, not executed until needed)
preconnect - open a connection to linked website in advance, without disclosing any private info or downloading any content, so that when the link is followed the linked content can be fetched more quickly.
prefetch - preemptively fetch and cache the target resource as it is likely to be required for a followup navigation.
preload - preemptively fetch and cache the target resource for current navigation

<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="print.css" media="print" />
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 600px)" />

<link rel="icon" href="favicon.ico" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-icon.png" type="image/png" />

<link rel="manifest" href="" />

<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/icon.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/icon.png" /> // for safari
browser <link rel="mask-icon" href="/images/icon.svg" color="#226DAA" /> // pinned tabs
on macos // provide alternate representations of the site
<link
  rel="alternate"
  href="https://www.machinelearningworkshop.com/fr/"
  hreflang="fr-FR" />
<link
  rel="alternate"
  href="https://www.machinelearningworkshop.com/pt/"
  hreflang="pt-BR" />

// if you create multiple translations or version of your website, search engine may get
// get confused. In that case, provide the preferred url of the site
<link rel="canonical" href="" />

Other attributes

fetchpriority=high|low|auto| - provide hint of the relative priority to use when fetching a preloaded resource.
disabled - Add disabled if you do not want a stylesheet to be loaded. HTML would not load the css file, and when you change this value to true or remove disabled, only then the css file would be loaded.
crossorigin=anonymous|use-credentials
href - url of linked resource
hreflang - language of the linked resource.
integrity - provide base64 encoded hash of the resource file. The browser will verify the fetched resource using this.
imagesizes, imgagesrcset - for use with rel=‘preload’ and as=‘image’ only.

<meta>

<meta charset="utf-8" />

The default encoding is windows-1252 (depending upon the locale). utf-8 is required by HTML5 and use this tag before <title>, so that the text in title can be rendered properly.
This encoding is further inherited by <style>, <script>, meaning you can use emojis for class names in css and js.

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />

Allows the content to render well by default, no matter the viewport width.
“width=device-width” - set the width of the content to the size of the screen
Then you can also set the zoom and scalability. Setting user-scalable means, the user can zoom in-out.

Use itemprop attribute, to provide user-defined metadata.

<meta charset="utf-8" />

<!-- Define content policy for the current document, like define server origins
and script endpoints. -->
<meta http-equiv="content-security-policy" content="default-src https:" />

<meta
  name="description"
  content="What search engines display under the page's title in search results." />

<!-- No need for keywords, as this was abused by SEO people and it ignored now. -->
<meta name="keywords" content="" />

<!-- Let your site be crawled by search engines. This is default, so no need
to include it. -->
<meta name="robots" content="index, follow" />
<!-- If you don't want your site to be indexed. It is upto the bots to honor this
request. -->
<meta name="robots" content="noindex, nofollow" />

<!-- Customize the browser interface (color the title bar, tab bar, or other chrome 
components). This would already be in manifest file, but adding it in HTMl ensures
the color is found immediately, before rendering. -->
<meta name="theme-color" content="#226DAA" />

<script>

If you place <script> in the head tag, then due to render-blocking nature of JavaScript, the browser will stop downloading all assets until the scripts are downloaded and dosen’t resume downloading other assets until the JavaScript is executed.

To place <script> in the head use defer and async, <script src="js/switch.js" defer></script>

defer - html rendering is not blocked during the download, and the JS only executes after the document has otherwise finished rendering.
async - html rendering is not blocked during the download. But once the script has finished downloading, the rendering is paused while JS is executed.

async is useful when the script is independent of the DOM like google analytics. Use this

Algorithms

Leetcode

Notes

CSS

Short Notes

HTML

React

Investing

Rust

Header Links

HTML

<html>

<head>

<base>

<title>

<style>

<link>

<meta>

<script>