html – Andrew Choi, My Knowledge Blog

Automatically set text box to Uppercase, Support alphabet and Number only?

<input type="text" oninput="this.value=this.value.replace(/[^A-Z0-9]/gi,'').toUpperCase()">

HTML Tags : {sub} and {sup}

8 meta tag MUST for SEO

title

<title>創世押業系統：產品簡介</title>

description

<meta name="description" content="InnoNext (HK) Company 創世（香港）公司. +852 3502 4350. info@innopawn.com. 香港荃灣沙咀道40-50號榮豐工業大廈17樓11B室" />

canonical

很多網站都會有多於一個網址，例如：

innopawn.com
www.innopawn.com

從Google 的搜尋引擎的角度，會導致內容重複的問題，而引至被搜尋引擎懲罰。所以，可以用 canonical 解決這個問題

<link rel="canonical" href="https://www.innopawn.com" />

charset

<meta charset="UTF-8">

robot

hreflang

如果網站內包含多種語言，就需要用 hreflang 來提示搜尋引擎展示正確的網頁給不同地區的訪客

<link rel="alternate" href="http://www.innopawn.com" hreflang="zh-hk" />

og

og （Open Graph）並非用於 SEO 中，但對網頁於 Facebook、LINE 等社交媒體正確地呈現有莫大幫助，其中 og:title、og:description、og:image 至為重要，分別決定了網頁於社交媒體分享時顯示的標體、形容和縮圖。

keywords

在2009年開始，就已經失效

Reference: https://ysnweb.net/2020/01/seo-guide/html-meta-tag-seo/

No css, No javascript HTML Tags : {progress}

<form action="">
  <fieldset>
    <legend>Favorited</legend>
    <div><label>File Upload test 1</label></div>
    <div>
      <progress></progress>
    </div>
    <div><label>File Upload test 2</label></div>
    <div>
      <progress value="50" max="100">50%</progress>
    </div>
  </fieldset>
</form>

Reference : 
Web Dev Simplified (2021), https://www.youtube.com/watch?v=iX_QyjdctsQ&t=240s

No css, No javascript HTML Tags : {type=color}

<input type="color">

Reference : 
Web Dev Simplified (2021), https://www.youtube.com/watch?v=iX_QyjdctsQ&t=240s

No css, No javascript HTML Tags : {fieldset} {datalist}

<form action="">
  <fieldset>
    <legend>Title</legend>
    <div><label for="">Name</label></div>
    <div>
      <input list="name-list" type="text">
      <datalist id="name-list">
        <option value="Andrew"></option>
        <option value="May"></option>
        <option value="Peter"></option>
        <option value="John"></option>
      </datalist>
    </div>
  </fieldset>
</form>

Reference : 
Web Dev Simplified (2021), https://www.youtube.com/watch?v=iX_QyjdctsQ&t=240s

HTML Redirect to Another Page

Redirect to Another web site after 5 second:

<meta http-equiv="refresh" content="5; URL=https://andrew.innonext.hk/" />

Redirect to index.htm immediately:

<meta http-equiv="refresh" content="0; URL=/index.htm" />