【文章摘要】不理解信息架构，可能永远是 交互设计 的门外汉！超文本标记语言Hyper Text Markup Language，是一种简单灵活的信息描述，通过学习和使用它，不但能够建立抽象思维和结构化思维，将屏幕交互的本质融会贯通，更能确立与动效/前端工程师的沟通优势，一劳永逸。
业精于勤，荒于嬉。学习，永远是自己的事！本文并非讲述HTML的学习方法，而是帮助理解它的重要性。
Tim Berners-Lee在1990年制作了世界上第一个网站，由此万维网产生(分不清互联网和万维网？请默哀三分钟)。超文本标记HTML并非是Tim的发明，而是他根据从庞大的标记语言家族剥离出来的。
GML是标记语言的祖宗，衍生出SGML、MathML、(x)HTML、XML、WML、SVG等子孙，娶了XSL、XLST、CSS等儿孙媳妇，繁育出XForms、XPath、XQuery、SOAP、PDF等亚种(相关概念参考Wiki，不太多罗列)，反正，几乎所有的编码协议都和标记语言是亲戚关系，甚至物联网、智能家居、智慧交通……都会用到标记语言。
如果读过《不理解“信息”，莫再谈“架构”》，一定记得下面这段话：
语言文字是一种特殊的载体，通常意义上说，「任何事物都可以用语言文字准确的描述」，如果描述不清楚，那么人类就会创造出新的词汇，去描述它们。
超文本标记语言HTML，是人类创造的一门语言，允许插入文本以外的图像、多媒体、声音等内容(超越了“只能是文本”，因此叫超文本)，目标是让这门语言可以「描述任何事物」。两类角色可以读懂这种语言编码：编写者、浏览器。
HTML是一种抽象的文本，基因里就是用来“描述信息架构”的。
例如：
HTML声明 “这有一张马的照片”(抽象)；
浏览器读懂声明，真的显示一匹马(实例化)。
对学习信息架构最大的帮助！！！
极其反感DIV+CSS这种说法，粗暴的解释完全抛弃了[语义]这个重要概念，好比把“设计师”说成“美工”，把“厨师”说成“烧菜的”，把“运维”说成“网管”……
其实，每一个HTML标记都有自己的语义，例如：
不胜枚举
如果理解这些标记/属性的含义，就可以熟练的知晓基本语义(前提是HTML编写者也同样理解标记含义)：
本文章中，Hozin提到了“业精于勤，荒于嬉。”
韩愈《进学解》，并解释了信息架构IA的正确梳理方法。
翻译成中文语义，大致如下：
本文章中，Hozin提到了“业精于勤，荒于嬉。”引用>韩愈《进学解》文献>，并解释了信息架构IA缩写>的正确梳理方法。段落>从需求抽象出概念，把概念实体化；列表项>罗列属性、改变属性的方法，丰富信息架构。列表项>有序列表>
很多人不明白《Web信息架构》一书中提到的Context(与程序开发中Context的不是一个概念)；如果理解DOM文档对象模型是什么，并且可以从HTML里提炼出DOM视图，那么就基本可以理解Context了！
例如，上例中DOM大致为
受控词表、叙词表，就是一些特定的专有名词，通过记录它们的定义和等价关系，形成了一个排列有序、组织明确的术语网络(类似DOM)。
HTML中类似以及等短语元素都是非常具体的叙词表应用，对学习搜索模式也非常有帮助。
DTD语法规则，就是由HTML标记组成的叙词表。
HTML当中内置了大量为表单预设的标记，甚至在H5当中，已包含简单的表单校验，如果能够熟悉并使用它们，对Web端的交互设计来说，事半功倍。
以下这些标记/属性，对理解表单的交互帮助非常大：
前端工程师是炙手可热的职业，他们当然不仅仅需要使用HTML+CSS，还有基于JS的各种脚本语言；HTML是不带有运算功能的，学习起来非常简单。作为交互设计师，常见的几十个标记像家人一样熟悉，看得懂，记得住，能手写；CSS这样的远亲只需要做到面熟即可。
只要是基于屏幕的交互，都会用到信息架构，作为思维模式的训练，HTML帮助很大。并且绝大部分移动开发人员也是精通HTML的，安卓和IOS控件开发语法，和HTML有近似之处，这对沟通非常有帮助。
在未来几年内，封装H5这种方式会不会替代原生APP，谁也不能保证。艺不压身，有备无患，想想当年那些开发Flash AS的工程师吧！
HTML5只是HTML的一个主流版本，根本就不神秘(也不是什么最新的技术，N年前就有)，在前面版本的基础上，H5宽松了一些语法，针对多媒体、画布、表单增加了一些标记和属性，从理解信息架构的角度来说，未必一定要去学习HTML５。
无论是写文档，还是面基，如果使用一些开发术语，那些工程师们几乎“秒懂”！
本文由 产品100 为你推荐并呈现
文章来源：微信公众号：Hozin
文章作者：鸿津
友情提示：
若出处标注错误，请联系QQ：2977686517及时更正，感谢理解和支持！
少年关注我们的官方微博@产品100和微信订阅号：chanpin100ghsd，有惊喜哦！
