这篇文章是关于适当的标记在网站上的重要性。确保网站正常工作的一个好方法是在跳转到CSS和JS之前先编写HTML。这将使您可以专注于内容和功能，并在开始制作一切漂亮之前进行测试。
在我们最近从黄石国家公园回来的旅程中，我们想要停下来一个红盒子，抓几张DVD给我们的女儿观看。我不熟悉周围的环境，拿出半智能的Blackberry手机，打Redbox.com找到一些地点，也许会预留几件物品。在“加载样式表”的时候，手机被锁定了（我将责备T-Mobile的这个覆盖）我关闭了CSS并重新加载。在禁用JavaScript的情况下，我收到了只有HTML的Redbox网站的裸体，并被大写的“ Sorry，Your Shopping Cart is Full ”的文字所覆盖。我不确定那是从哪里来的，因为我还没有登录我的帐户，但我应该已经意识到，这是我会遇到的许多问题中的第一个。
在裸露的骨头HTML的网站是很容易阅读，我能位于“找到一个红盒子”按钮，但无法点击它。我的光标突出了按钮，但没有clicky我。用Javascript重新加载了几次之后，我终于可以单击按钮并填写表单，但是Javascript按钮不能再工作了。最终（45分钟后）我几乎能够取得成功。幸运的是，我的妻子刚刚Google发短信Redbox，几秒钟收到一些红盒子的文本。现在，我不是在写这个来讨论Google文本的优秀程度，我正在写这个来讨论像Redbox.com这样的网站如何能够使他们的网络体验更好，即使在操作系统，服务和所有其他变量都不是。
这个修复非常简单，只是确保我们的标记是可读的，可用的，可用的。这些其实都是我们都知道的基本事情，但好像还有很多网站是坏习惯创建的，所以这是一个改变一些旧习惯的问题。
尝试在你的下一个项目中实现一些这些方法：
在编码之前考虑内容
确保它在你的风格之前工作
思考更多的语义
内容
内容是任何人访问网站的原因。我们中的一些人只是出于纯粹的设计原因访问或寻找网站，但大多数浏览者，购物者和读者仅查看网站的内容。人们通常在寻找一些东西来学习，购买或激励他们，所以内容仍然是漂亮设计的王者。您的HTML应始终提供您希望用户查看的所有重要内容 - 避免通过Javascript或CSS注入重要内容。除了标题和段落，还要确保包含表单，按钮，导航和图像。
图像可能会非常棘手，特别是当您首先想到移动时，因为您不想加载一堆不必要的图像，并减慢移动加载时间。一些设计师更喜欢不使用标签，并通过背景属性通过CSS加载图像，但这种方法可能会伤害裸骨的用户体验，因为图像可能与内容一样有价值。我的小经验是将图像分成两类：内容和风格。“风格”图像用于导航按钮，背景，列表图标等。“内容”图像是与作者的照片，文章中的相关图像或基本上与内容内联的任何图像等实际内容相关的图像。
避免使用任何内联样式。现在，根据操作系统的不同，当CSS关闭时，CSS内联样式可能会显示，也可能不显示，因此变得不可预知，我们都知道我们不应该使用内联CSS（如果可能的话）。但更重要的是，在高度和宽度等HTML样式上使用自由裁量权。如果您正在展示一些表格数据或者需要布置的东西，那么您可以通过一切手段进行布局 - 这使得您的HTML更易于阅读和遵循。基本上，不要使用CSS内联样式，并尽可能避免阻塞HTML样式。
一切都需要工作
好吧，现在这确实是一个不容易的事情，但是有可能有成千上万个网站在剥离为HTML时无法正常工作。如果你有一个搜索表单或任何形式的表单，确保用户可以填写并提交它没有任何Javascript（JS）或CSS拐杖。至少，如果你有需要JS的表单或函数，添加一个友好的，好的提醒，这些元素需要JS打开才能工作 - 这将至少让用户知道，以便他们可以做出决定，而不是摸索一个小时试图弄清楚。
确保网站正常工作的一个好方法是在跳转到CSS和JS之前先编写HTML。这将使您可以专注于内容和功能，并在开始制作一切漂亮之前进行测试。我曾经写过我的HTML和CSS在一起，我会采取一部分的PSD文件（如标题），并完全用图像和布局代码，然后移动到下一部分。但是现在，我盯着psd文件，在头脑中编写布局代码（或在草图书中），然后从头到尾编写HTML代码。
思考更多的语义
网页设计（HTML5，CSS3或响应式网页设计）的热门词汇是“ 语义标记 ”。但究竟是什么呢？语义标记基本上就是内容的含义，并使用反映该含义的标签。一个很好的例子是strong / em标签与粗体/斜体标签的区别。粗体和斜体实际上只是一种文字风格，但它们并没有真正表现出任何文字的意义 - 强调和强调内容的意义以及风格。
现在，归功于HTML5，我们可以使用各种标签来使站点更加语义化，如“标题”，“页脚”，“旁边”和“文章”等等。不是所有的东西都在HTML5中实现，但是仍然有很多新的标签可以用来以更加语义的方式标记你的网站。即使你决定不进行跳跃，或者你想使用尚未完全采用的新HTML5标签，只需将你的div分配给这些标签名称并养成习惯。指定您的标题div“标题”的ID或分配您的职位股利，改变他们的类名称为“文章”。重点是：开始思考语义，并开始思考HTML5可以做什么，即使只是更多的语义上思考你的代码现在比没有更好。
如此简单的穴居人可以做到这一点
HTML是最原始的网络语言，几乎每个网站的基础 - 甚至一个穴居人可以做到这一点很容易...正确。这并不意味着它是最简单的使用它的形式，或甚至易于设计（因此，CSS）。不是每个人都知道如何用几根树枝和石头开火，所以不是每个人都知道如何工作HTML网站的唯一视图 - 这就是为什么设计是如此重要 - 但我们可以更好地设计我们的HTML代码，使体验一点点阅读，工作和使用更容易。