HTML Notes

9/10/23 Updated: Initial version of HTML note is finished.

9/18/23 Updated: New features of HTML5 are added.

Disclaimer: This passage contains notes and insights gathered from atguigu in bilibili. The content is used for educational purposes and attributed to the original authors. I do not claim any ownership over the material. For the full and original content, please visit the html tutorial from atguigu.

Resources

Docs from Mozilla

Playground from Mozilla

Meta Docs from MDN

Global Attributes Docs from MDN

Entity Docs from MDN

HTML Basic Knowledge

Charset

Related Tutorial from atguigu

How Computer Treats with Data:

Encoding Data when computer is storing file.
Decoding Data when computer is reading file.

Both rules will follow charset defined such as UTF-8, GBK, ISO 8859-1.

Storing & Opening Rules:

When we are storing a text file in Chinese with an unsuitable charset such as ISO 8859-1, the data inside will become question-mark; they will be lost. Cannot Recover!
When we are opening a text file with different encoding method, we will see unrecognized sections in the data file. Reopening with the Correct Charset Fixes the Issue!

HTML Structure

Related Tutorial from atguigu

<!DOCTYPE html>                        <!--HTML5 Declaration-->
<html lang="zh-CN">                    <!--Telling browser the language used-->
    <head>
        <meta charset="utf-8">        <!--We can also use "UTF-8"-->
        <title>Hello</title>
    </head>
    <body>
        <p>
            Hello, world!
        </p>
    </body>
</html>

Special Tags

<br>: New Line
<hr>: Separator Line
<pre>: Keep format of the code

<pre>
    Hello    Hello    Hello
        Hello	  Hello
             Hello
</pre>
<!-- Output all new lines and spaces -->

Block & Inline Elements

References

Related Tutorial from atguigu

Block & Inline Elements from W3Schools

Definitions

Block Elements: A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
Inline Elements: An inline element does not start on a new line, and only takes up as much width as necessary.

Using Rules

Block Elements can almost have Inline Elements and Block Elements inside. Programmer can write anything inside it except under some special rules.
- <p>, <div>, <h1> - <h6>, …
Inline Elements can only have Inline Elements, and they cannot have Block Elements.
- <span>, <input>, …
Special Rules:
- <h1> - <h6> cannot be embedded with each other inside. For example:
  <h1>
  <h2>
  Hello, world!
  </h2>
  </h1>
- <p> cannot have Block Elements inside.
- … (More will be learned in the future)

Text Tags

<em>: emphasize reading content.
<strong>: important content (stronger than <em>).
<span>: no meaning; it’s just a genral wrapper.

The Text tags are usually inline elements. But some like blockquote and address are block elements.

Image Tags

Attributes

src: the photo path.
alt: the description of the photo.
width: the width px of the photo.
height: the height px of the photo.

The image will remain the ratio between width and height unless user change both of them.

“alt” Usage

Good for SEO since when the search engine reads the alt attribute, it will know the content of the image.
When the image cannot be loaded normally, some brower will display the value of alt.
The reading aid for blind can read the value of alt to let people knows.

Image Formats

First Part of Related Tutorial from atguigu

Second Part of Related Tutorial from atguigu

.jpg or .jpeg: a kind of lossy compressing format
- Does not support transparent background and dynamic pictures.
- For those environments that don’t require extremely high quality of the image.
.png: a kind of lose-less compressing format
- Supports transparent background.
- Higher image quality than .jpeg.
- Company logo image or important images.
.gif: Mainly for dynamic images
- Supports only 256 colors, and simple transparent background.
.webp: an image format developed for the website
- Some old browsers do not support this kind of file extension.
- Equipped with all advantages that other images have.
base64: a string of special text that the image is encoded by method base64
- Only browser can recognize it and convert it to the image.
- We can use base64 to encode some small images.

HyperLink `<a>`

General

Related Tutorial from atguigu

<!-- Open new tab to jump to the other website -->
<a href="https://xxx.com" target="_blank">Link1</a>

