H5新聞的概念起源與技術邏輯

蘇濤

摘 ?要 ?2015年以來，諸多基于H5形態的新聞作品廣為流行，在引發大量受眾關注的同時，也取得了非常好的傳播效果。然而，在H5新聞已然成為移動互聯網時代一種重要的信息傳播手段之時，學界卻對“H5”及“H5新聞”存在著很多誤解甚至誤用。文章認為，H5新聞概念使用的混亂在一定程度上源于對其技術起源和技術邏輯理解的不透徹。因此，為加深對H5新聞的理解，推動其在未來更加繁榮的發展，文章在以上兩個層面展開對它的辨析與正名。

關鍵詞 ?H5;HTML5;H5新聞

中圖分類號 ?G202 ? ? ?文獻標識碼 ?A ? ? ?文章編號 ?2096-0360（2019）20-0001-05

1 ?問題的提出

2014年以來，一種被稱作“H5”的信息傳播形式橫空出世，其中的個別作品（例如小游戲《圍住神經貓》①）借助微信朋友圈瘋狂轉發，甚至創造了3天內瀏覽量過億的傳播奇跡。2015年之后，這種傳播形式更是大行其道，在廣告、宣傳、新聞、游戲、教育等諸多領域得到廣泛的應用（2015年也因此被人們譽為“H5元年”）。而隨著新聞媒體對H5的積極運用，各種基于H5技術形態的新聞作品不斷涌現，也有效地吸引了億萬受眾的注意力。H5已然成為當下移動互聯網時代高效的新聞信息傳播手段之一。

與來自業界熱火朝天的H5實踐相映襯，學界對它的討論也漸趨熱絡，僅新聞領域目前發表相關論文就已可以百數計。當人們以“H5”命名這個新技術體系之時，便很自然地將同樣以這種技術體系呈現的新聞形式稱之為“H5新聞”。然而，很奇怪的是，對于到底什么是“H5新聞”？那些以“H5新聞”為主旨的文章，要么避而不談，要么一帶而過、語焉不詳，儼然使之成了一頭“房間里的大象”。其結果是，首先，雖然大家的討論對象都指向同一現象和實踐，但卻表述不同——“H5新聞”[1]、“Html5動態新聞”[2]、“HTML5新聞”[3]“H5互動新聞”[4]、“H5交互動畫”[5]等各種表述的混用，極易引起人們的困惑和誤解。其次，在更深層次上，對概念討論的不夠深入和界定的混亂，還反映為使用者對H5新聞背后的技術原理和技術邏輯理解不透徹，甚至存在嚴重的誤讀。

本文雖無意也無力從純技術的角度展開對H5新聞的探討，但為了盡可能從底層邏輯上厘清H5新聞的起源和意涵，將不得不在技術層面上對其進行追根溯源。由此，本文的研究問題可以歸結為相互關聯的兩個層面。首先，從技術的源頭出發探究H5到底是什么，它有著怎樣的技術起源和內涵;其次，基于對技術起源和內涵的理解，進一步總結H5技術體系（底層）技術邏輯。

2 ?起源與意涵：H5新聞的概念辨析

2.1 ?H5：一個中國本土概念

實際上，只有在中國大陸才用“H5”這種表述，而在西方甚至我國港臺地區，都找不到這樣的表述或概念。而對于這一表述，學界和業界（特別是IT界）也持有完全不同的態度，一方用的熱火朝天，另一方則對其嗤之以鼻。

“H5”作為一個極具中國本土特色的概念，源于迅猛發展的互聯網技術，特別是基于這種技術而蓬勃發展的中國互聯網創新實踐。自2014年最新的HTML5技術標準發布之后，各種具有豐富交互性和視聽效果的基于H5技術體系的內容產品通過移動平臺（微信）得到強有力的傳播。而近年來，伴隨著移動互聯網技術和現代通訊技術（特別是4G技術）的發展，各種H5產品呈現出愈發強勁的發展勢頭。不僅越來越多的廣告公司，把H5作為一種重要的傳播形式和營銷手段而納入到其業務體系中，新聞媒體也開始利用這種新技術體系進行新聞信息的創新傳播。正是得益于技術和實踐的同步發展，我國廣告、新聞等領域對H5技術平臺的運用，已居于世界領先地位，各種制作精良、傳播高效經典案例也不斷涌現出來。

