HTML

2022/05/12 (新增連結)

• HTML Tutorial (java T point)

• 20 HTML and CSS Projects to Sharpen Your Skills

• 10 Best Practices for HTML

• 4 Templating Systems to Write Quicker, Cleaner HTML

  • Pug (a.k.a Jade)

  • HAML

  • Slim

  • Markdown

    • Markdown for Web Developers

• Going Places with HTML and CSS

  • How to Use Semantic HTML

  • Open Graph Tags

• 6 Unpopular and Powerful HTML Features that You Should Know

  • The meter tag

  • The attribute required

  • The download attribute

  • HTML Drag and Drop

    • HTML Drag and Drop API Explained With Examples

  • Defer and Async attributes

  • The abbr tag

• 5 Tricks to Truly Call Yourself HTML master

• 5 HTML Tricks Nobody is Talking About

  • Lazy loading image

  • Input suggestions

  • Picture tag

  • Base URL

  • Document refresher

• 50 HTML Best Practices & Guidelines to Build Better Web Projects

• 11 HTML One-Liners That Are Insanely Useful

• 6 HTML Mistakes Web Developers Should Avoid

Metadata

• Metadata Elements Every Web Developer Should Know

Tag

• Rarely used but Handy HTML tags

  • <acronym>

  • <ins> and <del>

  • <abbr>

  • <wbr>

  • <base>

• HTML: Underrated tags

  • <picture>

    • Why You Should Use Picture Tag Instead of Img Tag

      • Resolution Switching — Problems of serving smaller size images for narrow screen devices.

      • Art Direction — Problem of showing different images on different screen sizes.

    • Responsive Images without CSS or JS, using the <picture> element

  • <fieldset>

  • <progress>

    • You Don’t Need a Library for Progress Bars

  • <base>

  • More input tags

    • Date inputs

    • Color picker

    • Range

  • <details>

  • Text formatting tags

    • <mark>

      • Highlight text with HTML mark tag

    • <abbr>

    • <pre>

    • <hr>

      • Let’s over-engineer the HTML horizontal rule … the smart way

  • [contenteditable]

• 9 Cool Things You Can Do With Just HTML

  • Picture

  • Color Picker

  • Title Tooltip

  • Content Editable

  • Refresh the browser

  • Datalist

    • Easy autocomplete/suggestions for inputs with the HTML5 datalist tag

  • Progress

  • Meter

  • Output

• Paying Attention to the Details

  • Enter the <details> tag

  • Modal

  • Overlay

  • Tooltip

• 10 HTML Elements You Didn’t Know You Needed

  • Audio

  • Blockquote

  • Output

  • Picture

  • Progress

  • Meter

  • Template

  • Time

  • Video

  • Word Break Opportunity

• 6 HTML Tags for Improved Web SEO

• Build a Full-Page Modal in 1 Line of Code : With the HTML5 <Dialog> Element

Attributes

• Powerful HTML attributes you may not know

  • Download

  • ContentEditable

  • Multiple

  • Poster

  • Hidden

  • Accept

• 7 Useful HTML Attributes that You Probably Don’t Know

  • Accept

  • Multiple

  • Content editable

  • Download

  • Translate

  • Poster

  • Pattern

Audio

• HTML <audio> Tag

Button

• What’s special about the Button element in HTML?

Canvas

• A full overview of HTML Canvas

• HTML Canvas : Create complex 2D and 3D shapes and animations with HTML and JS.

Input

• Control Types (including Virtual Keyboards) Associated with 14 HTML Input Types

Link

• The Anatomy of HTML Links: The a element and 9 of its attributes

  • Href attribute

  • Target attribute

  • Title attribute

  • Download attribute

  • Ping attribute

  • Referrer policy attribute

  • Rel attributes

  • Hreflang attribute

  • Type attribute

Table

• HTML Tables: All there is to know about them

HTML5

• HTML5語法

• HTML5 Tutorial

• Your Ultimate Guide to HTML5 Inputs

• Strikethrough using HTML5

  • <s> vs. <del> vs. <ins>

• Using HTML5 APIs in Your Web App

  • The following are some of the APIs that are in the HTML5 API specifications:

    • Battery status: lets us check the battery status of a device

    • Clipboard: lets us copy content to the operating system’s clipboard

    • Drag and drop: lets us add drag and drop items around our apps

    • Fetch: lets us make HTTP requests more easily than with XMLHttpRequest

    • File: lets us access files securely on the user’s computer

    • Forms: added new types that we can use for form validation and render form fields differently

    • Geolocation: lets us locate the device’s location

    • getUserMedia/Stream: lets us retrieve audio and video from an external device like a camera

    • Indexed database: lets us store database data locally

    • Internalization: provides international formatting and string comparison features

    • Screen orientation: lets us check the screen orientation of a device

    • Selection: lets us select elements using CSS selectors

    • Server sent events: allows servers to push data to clients without requesting it on the client side

    • User timing: lets us get more precise timestamps to measure performance of our applications

    • Vibration: lets us make devices vibrate if it has this capability

    • Web audio: lets us process audio on the client side

    • Web speech: lets us add text to speech features into our web apps

    • Web sockets: lets us make real time communication between client and server

    • Web workers: lets us run tasks in the background in user browsers

  • Geolocation API

    • Accessing the User’s Location

    • Using the Geolocation API with Google Maps

  • Accessing Audio and Video from Devices

    • WebRTC API

Semantic HTML

• Why Should I Care About Semantic HTML?

• How to write semantic HTML

• How to Make Accessible Sites with Semantic Markup

  • Using The Correct Elements & Tags

    • Buttons Should Be Buttons

    • Headers

      • Understanding the heading tag and why so many websites use it incorrectly

    • Links

    • List of Semantic Elements

• Semantic Markup Probably Doesn’t Mean What You Think!

• 10 HTML Semantic Tags and When To Use Them

• A Quick 4-Minute Guide to Semantic HTML

• Why every web developer should know about Semantic HTML

  • Reason #1: maintainability

  • Reason #2: SEO

  • Reason #3: Accessibility