<!-- Use self tab to jump to the other website -->
<a href="https://xxx.com" target="_self">Link2</a>

<a> is inline element but it can embed all other elements except itself.
Multiple spaces or newlines will be rendered as one space.

Jump to Anchor

Related Tutorial from atguigu

Setup Anchors

<!-- 1. using tag <a> with attribute "name" -->
<a name="test1"></a>

<!-- 2. using other tags with attribute "id" -->
<p id="test2"></p>

Jumping

<!-- jump to test1 -->
<a href="#test1">Link1</a>

<!-- jump to top of the page -->
<a href="#">Top</a>

<!-- jump to other page's anchor -->
<a href="demo.html#test1">demo.html test1</a>

<!-- refresh the page -->
<a href="">Refresh page</a>

<!-- execute js or empty. Syntax is: javascript:; -->
<a href="javascript:alert(1);">alert!</a>

Jump to Application

Related Tutorial from atguigu

<!--Call-->
<a href="tel:xxxx">Call</a>

<!--Email-->
<a href="mailto:[email protected]">Email</a>

<!--SMS-->
<a href="sms:xxxx">SMS</a>

List

General

It is better not to use <li> out of a list although it behaves like unordered list.

Usage

<ol>: Ordered List

<ol>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ol>

<!-- Output
1. A
2. B
3. C
-->

<ul>: Unordered List

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

<!-- Output
* A
* B
* C
-->

<dl>: Defined List
- defined title(term) : defined data

<h2>Hello</h2>
<dl>
    <dt>Hello</dt>
    <dd>World</dd>
    <dd>123</dd>
    
    <dt>World</dt>
    <dd>Hello</dd>
</dl>

<!-- Output
Hello
    World
    123
World
    Hello
-->

Table

General

A complete Table <table> is consist of four parts:

Table Caption <caption>
Table Header <thead>
- Row <tr>
  - Header Cell <th>
Table Body <tbody>
- Row <tr>
  - Data Cell <td>
Table Foot <tfoot>
- Row <tr>
  - Data Cell <td>

<table>
    <caption>Hello World</caption>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Hobby</th>
        </tr>
    </thead>
    <tbody>
        <!-- First Element -->
        <tr>
            <td>David</td>
            <td>24</td>
            <td>Minecraft</td>
        </tr>
        
        <!-- Second Element -->
        <tr>
            <td>Liam</td>
            <td>21</td>
            <td>Apex</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td>Total: 2</td>
        </tr>
    </tfoot>
</table>

Attributes

Playground from Mozilla

Tag Name	Tag Meaning	Attributes
`<table>`	table	`width:` the width of the table. `height:` the minimum height of the table, and the final height may be higher. `border:` set the width of the table. `cellspacing`: the space between cells.
`<thead>`	table header	`height:` the height of the table header. `align:` the way to align cell horizontally; 1) left 2) center 3) right. `valign:`the way to align cell vertically; 1) top 2) middle 3) bottom
`<tbody>`	table body	Same as `<thead>`
`<tr>`	table row	Same as `<thead>`
`<tfoot>`	table footer	Same as `<thead>`
`<td>`	table data cell	`width:` the width of the cell, and all same column cells will be effected. `height:` the height of the cell, and all same row cells will be effected. `align:` the way to set the cell alignment horizontally. `valign:` the way to set the cell alignment vertically. `rowspan:` indicate the number of rows being combined. `colspan:` indicate the number of columns being combined.
`<th>`	table header cell	Same as `<td>`

<table border="1" width="300" height="600" cellspacing="0">
    <caption>Hello World</caption>
    <thead height="300" align="right" valign="bottom">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Hobby</th>
        </tr>
    </thead>
    <tbody height="400" align="left" valign="middle">
        <!-- First Element -->
        <tr height="700">     
            <td width="1000">David</td>
            <td>24</td>
            <td>Minecraft</td>
        </tr>

        <!-- Second Element -->
        <tr>
            <td>Liam</td>
            <td>21</td>
            <td>Apex</td>
        </tr>
    </tbody>
    <tfoot height="100" align="center" valign="top">
        <tr>
            <td></td>
            <td></td>
            <td>Total: 2</td>
        </tr>
    </tfoot>