雖然從嚴格意義上來看，“H5”是一個破綻百出的概念（詳見下文論述），但它不僅具體指向當下一種鮮活的、極具生命力的新媒體技術實踐，而且暗示了關注技術與媒體交互影響所帶來的變革的重要性。因此，當大家都來使用這個概念時，它便實際擁有了約定俗成的意義。而我們現在需要做的，就是在追根溯源基礎上正本清源，從技術的底層邏輯開始，逐步梳理、匡正這個概念的應有的意涵。

2.2 ?H5是什么？——技術的起源與概念辨析

H5是什么？它是一種功能強大的網頁編輯技術（具體的技術形式），還是一種技術標準（HTML5）？抑或是一種基于這種技術標準生產的酷炫產品（移動交互網頁）？

目前，人們經常在以上三個不同意義維度上混用這一概念，并最終導致概念使用的混亂。例如，我們經常會看到“H5”與“H5技術”的混用，甚至將H5等同于移動端網頁、App等。概念使用上的混亂源于概念理解上的混亂——概念的使用者并沒有搞清楚HTML、HTML5等一系列與H5相關的技術概念的真正含義，以及三者之間的區別、關聯和淵源。

因此，對H5概念的追根溯源，不僅僅可以幫助我們充分理解這個廣為流行的、具有鮮活實踐指向和蓬勃生命力的概念，更是對其有效運用和創造性實踐的基礎。正如互聯設計師蘇杭所言：“H5是個嶄新的領域，它最需要的就是我們這些設計者的開荒，偽裝接電話、偽裝朋友圈、視頻的第一次大膽植入、3D交互效果的第一次運用，這些舉動沒有對H5本身的理解和認識，是根本無法實現的。”[6]同理，對于新聞業者而言，也只有在充分了解H5的本質及其特性基礎上，才能將其有效的、創造性的運用到新聞報道和新聞信息傳播的領域。

那么，H5到底是什么？人們通常將H5理解為HTML5的“簡稱”②（實際上，人們在多數情況下所使用H5概念的內涵遠遠超出HTML5，這個將在后文詳述）。這種理解至少暗示了H5與HTML5有著緊密的關聯。由于HTML5是由萬維網聯盟（W3C）于2014年10月28日正式發布并推薦的HTML的最新技術標準[7]。所以，要想深入正確的理解H5，需要首先了解與之緊密相關的HTML及其最新的5.0

版本。

2.2.1 ?作為網頁標記語言的HTML

“HTML”為英文“Hyper Text Markup Language”的縮寫，即“超級文本標記語言”③，是當前一種用于創建網頁的最主要的標準標記語言。它于1993年6月作為互聯網工程工作小組（IETF）的工作草案而發布（當時還沒有成為通行的標準），此后自1996年起，一直由萬維網聯盟（W3C）負責維護，并于2000年成為了國際標準④。

HTML作為一種網頁創建的基礎技術，被用于設計網頁、網頁應用程序以及移動應用程序的用戶界面。然而，要完成上述任務，單憑HTML一種編輯語言還遠遠不夠，除此之外，還需要CSS和JavaScript（簡稱JS）的配合。在這三者當中，HTML用來建構網頁的結構，好比人體的骨骼;CSS用來描述網頁的樣式，好比人體的皮相;JS則用來定義網頁的行為，好比人體的動作。因此，上述三種語言，分別對應網頁的結構層、表示層和行為層，常被稱之為網頁編輯的三駕馬車（參見圖1）。其中，值得特別強調的是，HTML是構建網頁的基石，正是它把這三者緊密聯系在一起，以供網頁瀏覽器的讀取，并以可視化網頁形式呈現出來。

總結而言，HTML是構建及呈現互聯網內容的一種主要語言方式，因而也成為互聯網的核心技術之一。

2.2.2 ?作為網頁標記語言最新技術標準的HTML5

HTML自誕生之日起，經歷了多次修改和升級，HTML5顧名思義就是對HTML的第5次重大的修改，是HTML的5.0版。

