HTML5 支援的音訊檔案有三種：MP3、WAV 與 OGG。 <audio> 與 </audio> 標籤中夾帶的「Your browser does not support the audio element.」，中譯為：「你的瀏覽器不支援 audio 元素」，平時不會出現，只會在使用者使用的瀏覽器不支援 <audio> 元素時出現。較多人用的 Chrome 與 Firefox 瀏覽器支援所有被 HTML5 所支援的音訊檔「.mp3」、「.wav」與「.ogg」。但是微軟的 IE 就不支援副檔名為「.wav」與「.ogg」的音訊檔。此種狀況不常見。 <audio> 標籤中的「自動撥放」與「重複撥放」指令 上述提到，<audio> 標籤可以讓音訊控制面板 (功能有撥放、暫停與音量控制) 顯現。除此之外，前端工程師還可以為 <audio> 標籤下定義，指定音訊檔是否要自動撥放或是重複撥放。 自動撥放 若在 <audio> 標籤中指定「自動撥放(<audio controls autoplay>)」 ，則嵌入的音訊檔會在網頁 loading 好後自動撥放，不會事先問使用者是否要撥放。語法如下： (可點右方的「Result」按鈕看結果，即會自動撥放音檔。音檔歌曲：Dream Theater 「Pull Me Under」 片段) See the Pen audio element pt.2-auto by Tedutw (@Tedutw) on CodePen.
重複撥放 若在 <audio> 標籤中指定「重複撥放(<audio controls loops>)」 ，則嵌入的音訊檔會在撥放完畢後自動重播。語法如下： (「Result」中的音檔撥放結束後，即會自動重播音檔。音檔歌曲：Dream Theater 「Pull Me Under」 片段) See the Pen audio element pt.2-loop by Tedutw (@Tedutw) on CodePen.
承上一篇HTML5超好用的排版元素後~今天要來跟大家更進一步介紹網頁內容相關的語意元素!!快學起來吧!! 更簡單、更有利於 SEO - HTML5新增的語意元素 在前一篇提過： HTML4 的時代，網頁排版只有兩種元素：<div>和<span>，早已無法應付近十年來越來越複雜多元的網頁排版。前端工程師只好將這些元素「延伸」以便排版，因此常常看到有<div id="header">這樣子冗長的標籤。因此 HTML5 提供了一系列語意元素（Semantic Elements）來取代上述的「延伸」用法，像上述的例子在 HTML5 就可以用 <header> 來取代，既精簡又更利於 Google 的搜尋引擎爬蟲理解，因此對 SEO 有例。 既上篇介紹的<header>、<nav>和<footer>等 HTML5 網頁語意元素之後，本篇要介紹的是與網頁內容相關的<article>、<section>和<aside>。 <article>-最具資格的<div>的接班人 Article 是一個獨立的區塊，使用的方式如同 HTML4 的<div> (或說是用來取代<div>的也不為過)，因為<article>可以在網頁的各地方單獨地被使用、部屬。 語意元素定義網頁的標頭，通常放置網站標題。 與<div>一樣，<article>的應用範圍很廣，它包含的內容可以是一篇論壇貼文、一則網路新聞報導、一個部落格的入口、一則意見回覆、一個具互動功能的網頁小工具 (widget 或是 gadget) 等其他獨立的內容區塊。 與<div>一樣，<article>也有在後面加入「id」或是「class」的延伸用法，則 article 標籤則分別看起來就會是「<article id="...:>...</article>」與「<article class="...:>...</article>」。 <article> 這是article區塊 <h1>區塊中標題</h1> <p>區塊中內容</p> </article> See the Pen article by Tedutw (@Tedutw) on CodePen.
<article>標籤可用於網頁文章中。一個<article>標籤就相當於文章中的一段。 <section>元素 Section 是一個邏輯性的的區塊，可以將一篇文章的內容作分段。一個<section>即為一段內容 <section>裡面也可包含段標、文圖內容等等。常常與<article>一起搭配使用，如下所示： <article> <h1>Welcome</h1> <section> <h1>Heading</h1> <p>content or image</p> </section> </article> See the Pen article & section by Tedutw (@Tedutw) on CodePen.
如果想要把多個<section>歸類在同一個區塊的話，那就使用<article>來包覆多個<section>吧！ <aside>元素 aside 區塊的內容，一般來說是與主條目關連，但是又不那麼直接相關的附加內容。時常以「網頁側欄」的形式出現，如下面所示： See the Pen Basic html5 layout example by Tedutw (@Tedutw) on CodePen.
今天的HTML5入門課要來跟大家說一超好用的新增元素～還不知道如何嵌入影片的學員一定要看喔~ HTML5新增video元素-終於可以撥放影片了! 在 HTML5 版本出現之前，網頁排版只有<div>和<span>兩種元素而已，早已無法應付現今功能越來越齊全的網頁 —— 甚至連撥放影音的元素都沒有。在 HTML4，要在網頁中聽音樂或看到影片，只能透過像是 Flash 之類的外掛。 而 HTML5 中的 <video> 元素提供了可直接在網頁中嵌入影片檔的方式。 要在 HTML5 中使用 <video> 元素嵌入影片檔的語法與結果範例如下： See the Pen video element pt.1 by Tedutw (@Tedutw) on CodePen. 上述的<vidio controls>標籤作用為叫出影片撥放介面(撥放、全螢幕音量控制等)。若如上述的例子，影片檔案太大的話，也可以在<vidio>標籤內指長寬，範例如下: See the Pen video element pt.1-width&height by Tedutw (@Tedutw) on CodePen. <source src="...">元素可以指定撥放的影片檔 URL，後方的「type="video/mp4"」為宣告媒體種類(media type)的指令，在此例中宣告檔案類型是 mp4 檔。 以下為檔案類型與媒體種類 (media type) 的對照：
檔案類型
媒體種類 (media type)
MP4
video/mp4
WebM
video/webm
Ogg
video/ogg
HTML5 支援的音訊檔案有三種：MP4、WebM 與 OGG。 <video> 與 </video> 標籤中夾帶的「Video is not supported by your browser」，中譯為：「你的瀏覽器不支援 video 元素」，平時不會出現，只會在當使用者使用的瀏覽器不支援 <video> 元素時出現。較多人用的 Chrome 與 Firefox 瀏覽器支援所有被 HTML5 所支援的視訊檔「.mp4」、「.webm」與「.ogg」。但是 IE 與 Safari 瀏覽器就就不支援副檔名為「.webm」與「.ogg」的視訊檔。 <video> 標籤中的「自動撥放」與「重複撥放」指令 上述提到，<video> 標籤可以讓音訊控制面板 (功能有撥放、暫停與音量控制) 顯現。除此之外，前端工程師還可以為 <video> 標籤下定義，指定音訊檔是否要自動撥放或是重複撥放。 自動撥放 如果在 <video> 標籤中指定「自動撥放(<video controls autoplay>)」的話 ，則嵌入的視訊檔會在網頁 loading 好後自動撥放，不會事先問使用者是否要撥放。語法如下： (可點右方的「Result」按鈕看結果，即會自動撥放視訊。) See the Pen video element pt.2-auto by Tedutw (@Tedutw) on CodePen. 重複撥放 如果在 <video> 標籤中指定「重複撥放(<video controls loops>)」的話 ，則嵌入的視訊檔會在影片撥放完畢後自動重播。語法如下： (「Result」中的影片撥放結束後，即會自動重播視訊。) See the Pen video element pt.2-loop by Tedutw (@Tedutw) on CodePen.