</table>

Form

General

<form>: form body
- "action": indicate the address that form will be sent.
- "target": control the way about how to open the page
  - "_self": open in the local tab
  - "method": control the method that how the form will be sent. GET, POST,…
<input>: input area
- type: the type of input
  - "text"
  - "radio:" can set disabled, checked
  - "password"
  - "checkbox:" can set disabled, checked
  - "hidden": it will not be shown, and it’s only for some fixed field
  - "submit": submit the form to the action
  - "reset": reset all elements inside the form
  - "button": normal button
- name: the field name that will be submitted
- value: the default field value
- maxlength: the maximum length that can be input
<button>: default is “submit”

Other elements

Select

<select name="from">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
</select>

Textarea

<textarea name="msg" rows="22" cols="3">TEXTAREA</textarea>

Label

When we want the effect that clicking the field name makes the cursor focusing on that field input, <label> is useful.

First Method

<label for="account">Account</label>
<input id="account" type="text" name="account" maxlength="10">

Second Method

<label>
    Account: <input id="account" type="text" name="account" maxlength="10">
</label>

Fieldset & Legend

<fieldset> can classify the form elements, and <legend> is the titile of the type.

<fieldset>
    <legend>Main Info</legend>
    <label>
        Account: <input id="account" type="text" name="account" maxlength="10">
    </label>
    <label>
        ...
    </label>
</fieldset>

Iframe

General

<iframe>: Embedding other websites or files into the website

name: the name of the iframe which can work with the attribute target (shown below).
width: the width of the iframe window.
height: the height of the iframe window.
frameborder: whether shows border; 0 or 1.

Usage

<!-- Embedding a normal website -->
<iframe src="https://www.wikipedia.org" width="900" height="300"></iframe>

<!-- Embedding other resources -->
<iframe src="./resources/hello.pdf" width="900" height="300"></iframe>

<!-- Using the attribute target of <a> -->
<a href="https://www.wikipedia.org" target="container">Click to view wikipedia</a>

<!-- Using <form> to work with iframe -->
<form action="https://so.toutiao.com/search" target="container">
    <input type="text" name="keyword">
    <input type="submit" value="submit">
</form>

<iframe name="container" frameborder="0" width="900" height="300" ></iframe>

Applications

Embedding AD into the website.
Working with the attribute target of hyperlink and form to express different contents.

Content Below is about new features of HTML5 (H5).

H5 General

HTML5 is latest HTML standard created on 10/2014 by W3C.

Advantages

Implemented a lot of useful interfaces for javascript.
Added more semantic labels and global attributes.
Updated multi-media supports which will perfectly replace flash.
Focused more on semantization which is beneficial for SEO.
Provided a better method to adapt on or migrate to mobile devices.

Compatibility

Supported Chrome, Safari, Opera, Firefox.

IE browser must have version 9 and above that can support H5, and version 9 can only support part of H5.

H5 Semantic Labels

header: The header of the whole page or the part.
footer: The footer of the whole page or the part.
nav: The navigation part.
article: The article, blog, news, comments, and etc.
section: A paragraph or a part of words in a page.
aside: The aside bar.

About article and section

article can have multiple section inside.
section emphasizes part and section; it is suggested to use section if the content will be splited into multiple parts.
article focuses more on independency; so it is better to use article if the content is complete and independent.

H5 Status Labels

Label Meter

General

meter is used for measuring conditions such as battery usage, disk usage; it can also be called gauge.

Attributes

high: The high value.
low: The low value.
max: The maximum value.
min: The minimum value.
optimum: The optimum value; if its value is set, which means the two closed gauges will be regarded as optimum.
value: The current value.

Label Progress

General

progress is used for indicating the progress of a task such as work task.

Attributes

max: The goal value.

value: The current value.

H5 List Labels