作為當下最先進的網頁標記語言技術標準，HTML5添加了許多新的語法特征，以便我們更容易的在網頁中添加和處理多媒體（包括音頻和視頻）、圖片和數據內容。以視頻為例，通過HTML5處理的網頁可以輕松地播放視頻文件，因而不再需要Flash⑥和第三方插件。而在以往，如何使用瀏覽器順暢地播放視頻，一直都是一個令我們頭疼的事情。此外，HTML5還有許多其他方面的改進，比如它的代碼更清晰，語義更明確;具有良好的網絡定位功能⑦;實現了瀏覽器的本地存儲⑧、繪圖畫布（canvas）功能⑨等。

最后需要特別強調的是，正如前文所述，由于HTML標記語言不能單獨完成網頁建構，所以，當我們論及HTML5時，實際指的是包括HTML、CSS和JS在內的一套廣義上的技術組合。

2.2.3 ?作為一種綜合性新技術體系的H5

那么，H5與HTML5之間是什么關系？H5到底是一種技術、還是一種技術標準、抑或是一種產品？

經過前文的梳理可以看出，首先，H5顯然不是HTML5的縮寫，不能將其作為HTML5簡稱（業內人士非常反感這個H5名稱，以至于很多程序員認為H5就是HTML5的錯誤拼寫方法）。其次，當我們在多數情況下談及“H5”時，顯然也不僅僅是指作為技術標準的HTML，甚至也不是指廣義上HTML5技術組合，而是包含二者，同時在內涵上要大于二者的一個新的意指。換言之，“H5”有著更為廣泛的含義和實踐指向，而三者之間的關系應該是：H5 > ?HTML5（廣義的） > ?HTML（參見圖2）。因此，我們日常中對“H5”的使用，實際上是囊括了HTML5技術標準、技術組合、技術產品、技術平臺等含義在內的一種復合意義指向。本文也正是在這個意義上理解并使用“H5”概念，即H5是一種建立在HTML5技術規范之上的綜合性的技術體系。

2.3 ?H5新聞的定義

通過上文的梳理，筆者對“H5新聞”界定如下：指建立在HTML5技術規范基礎之上，綜合了特定的網頁效果、視聽效果（包括音效和動效）、感官效果（包括3D、全景等）和交互性等因素，以“超媒體”（關于“超媒體”的界定及辨析，詳見后文第三部分）的技術形式呈的報道形式和樣態。

3 ?超媒體與交互性：H5新聞的技術邏輯

進入新世紀以來，傳播科技以一種異乎尋常的速度不斷發展，正如Hirschorn所感嘆：“幾年之后，當我們回顧過去這15年的變化，會發現這15年是數字媒體歷史上最紛亂繁雜的一章。”[8]而每一次媒介技術的演進，都會導致部分新聞從業者一時無法自如應對新的媒介實踐。究其原因，除了面對陌生的技術現象而必然產生的經驗落差之外，還在于人們對于由技術不斷迭代升級所帶來的信息的傳播（呈現）方式、特別是傳播機制、思維與理念變化的不適應。這種由技術變革而引發的傳播機制、思維與理念上的變化即是媒介的新“技術邏輯”。

由此可見，在媒介技術狂飆突進的發展態勢下，新聞業者不僅要及時掌握相關技術知識，或許更迫切的是，必須適應由媒介技術不斷迭代升級所帶來的“技術邏輯”的變化。具體到本文所討論的“H5新聞”，這種“技術邏輯”也是將H5技術體系更有效、更富創造性地運用到新聞業務領域的必要前提。通過前文對H5新聞的追根溯源及概念辨析，筆者認為，H5技術體系所隱含的“技術邏輯”集中體現在兩個方面，即超媒體邏輯與交互邏輯。

3.1 ?超媒體邏輯

“超媒體”（Hypermedia）是一種非線性的信息組織方式，它將文字、表格、聲音、圖像、視頻等多種信息媒體以“超文本”（Hypertext）方式組織起來，形成Web頁面，使人們通過瀏覽器可以訪問各種不同結構的信息倉庫，找到所需要的任何媒體的信息[9]。

