从HTML入手，学习信息架构

不理解信息架构，可能永远是交互设计的门外汉！超文本标记语言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是一种信息架构的描述（编码）

如果读过《不理解「信息」莫再谈「架构」》，一定记得下面这段话：
<p class="framedashe">语言文字是一种特殊的载体，通常意义上说，「任何事物都可以用语言文字准确的描述」，如果描述不清楚，那么人类就会创造出新的词汇，去描述它们。</p>

超文本标记语言HTML，是人类创造的一门语言，允许插入文本以外的图像、多媒体、声音等内容（超越了“只能是文本”，因此叫超文本），目标是让这门语言可以「描述任何事物」。有两类角色可以读懂这种语言（编码）：编写者、浏览器。

HTML是一种抽象的文本，基因里就是用来“描述信息架构”的。例如：HTML声明 “这有一张马的照片”（抽象）；浏览器读懂这个声明，真的显示一匹马（实例化）。

通过HTML深入理解「语义」

这是对学习信息架构最大的帮助！！！

极其反感DIV+CSS这种说法，粗暴的解释完全抛弃了[语义]这个重要概念，好比把“设计师”说成“美工”，把“厨师”说成“烧菜的”，把“运维”说成“网管”……

其实，每一个HTML标记都有自己的语义，例如：
a=anchor 锚点
p=paragraph 段落
em=emphasized 强调
ol=ordered list 有序列表
dl=description list 定义列表
dt=defines a term定义术语
dd=defines a description 定义（术语的）描述
span=span 一段（范围）
div=division 分段
……

同样，标记当中的属性也有自己的语义
src=source 源
href=hypertext reference 超文本引用
rel=relationship 关系
alt= alternate 替换物
dir= direction 指示（方向）
……

不胜枚举

如果理解这些标记/属性的含义，就可以熟练的知晓基本语义（前提是HTML编写者也同样理解标记含义），比如：

<p>本文章中，Hozin提到了<q>“业精于勤，荒于嬉。”</q><cite>韩愈《进学解》</cite>，并解释了信息架构<abbr title=" Information Architecture">IA</abbr>的正确梳理方法。</p>
<ol>
<li>从需求抽象出概念，把概念实体化；</li>
<li>罗列属性、改变属性的方法，丰富信息架构。</li>
</ol>

翻译成中文语义，大致如下：

<段落>本文章中，Hozin提到了<引用>“业精于勤，荒于嬉。”</引用><文献>韩愈《进学解》</文献>，并解释了信息架构<缩写 标题=" Information Architecture">IA</缩写>的正确梳理方法。</段落>
<有序列表>
<列表项>从需求抽象出概念，把概念实体化；</列表项>
<列表项>罗列属性、改变属性的方法，丰富信息架构。</列表项>
</有序列表>

DOM即是「上下文Context」关系

很多人不太明白《Web信息架构》一书中提到的Context（此Context和程序开发中的不是一个概念）；如果理解DOM文档对象模型是什么，并且可以从HTML里提炼出DOM视图，那么就基本可以理解Context了！

例如，上例中DOM大致为
<p></p

叙词表的具体使用

受控词表、叙词表，就是一些特定的专有名词，通过记录它们的定义和等价关系，形成了一个排列有序、组织明确的术语网络（也很类似DOM）。HTML中类似abbr、acronym、mark以及dfn、cite等短语元素都是非常具体的叙词表应用，对学习搜索模式也非常有帮助。

DTD语法规则，就是由HTML标记组成的叙词表。

表单设计不再是难事

HTML当中内置了大量为表单预设的标记，甚至在H5当中，已包含简单的表单校验，如果能够熟悉并使用它们，对Web端的交互设计来说，事半功倍。

以下这些标记/属性，对理解表单的交互帮助非常大：

<lebal for=””>标签为 input 元素定义标注；
<fieldset><legend> 给表单项分组；
<optgroup>选项组合；
Maxlength、Placeholder、Accesskey、TabIndex等表单常见属性；

不需要像前端工程师那样精通HTML

前端工程师是炙手可热的职业，他们当然不仅仅需要使用HTML+CSS，还有基于JS的各种脚本语言；HTML是不带有运算功能的，学习起来非常简单。作为交互设计师，常见的几十个标记像家人一样熟悉，看得懂，记得住，能手写；CSS这样的远亲只需要做到面熟即可。

移动交互设计师也需要学习HTML

只要是基于屏幕的交互，都会用到信息架构，作为思维模式的训练，HTML帮助很大。并且绝大部分移动开发人员也是精通HTML的，安卓和IOS控件开发语法，和HTML有近似之处，这对沟通非常有帮助。

在未来几年内，封装H5这种方式会不会替代原生APP，谁也不能保证。艺不压身，有备无患，想想当年那些开发Flash AS的工程师吧！

不一定要学习HTML5

HTML5只是HTML的一个主流版本，根本就不神秘（也不是什么最新的技术，很多年前就有），在前面版本的基础上，H5宽松了一些语法，针对多媒体、画布、表单增加了一些标记和属性，从理解信息架构的角度来说，未必一定要去学习HTML５。

与动效设计师、前端工程师无障碍沟通

无论是写文档，还是做沟通，如果使用一些开发术语，那些工程师们几乎“秒懂”！

请看到本文的交互设计师恶补HTML吧，WUI设计师对CSS也要基本掌握。