标记语言：定义、类型与 7 个示例

什么是标记语言？

标记语言是一套用于定义数字文档中内容的结构、呈现方式和用途的系统，以便计算机程序正确解释和展示这些内容。

标记语言使用特定的词汇、符号和语法规则对文本进行编码。

例如，HTML（超文本标记语言）中的 <h1> 标签表示被包裹的文本是一级标题。

搜索引擎可以利用这些信息更好地理解页面主题，浏览器则可以利用这些信息应用相应的样式。

以下是 H1 在页面上和后台代码中的呈现：

标记语言可以：

• 让网站对搜索引擎更友好
• 确保内容在不同技术上显示一致
• 提升网站的可访问性

标记语言与编程语言的区别

标记语言和编程语言都是用于组织、展示和操作内容或数据的计算机语言，但两者并不是一回事。

编程语言提供计算机可以执行的逻辑，让程序能够对输入作出响应、执行计算、做出决策并完成任务。

例如，可以编写代码让按钮在用户悬停时改变颜色。

相比之下，标记语言只能在元素加载的那一刻定义其结构和外观，无法动态改变元素的状态或行为。

Python、JavaScript 和 PHP 都是编程语言的例子。

标记语言的类型

标记语言可以是语义型、呈现型、过程型，也可以是这些类型的组合。

语义标记（又称描述性标记）通过为内容的结构和用途打标签来赋予含义，有助于浏览器、搜索引擎和开发者正确解释内容。

例如，在 XML 中，<author>John Doe</author> 把「John Doe」标识为一篇文章的作者，但这种标记并不影响该文本的呈现方式。

呈现型标记控制内容的视觉外观，让用户以特定方式看到内容。这种标记定义文本应该长什么样，但不指定系统应如何渲染。

例如，在 HTML 中，<b>Bold Text</b> 把被包裹的文本标记为粗体，但并不规定浏览器应采用何种具体方式实现这种外观。

过程型标记提供关于内容应如何处理、格式化或显示的逐步指令。这种标记不是定义外观，而是指示系统对文本做什么。

例如，在 LaTeX 中，\\textbf{Bold Text} 指示排版系统根据其后台处理规则应用粗体字重。

7 个标记语言示例

一些最广泛使用的标记语言包括 HTML、XML、Markdown、SVG、LaTeX、SGML 和 XHTML。

下面逐一了解这些标记语言：

1. HTML

HTML 是用于组织和构建网页内容的标准标记语言。

HTML 的最新版本被称为 HTML5。

通过把内容包裹在 HTML 标签中来定义 HTML 文档中的元素。

例如：

• <p> 标签用于段落
• <a> 标签用于超链接
• <img> 标签用于图片
• <h1> 标签用于一级标题
• <title> 标签用于页面标题

还可以使用语义化 HTML 来标记页面的不同部分——例如页眉、导航菜单和页脚。这有助于搜索引擎、辅助技术（如屏幕阅读器）和开发者理解内容的用途。

以下是非语义化 HTML 与语义化 HTML 的对比示意图：

许多 HTML 标签都包含属性，属性提供关于该元素的额外信息。

属性有名称和值。例如，href 属性用于定义超链接的目标地址：

HTML 通常与 JavaScript（一种增加交互性的编程语言）和 CSS（一种定义 HTML 内容样式的样式表语言）一起使用。

2. XML

XML（可扩展标记语言）用于存储和传输数据。

这种标记语言在 SEO 中很重要，因为 SEO 从业者用它来创建XML 站点地图。

XML 站点地图应列出网站上所有希望搜索引擎索引（即加入可能出现在搜索结果中的数据库）的页面。XML 格式有助于搜索引擎爬虫读取该文件。

在 XML 中，不受预定义标签集的限制，可以创建自定义标签来描述数据。

以下是一个简单系统的示例，用于组织和保存关于文章的结构化数据：

3. Markdown

Markdown 是一种轻量级标记语言，使用符号在纯文本编辑器中格式化文本。

这种语言语法简单，非常适合快速格式化，也便于在不同环境中阅读。