“非線性的信息傳播，實質上是一種文本上的超鏈接模式”[10]。“超媒體”首先是建立在“超文本”（Hypertext）技術基礎之上的。在納爾遜（Ted Nelson）于1963年發明了上述這兩個詞之后，它們主要被用來指涉“萬維網”⑩中字詞、圖像等的聯想性鏈接。實際上，我們今天所主要討論的“HTML”（Hyper Text Markup Language）即是用來編寫“超文本”網頁的計算機語言。“超文本”則主要以“超鏈接”（Hyperlink）的形式存在——“此種鏈接表明文本中暗含著其他文本，并能將它們即刻調出來。它意味著跳躍的概念。有了跳躍的概念之后，文本的主次、原文與參照等整個舊有的觀念垮掉了。”[11]因此，“超文本”打破了印刷時代的文字閱讀所要求的線性思維方式，而代之以非線性的、自由聯想的“超媒體思維”。

“超媒體思維”不僅早已經融入了由互聯網的興起而引發的信息革命，更以一種基礎的方式改變著我們與信息的關系——這種方式更符合人們思維聯想和跳躍的習慣，不僅具有良好的包容性和可擴充性，更是超越了媒體類型對信息組織與檢索的限制。

正如“超媒體”一詞的發明者納爾遜所認為的：人的思想是非順序的或曰非線性的，它的特點是聯想。“超媒體”的出現，使得人類幾千年來在文字閱讀過程中建立起來的線性思維方式逐漸崩塌，從而實現了對人的原初的非線性思維方式的再度回歸。

H5技術體系作為一種典型的“超媒體”，亟待其使用者在思維上進行適應性創新。這種適應和創新，不僅是對以前單一媒介形式的揚棄，更是對我們長期以所固有的線性思維的揚棄。因此，具體到H5新聞的創意與制作，如果沒有這種思維上的改變，幾乎不可能設計或創作出一個優秀的H5新聞作品。

首先，“超媒體”思維要求H5新聞的創作者真正具備的“媒介融合”的觀念。如前文所述，HTML5實現了對多種媒體平臺的真正兼容，換言之，建立在這種標準上的網頁產品可以同時在PC端（臺式機、筆記本）、手機端（包括iOS系統、Android系統、Windows phone系統）、平板電腦（Mac）等各種電子終端上使用。其中，由于現在越來越多的用戶選擇使用移動設備訪問網站或者web應用，HTML5的跨平臺特性尤其表現為對以手機為代表的移動端的兼容（HTML5由此也被譽為最移動化的開發工具）。

因此，H5新聞創作不僅要在形式上適應多平臺和多屏幕（跨屏）的需要，更要考慮到不同的使用或者視聽情景——根據不同的平臺特性，特別是不同的平臺使用者、使用情景的特性，進行針對性的新聞創作和創意開發。例如，H5新聞的創作首先需要充分考慮到手機平臺的特性，以實現與之相匹配的使用與視聽效果，滿足人們在移動端的使用與視聽心理。

其次，“超媒體”思維要求H5新聞的創作者建立起一種基于在H5技術體系的綜合感官思維能力。超媒體是真正意義的“富媒體”，它囊括了我們所熟知幾乎所有的信息呈現形式和媒介效果——文字、音頻、視頻、動畫、3D、全景、重力感應等。因此，H5新聞的創作“沒有做不到，只有想不到”——有著無限的潛能。實際上，在廣告、游戲等應用領域，H5技術體系正在大放異彩，各種具有創造性、嶄新形式和效果的作品也層出不窮。

H5技術體系以其超媒體的技術特性，賦予了新聞報道技術上、形式上更多的可能，并給人們帶來多元化的感官體驗。而新聞業者需要做的，就是要學會運用綜合感官思維能力來創設H5新聞，即充分利用超媒體技術特性，將新聞元素與豐富的技術元素進行有機的整合，以此呈現新聞事實、完成新聞敘事。

3.2 ?交互邏輯

“交互性”（interaction）是HTML5在其技術升級過程中的一個終極指向。HTML5所具有的網絡定位、本地存儲、繪圖畫布、智能表單以及對原生態視頻和音頻的支持等技術特性，都為HTML5的“交互性”奠定了基礎。因此，正如劉斌所言：“HTML5并非僅僅用來表示Web內容，它的使命是將Web帶入一個成熟的應用平臺，在這個平臺上，視頻、音頻、圖像、動畫以及同電腦的交互都被標準化。”[12]

HTML5的技術升級不僅有著明確的“交互性”指向，而且在實踐過程中也確為H5作品的“交互性”提供了無限可能。目前所見的H5新聞作品經典案例，大都需要通過讀者的交互過程而逐步完成新聞信息的展現，也都充分運用了H5技術體系的交互特性。

