从HTML入手，学习信息架构_html/css_WEB-ITnose

【文章摘要】不理解信息架构，可能永远是 交互设计 的门外汉！超文本标记语言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是一种抽象的文本，基因里就是用来“描述信息架构”的。

例如：

HTML声明 “这有一张马的照片”(抽象)；

浏览器读懂声明，真的显示一匹马(实例化)。

通过HTML深入理解语义

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

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

其实，每一个HTML标记都有自己的语义，例如：

不胜枚举

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

本文章中，Hozin提到了“业精于勤，荒于嬉。”韩愈《进学解》，并解释了信息架构IA的正确梳理方法。

1. 从需求抽象出概念，把概念实体化；
2. 罗列属性、改变属性的方法，丰富信息架构。

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

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

DOM即上下文Context关系

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

例如，上例中DOM大致为

叙词表的具体使用

受控词表、叙词表，就是一些特定的专有名词，通过记录它们的定义和等价关系，形成了一个排列有序、组织明确的术语网络(类似DOM)。

HTML中类似以及等短语元素都是非常具体的叙词表应用，对学习搜索模式也非常有帮助。

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

表单设计不再是难事

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

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

不需要非常精通HTML

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

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

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

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

不一定要学习HTML5

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

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

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

本文由 产品100 为你推荐并呈现

文章来源：微信公众号：Hozin

文章作者：鸿津

友情提示：

若出处标注错误，请联系QQ：2977686517及时更正，感谢理解和支持！

少年关注我们的官方微博@产品100和微信订阅号：chanpin100ghsd，有惊喜哦！