Markdown 在文字处理软件、即时通讯应用、在线论坛、文档工具、笔记应用、开发者平台、博客网站和项目管理工具中都得到广泛支持。

有些平台，例如 Reddit 和 GitHub，会使用自己版本的 Markdown。

4. SVG

SVG（可缩放矢量图形）是一种用于描述矢量图形的标记语言。

矢量图形由数学方程生成，因此只能用于相对简单的图形，但这些图形可以在不失真的情况下缩放。

例如，下面的 SVG 代码会创建一个蓝色圆形，占据容器最短边的 80%，并在容器中居中。

SVG 图像在任何尺寸下都能保持清晰，通常也比位图图形（如 JPEG 和 PNG）加载更快，因此是徽标、图标、图表和其他简单图形的理想选择。

5. LaTeX

LaTeX 是一种过程型标记语言，通常用于排版科学论文、研究文章和数学内容——一般采用 PDF 格式。

这种语言允许用户以正确的记法显示复杂公式，如下所示：

LaTeX 还能让引用、参考文献、脚注以及其他在别的标记语言中可能难以管理的元素更容易处理。

6. SGML

SGML（标准通用标记语言）是一套用于创建标记语言的框架——它是 HTML 和 XML 的基础。

要开始使用 SGML，需要先编写一份文档类型定义（DTD）。DTD 概述文档结构，并列出将要使用的元素、属性和实体。

然后即可按照这些既定规则编写文档。

以下是一个简要的示例：

如今，大多数开发者更倾向于使用 HTML 或 XML，而不是 SGML，因为 HTML 和 XML 更易用、支持也更广泛。

7. XHTML

XHTML 是 HTML 与 XML 的结合体，把 HTML 的呈现特性与 XML 严格的语法规则融合在一起。

XHTML 的初衷是改善代码和浏览器兼容性，但随着 HTML5 的推出，这些改进中有很多都变得多余。

如今，大多数开发者使用 HTML5 而非 XHTML，因为 HTML5 适应性更强，也能跟上不断演变的数字环境。

我应该学习标记语言吗？

学习相关的标记语言，可以帮助编辑文档、组织内容、管理网站，或格式化学术论文，而无需依赖外部帮助。

不过，许多平台都提供所见即所得（WYSIWYG）编辑器，可以可视化地编辑内容，平台会自动生成底层的标记语言。

例如，在 WordPress 可视化编辑器中应用「H1」样式，就会在页面的 HTML 代码中应用一个 <h1> 标签：

如果项目需要高级功能、定制开发或复杂的集成，不妨考虑聘请经验丰富的网页开发者来处理编码工作，这有助于确保效率、可扩展性和专业级的效果。

如何学习标记语言

可以通过跟随在线教程、参与相关社区或使用交互式代码编辑器来学习标记语言。

以下是我最喜欢的一些资源：

• W3Schools 为各种标记语言提供免费指南、视频教程、测验和练习。该网站还提供付费课程和认证考试。
• Codecademy 提供各种免费学习资源。它还让你能在工作区中试验 HTML 代码，并在浏览器中查看渲染结果。
• MDN Web Docs（Mozilla 开发者网络）提供各种免费的工具和资源来学习 HTML。它还能教你了解 JavaScript 和 CSS 等相关技术。
• Stack Overflow 是一个关于网页开发的论坛。如果你有疑问，它很可能已经被提问并回答过了——如果没有，你可以发起一个新问题。

发现并修复网站上的标记错误

仅仅一个放错位置的符号就可能造成标记语言错误，因此在发布内容前后进行检查至关重要。

Semrush Site Audit 工具会标出可能影响网站 SEO 表现的标记问题，例如：

• XML 站点地图格式错误
• HTML 错误（例如缺少 title 标签或 doctype 声明）
• SVG 图片文件错误

该工具还会识别技术 SEO 和站内 SEO 方面的其他问题，提供关于如何以及为何修复这些问题的建议，并允许为团队创建任务。

使用免费的 Semrush 账户，每月最多可以审计 100 个页面。