正是通過交互的過程，讀者完成對H5作品的信息接收，并由此形成了一種個性化的交互閱讀體驗。因此，這種信息接收與體驗過程是否有效、是否完美，大大依賴于創設者所具有的“交互思維”。筆者認為，“交互思維”之于H5作品創設的意義主要體現在兩個方面：讀者參與生成內容與多元的視聽體驗。

首先，交互的過程使讀者深度參與了信息的呈現（生成）過程。在信息的呈現方式上，H5新聞作品的內容和信息元素漸次顯現，有賴于讀者通過其點擊、擦除、手勢、重力感應、搖一搖等交互動作而進行的（選擇性）觸發。并且，讀者不同的參與（選擇）會對信息呈現過程、甚至最終的結果產生影響。比如，讀者對《閱兵手冊》[13]各個新聞板塊的選擇與操作，不僅直接決定了信息出現的先后次序和組合方式，還決定著特定信息是否出現、是否被接收。

傳統的非交互新聞作品（例如傳統的新聞網頁），雖然其頁面元素中也有動畫，但這些頁面元素卻“只準看，不準動”，換言之，這些頁面元素（包括動畫）只允許讀者被動的觀看欣賞（至多允許讀者點擊翻頁），而無法進行更多的選擇和參與。而盡管讀者在H5新聞作品中的參與、選擇仍然屬于某種程度上的定制化的結果，但它已與上述傳統新聞傳播模式大所不同——讀者更多的被“賦權”，不僅主要的頁面元素都有賴于讀者的選擇性觸發，新聞故事和情節的演繹也有賴于讀者的選擇和參與。因此而為帶來啟示是，讀者正是在其信息接收過程中完成了對H5新聞作品深度參與和內容的生產。因此，對于H5新聞的創設者而言，必須讓“讀者”提前參與到新聞作品中來，亦即在設計階段就要更多的考慮如何從讀者角度來呈現新聞——特別是如何精妙地調動讀者的互動熱情？讓其在逐層展開的互動中以個性化的方式參與新聞的生成，并最終以此達成對新聞信息的深入理解（體驗）和有效接收。

其次，“交互性”引發讀者（用戶）多元的視聽體驗。

這首先有賴于的H5技術體系所造就的“超媒體”特性。“超媒體”是真正意義的“富媒體”，囊括了我們幾乎所有熟知的信息呈現形式和媒介效果。因此能夠在技術上、形式上為H5新聞帶來更多的可能，并由此給人們的視聽過程帶來更加多元化的感官體驗。此外如前文所述，“超媒體”的特性就在于“非線性敘事”，這也意味著，在基于H5技術體系的新聞作品中，作者與讀者之間原有的主從關系變成了一種共同創造或意義共構的互動關系。因此，這些作品中文本的意涵，并非全然的固定，而是需要讀者根據文本所提供的隱含脈絡、情節或場景設置而做進一步的衍生。如此這般，看新聞就如同打游戲，不單需要用耳目視聽，更需要動手——讀者通過“人機交互”，步步深入地進行信息的選擇、探索和體驗。例如《夜游中南海》[14]中兩位主人公的行走及景點、會談內容的呈現都需要在交互的前提下才得以完成。讀者也因此不僅擁有了這種衍生的交互權力，還引發讀者諸多基于當下新聞情景的感官、心理、情感和藝術性等方面視聽體驗。

讀者對H5新聞作品的整個信息接收過程都是建立在參與和交互的基礎上的。如果我們把讀者當作消費者，那么在對參與性與體驗的強調上，H5新聞作品便與當下方興未艾的“體驗經濟”不謀而合。體驗經濟強調生產和消費過程中消費者的主體參與，依托個性化生產方式使消費者獲得感官或情感滿足（從而實現盈利）。H5新聞作品正是通過“交互性”，以一種“共謀”的方式邀請讀者參與新聞的呈現過程，并最終使消費者在互動體驗的過程中滿足個性化的信息需求，并給予獲得感官、情感與藝術性等方面的滿足（從而提高閱讀量和傳播

效果）。