datalist: Used for keywords hint in search bar.
details: Used for showing questions and answers, or explaining the term.
summary: Written in details to indicate the question or the term.

<input type="text" list="mydata">
<datalist id="mydata">
    <option value="xyz">xyz</option>
    <option value="xab">xab</option>
    <option value="acd">acd</option>
    <option value="ycd">ycd</option>
</datalist>

<details>
    <summary>Hello World</summary>
    <p>Hello!</p>
</details>

H5 Text Labels

ruby: Used for wrapping words that need annotations.
rt: Annotation written in ruby.

<ruby>
    <span>Hello</span>
    <rt>world</rt>
</ruby>

mark: Used for marking the keywords obtained from the searching result.

H5 Form Element Attributes

placeholder: Used for hinting words.
- It is not the default value (attribute value is default one)
- It is appropriate for texting input element.
required: The input element is mandatory with value.
autofocus: Automatically focus on the input element when open the page.
autocomplete: Automatically complete the texting input element.
- Set with on or off.
- password and textarea are not suitable.
pattern: Used for regular expression to validate the value input in.
- textarea and empty element will no be validated.
- required is usually used together.

H5 Input Types & Attributes

The input element can be one of the following types: email, url, number, search, tel, range, color, date, month, week, time, datetime-local. Check here for details.
novalidate: If form is set with this attribute, the form will not be validated.

H5 Video Label

<video> is used for define video.

src: URL address for the video.
width/height: The width/height of the video.
controls: Show user about the video widgets.
muted: Mute the video.
autoplay: automatically play the video except it has muted; but if the media engagement of this website is high enough, it is possible to autoplay the video without muted.
loop: Play the video periodically.
poster: The url of the cover of the video.
preload: Preload the video. But it will be disabled by using it with autoplay.
- auto: Let browser decide how much video should be preloaded.
- metadata: Only preload metadata of the video.
- none: Do not preload video.

H5 Audio Label

<audio> is used for defining audio.

src: URL address for the audio.
controls: Show user about the audio widgets.
muted: Mute the audio.
autoplay: automatically play the audio.
loop: Play the audio periodically.
preload: Preload the audio. But it will be disabled by using it with autoplay.
- auto: Let browser decide how much audio should be preloaded.
- metadata: Only preload metadata of the audio.
- none: Do not preload audio.

H5 Global Attributes

contenteditable: Indicate if the element can be editable. true / false
draggable: Indicate if the element can be dragged. true / false
hidden: Hide the element without keeping space.
spellcheck: Set if spell check will be applied to the element. true / false
contextmenu: Shows when users right click their mouse. It is used for customized right click menu.
data-*: Used for storing customized page data; it is for js in the future.

H5 Compatibility

<!-- Set IE always using latest mode to render -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<!-- Use webkit (Chromium) kernal to render -->
<meta name="renderer" content="webkit">

html5shiv.js is developed by Google in order to realize partial features of HTML5 on old browsers.

<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->

lt less than.
lte less than and equal to.
gt greater than.
gte greater than and equal to.
! logical negate.

Resources

HTML Basic Knowledge

Charset

How Computer Treats with Data:

Storing & Opening Rules:

HTML Structure

Special Tags

Block & Inline Elements

References

Definitions

Using Rules

Text Tags

Image Tags

Attributes

“alt” Usage

Image Formats

HyperLink <a>

General

Jump to Anchor

Setup Anchors

Jumping

Jump to Application

List

General

Usage

Table

General

Attributes

Form

General

Other elements

Select

Textarea

Label

First Method

Second Method

Fieldset & Legend

Iframe

General

Usage

Applications

H5 General

Advantages

Compatibility

H5 Semantic Labels

H5 Status Labels

Label Meter

General

Attributes

Label Progress

General

Attributes

H5 List Labels

H5 Text Labels

H5 Form Element Attributes

H5 Input Types & Attributes

H5 Video Label

H5 Audio Label

H5 Global Attributes

H5 Compatibility

HyperLink `<a>`