可見，HTML5的技術升級不僅有著明確的“交互性”指向，而且在實踐過程中也確為H5作品的“交互性”提供了無限可能。而對于H5新聞而言，“交互性”不僅意味著新聞敘事方式的變化，還意味著傳統的傳受關系的改變。在敘事方式上，創設者不僅需要更多地從讀者的角度和立場來解讀新聞，更需要用層出不窮的新技術來包裝新聞故事，從而將敘事過程巧妙的融入到由各種新技術所創設的新聞場景中去。而在傳受關系方面，則需要更多考慮讀者體驗的問題，特別是通過各種新技術而創設出不同的場景、不同的交互形式，以供讀者的探索、開發和體驗，最終在愉悅的體驗過程中完成新聞信息的呈現和傳播。

總結而言，無論是在技術上、還是在信息的呈現效果方面、以及用戶體驗方面都要求H5新聞作品必須具備“交互思維”。就像魚離不開水，H5新聞（包括H5廣告）離開了交互，便失去了H5技術體系所賦予它的獨特價值，失去了其應有的特性，充其量不過一個滑動PPT或移動頁面而已。

注釋

①圍住神經貓，http：//h5.mse.360.cn/games/mobile_games/jsbm.html，2018/5/2，15：19。

②注意這里是“簡稱”不是“縮寫”，因為HTML本身已經是“Hyper Text Markup Language”的縮寫，H5不可能再對其進行第二次縮寫。

③“超文本”是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。

④HTML，https：//zh.wikipedia.org/wiki/HTML， 2018/3/1，23：21。

⑥在這個意義上，我們可以把HTML5理解為一種用來替代 Adobe Flash，并實現與之相同或相似網頁特效的技術標準。繼蘋果瀏覽器不支持Flash之后，谷歌瀏覽器也在2015年9月宣布不再支持Flash自動播放，由此可見，在可預見的未來，HTML5必將取代Flash作為網頁動效的首選技術平臺。

⑦HTML5提供了一系列用于網絡定位的API接口，融合了GPS、IP地址、WiFi熱點等多種方式，具有定位精度高、靈活性強的特點。因此，HTML5能夠準確標記用戶當前所在的地理位置，適應了移動互聯網的發展需求。

⑧即在瀏覽器關閉后，依然能夠保存用戶信息、緩存數據、用戶上一次的應用狀態等數據。

⑨簡單地講，就是可以不使用Flash等插件而直接在網頁上涂鴉。

⑩萬維網也被稱為現今最通用的超文本系統。

參考文獻

[1]詹新惠.H5產品的基本樣式及其在新聞領域的應用[J].新聞與寫作，2017（6）.

[2]郭真輝.“Html5動態新聞”發展潛力分析[J].青年記者，2015（3）.

[3]黃恒.移動互聯網環境下的HTML5新聞編輯特點分析[J].新媒體研究，2017（23）：79-80.

[4]劉彥宏.H5互動新聞與新聞娛樂化的關系[J].青年記者，2017（23）.

[5]何蓉.H5交互動畫在新聞報道中的應用和趨勢——以黨的十九大會議和2018年全國兩會報道為例[J].新聞研究導刊，2018（17）.

[6]蘇杭.H5+移動營銷設計寶典[M].北京：清華大學出版社，2017：17.

[7]Open Web Platform Milestone Achieved with HTML5 Recommendation[EB/OL].[2018-03-01].https：//www.w3.org/2014/10/html5-rec.html.en.

[8]Hirschorn M. Closing the digital frontier [J]. The Atlantic，2010（3）.

[9]超媒體方式[EB/OL].[2018-05-03].https：//wiki.mbalib.com/wiki/%E8%B6%85%E5%AA%92%E4%BD%93%E6%96%B9%E5%BC%8F.

[10]陳力丹.互聯網的非線性傳播及對其的批判思維[J].新聞記者，2017（10）.

[11]胡泳.世界如此多姿多彩[J].汕頭大學學報（人文社會科學版），2017（7）.

[12]劉斌.HTML5——未來網絡應用的核心技術研究[J].自動化與儀器儀表，2010（4）.

[13]閱兵手冊[EB/OL].[2018-05-01].http：//news.qq.com/zt2015/review_book/foot.htm.

[14]習近平和奧巴馬是這樣夜游中南海的，你們感受一下[EB/OL].[2018-05-01].http：//news.163.com/special/zhongnanhai1/？f=wx#！/scene-1.