科技类新闻快讯
I’ve spent the past decade freelancing as an accessibility and efficiency consultant to website owners who’re either in deep legal troubles, or are having their traffic tank due to bad development decisions. In that time one of the continued issues I butt heads with client’s existing IT folks over is their garbage markup; where to be brutally frank most dev’s have their craniums wedged up 1997’s rectum. Much of this stems from the fact that ALL of the front-end “frameworks” out there — as part of their being monuments to ignorance, incompetence, and ineptitude — are created and maintained by people unqualified to write a single blasted line of HTML.
在过去的十年中，我一直为网站所有者提供无障碍获取和效率顾问的服务，他们因法律问题深陷麻烦或由于糟糕的开发决策而陷入了交通困境。 在那段时间里，我与客户现有的IT人员所面对的持续问题之一就是他们的垃圾标记。 坦率地说，大多数开发人员的头盖骨都扎在1997年的直肠上。 这主要是因为所有前端“框架”(作为它们构成愚昧，无能和无能的纪念碑的一部分)都是由没有资格编写HTML的人创建和维护的。
语义标记：病态委婉语。 (Semantic Markup: A Sick Euphemism.)
The term was created for one reason and one reason only, so as to not offend the know-nothings who use HTML wrong and still use outdated, outmoded, HTML 3.2–style presentational markup. Even as they slop a HTML 5 DOCTYPE atop the page and pat each-other on the back over how “modern” they are.
创建该术语仅出于一个原因和一个原因，以免冒犯那些错误地使用HTML并仍然使用过时，过时HTML 3.2样式的表示标记的人。 即使他们在页面顶部倾斜HTML 5 DOCTYPE并在背面轻拍对方，以了解它们的“现代性”。
Whilst sure, it’s the correct word as it means using HTML tags for their meaning instead of their default appearance, what that really should translate to is “using HTML properly”. The entire reason HTML even has tags isn’t for presentation, but as a means of saying what things ARE or WOULD BE in a professionally written document.
可以肯定的是，这是正确的词，因为这意味着使用HTML标记表示其含义而不是使用其默认外观， 但真正应该转换为的是“正确使用HTML”。 整个原因HTML甚至有标签不适合演示，但说什么事情或专业的书面文件将是一种手段。
为什么说“应该/应该”如此重要？ (Why Is Saying What Things “Are / Should Be” So Important?)
Because your base markup is supposed to be for more than the perfectly sighted sitting at a screen. From day one the reason HTML was even created in the first place was to convey documents and information within the limitations of the target device or even any handicaps of the user.
因为您的基本标记应该比屏幕上看得见的还要多。 从第一天开始，甚至最初创建HTML的原因就是要在目标设备甚至用户的任何障碍的限制内传送文档和信息。
Tim Berners-Lee CREATED HTML as a means of device-neutral conveyance. In the early days of the Internet there were dozens of radically different devices that needed to have a unified means of data transmission that retained the professional writing meanings of the documents. It didn’t matter if it was a Teletype at the CIA, a TTY device for the blind, a daisy wheel printer, the 21x22 text-only display of the VIC=20 Linus Torvalds was cutting his teeth on, the 40x25 display on an Apple II at some high school, or the high end 1152x864 monochrome display on the NeXT Workstation TBL was using at CERN when he wrote the first browser. Many of these devices couldn’t even depict “bold”, “italic”, or even draw graphics. You would say WHY something got a certain style so the user-agent (a browser is a UA but a UA isn’t always a browser) can best determine how to convey that within the limitations of the device.
蒂姆·伯纳斯·李(Tim Berners-Lee) 创建了 HTML，将其作为与设备无关的传输方式。 在Internet成立之初，有数十种根本不同的设备，它们需要一种统一的数据传输方式来保留文档的专业写作含义。 不管是CIA的电传打字机，盲人的TTY设备，菊花轮打印机，VIC = 20 Linus Torvalds的21x22纯文本显示器都在咬牙，而40x25显示器上当他编写第一个浏览器时，在欧洲核子研究中心(CERN)使用的是某中学的Apple II，或NeXT工作站TBL上的高端1152x864单色显示器。 其中许多设备甚至无法描绘“粗体”，“斜体”或绘制图形。 您会说为什么某些东西具有某种风格，所以用户代理(浏览器是UA，但UA并不总是浏览器)可以最好地确定如何在设备的限制范围内传达这种信息。
Nothing at all like today where everyone is using the exact same size displays in the exact same resolution, with the exact same font stacks, exact same font rendering engines, in the exact same default font-size and PPI (pixels per inch). For those of you who missed it, that was sarcasm.
完全没有像今天这样的情况，每个人都使用完全相同的分辨率，完全相同的字体堆栈，完全相同的字体呈现引擎，完全相同的默认字体大小和PPI(每英寸像素)来显示完全相同的大小。 对于那些想念它的人，这很讽刺。
HTML is the foundation of accessibility. It was created to make accessible documents. Well written HTML documents are for more than just the perfectly sighted sitting in front of a screen!!! It’s for people using screen readers (software that reads the page aloud), braille readers, TTY, print… and even search engines which — as the joke goes — don’t have eyeballs and should NOT care about your flipping style!
HTML是可访问性的基础。 创建它是为了使可访问文档。 编写良好HTML文档不仅仅用于坐在屏幕前的完美视线！！！ 适用于使用屏幕阅读器(大声读取页面的软件) ，盲文阅读器，TTY，打印…，甚至是搜索引擎的人-就像开玩笑说的-没有眼球， 不应该在乎您的翻转风格！
In fact search engines only check style for abuse — like content cloaking — and for mobile compatibility. They could really give a flying purple fish about your layout.
实际上，搜索引擎只会检查样式是否存在滥用(例如内容掩盖)和移动兼容性。 他们真的可以给您关于布局的紫色飞鱼。
那么，我们如何“使用错误”？ (So How Are We “Using It Wrong?”)
There are a variety of misconceptions and just bad practices people use when choosing their markup.
人们在选择标记时会使用各种各样的误解和不良做法。
演示性标记 (Presentational Markup)
Most of you seem to still be choosing your tags based on their default appearance, not their meaning. Again, as if HTML 3.2 was the bleeding edge of development techniques. Amusing when most of what was slopped into 3.2 from previous iterations was presentational trash that violated why HTML was created in the first place.
你们中的大多数人似乎仍然根据标签的默认外观而不是其含义来选择标签。 同样，好像HTML 3.2是开发技术的最前沿。 在以前的迭代中，大多数降级到3.2的时候都是可笑的，是表现形式的垃圾，它违反了首先创建HTML的原因。
Take H1..H6. They MEAN the start of sections and subsections. The H1 (singular) is supposed to be THE (singular) heading (singular) that all content on the site is a subsection of. And HTML 5’s “section” tag trying to change that only made matters worse. Thus the site title/logo is your most likely candidate to be wrapped in the only H1 you should have on the page. An H2 marks the start of a major subsection of the page, with the first H2 implying the start of the main content. Making the MAIN tag a pointless redundancy. An H3 marks the start of a subsection of the H2 preceding it. Making SECTION and ARTICLE both be pointless redundancies.An H4 marks the start of a subsection of the H3 before it. Care to guess what H5 and H6 mean? Even the lowly HR means “A change in topic or section where heading text is unwanted/unwarranted”.
采取H1..H6。 它们表示各节和小节的开始。 H1(单数)应该是网站上所有内容都是其子部分的THE(单数)标题(单数)。 HTML 5的“ section”标签试图进行更改，这只会使情况变得更糟。 因此，站点标题/徽标最有可能被包裹在您应该在页面上拥有的唯一 H1中。 H2标记页面主要子部分的开始，第一个H2表示主要内容的开始。 使MAIN标签成为毫无意义的冗余。 H3标志着H2前面的子部分的开始。 使SECTION和ARTICLE都没有意义的冗余。 H4标志着它前面的H3小节的开始。 猜猜H5和H6是什么意思？ 即使是较低的HR，也意味着“主题或部分的更改，其中标题文本是多余/不必要的”。
THEY DO NOT MEAN FONTS IN DIFFERENT WEIGHTS AND SIZES, OR DRAWING A LINE ACROSS THE SCREEN!!!
他们不要在不同的重量和大小上指字体，也不在屏幕上画一条线！！！
This is why you don’t skip over heading depths willy-nilly jumping down to H5 with no H4 for them to be subsections of. It’s why you don’t start your document with a H4. It’s why pairing H1 + H2 for title and tagline is ignorant garbage. And another reason the folks at the WhatWG were clearly unqualified to write HTML 4 Strict’s successor as they didn’t even seem to know what headings were for. See the “deprecated within months of the W3C accepting it as a spec” bit of halfwitted nonsense known as HGROUP.
这就是为什么您不会跳过航向深度而随意地跳到H5(没有H4)作为它们的子部分的原因。 这就是为什么您不使用H4开始文档的原因。 这就是为什么将H1 + H2配对用于标题和标语是无知的垃圾。 另外一个原因是，WhatWG的人们显然没有资格编写HTML 4 Strict的接班人，因为他们甚至都不知道标题是什么。 请参阅“在W3C接受规范后数月内已弃用”一点点废话，称为HGROUP。
Just as P is for a grammatical paragraph. Not some random floating sentence fragment, not a lone image by itself, not a LABEL and INPUT pair, not because “I want a margin around this”. Just as UL/OL are for short grammatical bullet points, not “eye wunts teh dotsie befur eet” or major sections of a page worthy of having headings. (since headings establish similar semantics. Often redundant semantics is worse than none for non-sighted UA’s)
就像P代表语法段落一样。 不是一些随机的浮句片段， 不是一个单独的图像， 不是一个LABEL和INPUT对， 不是因为“我想要在此周围留一点空白”。 就像UL / OL只是简短的语法要点一样，不是“眼花w乱”，也不是值得标题的页面主要部分。 (因为标题建立了相似的语义。对于没有视力的UA，冗余语义通常比没有语义更糟糕)
Even the lowly B/CITE/EM/I/STRONG tags have meanings separate from their default appearance. This is where the “would be” comes into play. You should not choose any of these tags just because “I want this text bold or italic”. Instead the choice should be based on WHY you want that text bold or italic.
甚至低级的B / CITE / EM / I / STRONG标签也具有与默认外观不同的含义 。 这就是“将要”发挥作用的地方。 您不应仅仅因为“我想要此文本为粗体或斜体”而选择任何这些标签。 取而代之的是，选择应该基于您为什么要使该文本为粗体或斜体。
There are grammatical reasons for choosing said tags.
选择所述标签有语法上的原因。
<em> — emphasis
<em>-重点
<strong> — with more emphasis
<strong>-更重点
<cite> — what you are citing for a quotation or supporting work
<cite>-您引用报价或支持工作的目的
<i> — when a grammatical reason for italic that CITE and EM don’t cover, such as a book title or legal document name you’re just mentioning.
<i> —当CITE和EM没有涵盖的斜体语法原因时，例如您刚刚提到的书名或法律文件名称。
<b> — same as with italic, when text would be bold for grammatical reasons such as that of a entity in a legal document.
<b>-与斜体字相同，当文本出于语法原因(例如法律文档中的实体的原因)而被加粗时。
If you cannot come up with a grammatical or structural reason for using any of the semantic tags — basically all tags that go inside BODY other than DIV, SPAN, and A — then you likely shouldn’t be using semantic tag.
如果您不能为使用任何语义标记提供语法或结构上的理由-基本上所有放入DIY，SPAN和A之外的BODY内的标记-那么您就不应该使用语义标记。
Hence the saying:
因此俗话说：
If you choose any of your semantic tags for what they look like, you are choosing all the wrong tags for all the wrong reasons.
如果根据外观选择任何语义标签，则出于所有错误原因，您选择的所有错误标签都是错误的。
Take this example a friend of mine created a decade and a half ago, that’s as relevant today as it was then.
以这个例子为例，我的一个朋友在十年半以前创建的，今天和那时一样重要。
<p>
<i>GURPS,</i> <b>Steve Jackson Games'</b> flagship role-playing game, was first released in 1985. Several licensed adaptations of other companies' games exist for the system, such as <i>GURPS Bunnies and Burrows.</i> However, <b>SJ Games</b> has no connection with <b>Wizards of the Coast</b>, producers of the <i>Dungeons and Dragons</i> RPG. <em>No <i>GURPS</i> content is open-source.</em> <strong>Do not plagiarize <b>SJ Games</b> work!</strong>
</p>Side note, the twerps out there who still parrot “always use EM and STRONG” and “B and I are deprecated” are talking out their backsides, and are in desperate need of a quadruple helping of Sierra Tango Foxtrot Uniform!
旁注，那里仍然假装“总是使用EM和STRONG”和“ B和我被弃用”的鹦鹉正在说出自己的缺点，迫切需要Sierra Tango Foxtrot Uniform的四倍帮助！
In that same way TABLE is for tabular data. They are not “evil”, they are not — in and of themselves — a “hack”. They exist for situations where the columns and rows have a semantic relationship.
同样，TABLE用于表格数据。 他们不是“邪恶的”，他们本身并不是“骇客”。 它们用于列和行具有语义关系的情况。
YES, “tables for layout” is bad. You don’t use a table just because “wah wah, eye wunts teh cullums”. At the same time you do not abuse other tags — like lists — for data that is obviously tabular in nature.
是的， “布局表”是不好的。 您不仅仅因为“哇，眼睛迷住了小伙子”而使用桌子。 同时，您不会滥用其他标签(例如列表)来处理显然属于表格形式的数据。
Said tables should also be “well formed”, which is to say organized with table headings both in a THEAD and in the TBODY with the relationship established by SCOPE or AXIS. If the table has a heading you don’t COLSPAN it, you use CAPTION. There are tags other than TR and TD that go into tables, shame most people sleazing out HTML don’t know that.
所述表还应该是“格式正确的”，也就是说，在THEAD和TBODY中都具有表标题，并由SCOPE或AXIS建立关系。 如果该表的标题不带色，请使用CAPTION。 除了TR和TD之外，还有其他标签会插入表格中，可惜大多数人都不知道HTML是什么。
Take a normal shopping cart where you’ll often see ignorant incompetent trash like:
使用普通的购物车，您经常会在这里看到无知的，不称职的垃圾桶：
<table class="cart">
<tr class="title">
<td colspan="4"><b>Shopping Cart</b></td>
</tr><tr class="headers">
<td><b>Item</b></td>
<td><b>Quantity</b></td>
<td><b>Unit Price</b></td>
<td><b>Total</b></td>
</tr><tr>
<td>Rovner Eddie Daniels II Ligature</td>
<td>1</td>
<td>21.99</td>
<td>21.99</td>
</tr><tr>
<td>Yamaha 5C Alto Sax Mouthpiece</td>
<td>1</td>
<td>28.99</td>
<td>28.99</td>
</tr><tr>
<td>Vandoren #3 Alto Sax JAVA Reeds, Box of Ten</td>
<td>2</td>
<td>32.99</td>
<td>65.98</td>
</tr><tr class="footer">
<td colspan="3" align="right"><b>Shipping</b></td>
<td>
Free<br>
<i>For orders over $50</i>
</td>
</tr><tr class="footer">
<td colspan="3" align="right"><b>Total</b></td>
<td><b>116.96</b></td>
</tr>
</table>If you see HTML like that, you’re looking at code written by people unqualified to write tables. The first TR+TD should be a CAPTION. The TR.headers should be inside a THEAD filled with TH set to SCOPE=”COL” since they describe the column. The content TR should be inside TBODY with their first TD being a TH where the SCOPE=”ROW” since they describe the row. The final two spanned TR.footer should be inside TFOOT with TH. NONE of the bold tags present should be there, and the one italic tag should be EMphasis. Even the ALIGN attributes are junk since that’s presentation, something that shouldn’t even be HTML’s flipping job. They don’t even need classes so long as the parent TABLE has one, because the semantics can be leveraged with selectors and combinators.
如果您看到这样HTML，那么您正在查看的是不具备编写表格资格的人员编写的代码。 第一个TR + TD应该是CAPTION。 TR.header应该位于THEAD内，并在THAD中填充TH，将TH设置为SCOPE =“ COL”，因为它们描述了该列。 内容TR应该在TBODY内，其第一个TD是TH，其中SCOPE =“ ROW”，因为它们描述了该行。 最后两个跨TR.footer应该在TFOOT中并带有TH。 存在的所有粗体标签均不应存在，而一个斜体标签应为强调。 自那以来，甚至ALIGN属性都是垃圾，这甚至不应该是HTML的翻转工作。 只要父表有一个类，它们甚至都不需要类，因为可以通过选择器和组合器来利用语义。
That should — for semantics and proper accessibility — go more like this:
为了语义和适当的可访问性，应该更像这样：
<table class="cart">
<caption>Shopping Cart</caption>
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Quantity</th>
<th scope="col">Unit Price</th>
<th scope="col">Total</th>
</tr>
</thead><tbody>
<tr>
<th scope="row">Rovner Eddie Daniels II Ligature</th>
<td>1</td>
<td>21.99</td>
<td>21.99</td>
</tr><tr>
<th scope="row">Yamaha 5C Alto Sax Mouthpiece</th>
<td>1</td>
<td>28.99</td>
<td>28.99</td>
</tr><tr>
<th scope="row">Vandoren #3 Alto Sax JAVA Reeds, Box of Ten</th>
<td>2</td>
<td>32.99</td>
<td>65.98</td>
</tr>
</tbody><tfoot>
<tr>
<th scope="row">
Shipping<br>
<em>Free for orders over $50</em>
</th>
<td>0</td>
</tr><tr>
<th scope="row">Total</th>
<td>116.96</td>
</tr>
</tfoot>
</table>Side note, HTML 5 now says TFOOT has to go after TBODY. I say this is a mistake that forgets why it was the other way around, but what can one expect from the WhatWG. It’s increasingly appearent they were unqualified to create 4 Strict’s successor and it was silly of the W3C to allow so accept it so readily. It often reeks of recreating the worst of 3.2 and the same mentality of “let’s document what browsers support instead of what people should be doing.” Aka the antithesis of a “specification”. For those who missed it, This italic text section would be an ASIDE from a grammatical/literary/structural viewpoint; the only viewpoint that matters for HTML as it does not mean “text off to one side”.
旁注，HTML 5现在说TFOOT 必须 追随TBODY。 我说这是一个错误，忘记了为什么会出现相反的情况，但是人们对WhatWG的期望是什么。 他们越来越不具备创造4 Strict继任者的资格，并且让W3C如此轻易接受它是愚蠢的。 它通常会冒犯最坏的3.2版本和“让文档记录浏览器支持而不是人们应该做什么”的思想。 也就是“规范”的对立面。 对于那些想念它的人，从语法/文学/结构角度看，该斜体文本部分将是一个补充。 唯一对HTML重要的观点是HTML，因为它并不意味着“文本偏向一侧”。
Anyhow, the latter example establishes all the relationships that make tables NOT suck for accessibility, and actually become useful on screen readers, braille readers, and the like. It also provides more than enough hooks for any styling you might want to apply, without pissing all over the markup by slopping classes onto everything.
无论如何，后一个示例建立了所有使表不为可访问性所吸引的关系，并且实际上在屏幕阅读器，盲文阅读器等上变得有用。 它还为您可能要应用的任何样式提供了足够多的钩子，而不会通过将类倾斜到所有内容而烦恼整个标记。
Be honest, how many of you have ACTUALLY seen tables like the second example? With full establishment of headers and scope? Using the three subsection tags of THEAD, TBODY, and TFOOT properly. How many of you were even aware of the existence of the CAPTION tag?
老实说，你们当中有多少人实际看到过像第二个例子这样的表？ 完全建立标题和范围？ 正确使用THEAD，TBODY和TFOOT的三个小节标签。 你们当中有多少人甚至知道CAPTION标签的存在？
Lacking those hooks a table is an accessibility wreck. Abusing other tags to do the same job is equally nonsensical and flipping the bird at many potential visitors.
缺少这些钩子的表是可访问性的残骸。 滥用其他标签来完成相同的工作同样是荒谬的，并在许多潜在的访客面前掀起了这只鸟。
演讲班 (Presentational Classes)
This is a blight common to all these trashy front-end frameworks that are still hot and trendy, despite clearly being made by people who have no business writing HTML or CSS, much less telling other people how to do so. Whilst I already covered this in my article about how mind-numbingly stupid front-end frameworks are — and how every single one of their claims of being “easier’ is a bald faced lie — the core principle by which they work is the problem. Using classes to say what things look like is WRONG!
尽管显然是由没有业务来编写HTML或CSS的人制作的，但告诉其他人如何做到这一点，对于所有这些仍旧流行且时髦的垃圾前端框架来说，这是一个普遍的缺陷。 尽管我已经在我的文章中讨论了有关前端框架如何令人愚蠢的愚蠢 -以及它们声称“更轻松”的每一个说法都是一个秃头的谎言-但它们工作的核心原理是问题。 用类说什么看起来是错误的！
Doing so in your markup is the same thing as all those presentational tags that were deprecated way back in ’98 in the REAL HTML 4. (aka “Strict”).
在您的标记中执行此操作与在98年前在REAL HTML 4(又称“严格”)中弃用的所有表示性标签相同。
There is little if any difference betwixt:
之间几乎没有任何区别：
<div class="w3-center w3-silver w3-xlarge">And
和
<center><font color="silver" size="+3">In mindset or mentality. In writing code that way slopping in classes for presentational reasons, you are defeating the reason tags like FONT and CENTER were deprecated, and recreating the very type of HTML writing 4 Strict was trying to stop us from doing over two decades ago.
心态或心态。 由于陈述性原因而在类中编写代码时，您要克服诸如FONT和CENTER之类的标签已被弃用的原因，并重新创建HTML编写的类型4 Strict试图阻止我们在二十多年前停止这样做。
Using classes to say what things are supposed to look like is wrong, because the entire point of CSS is to allow for multiple appearances off of one markup. The “ideal” best HTML should require little to no modification for a complete reskin, just make a new stylesheet. It should allow you to have multiple stylesheets for different media devices — such as print, projection, aural, etc. What are you going to do? Have something where class=”text-red” but on another skin it’s blue?
用类来表示应该看起来是错误的，因为CSS的全部目的是允许一个标记具有多个外观。 “理想”的最佳HTML几乎不需要修改即可获得完整的Reskin，只需制作一个新的样式表即可。 它应该允许您为不同的媒体设备(例如打印，投影，听觉等)使用多个样式表。您将要做什么？ 在class =“ text-red”处有东西，但在另一皮肤上是蓝色？
This is even more of an issue when you start implementing more modern concepts like day/night toggles.
当您开始实施更现代的概念(如日/夜切换)时，这甚至是一个问题。
Your HTML is for saying what things are, would be, or why they MIGHT receive a style. This should be extended to classes and ID’s hence if you use presentational classes, or are about to start defending them in reply to this article… PLEASE — for the love of whatever fairy tale magical man in the sky you subscribe to — just admit defeat and go back to writing HTML 3.2. Your head is clearly so far up the mid to late 1990’s backside we need to call an orthodontist to handle the extraction.
您HTML用来说明事物是什么，将会是什么，或者它们为什么可能会收到样式。 这应该扩展到类和ID，因此，如果您使用表示性类，或者准备开始为它们辩护以回应本文，请…为了您喜欢的天空中童话般的魔术师的热爱，请承认失败并回到编写HTML 3.2。 您的头部显然已经到了1990年代中期的后期，我们需要打电话给牙齿矫正医生来进行拔牙。
无休止的毫无意义的课程和DIV (Endless Pointless Classes and DIV for Nothing)
This goes hand in hand with our previous section, in that there’s a lot of lies, bad practices, and just plain ignorance resulting in bloated non-semantic codebases with broken accessibility.
这与我们前面的部分相结合，因为存在很多谎言，不良做法以及无知的无知，导致膨胀的非语义代码库和可访问性遭到破坏。
Don’t go slopping in DIV you don’t need. At least try and style your existing tags first. If you’re not using tables anymore for a section — like a image gallery — STOP putting DIV in to divide things into rows, let inline-block / float wrapping or flex-wrap:wrap; take care of making your rows. Don’t add empty span in situations where generated content can do the same job. Yes bootcrap with your stupid way of drawing a hamburger icon, I’m looking at you.
不要随意使用不需要的DIV。 至少首先尝试对现有标签进行样式设置。 如果您不再在某个部分使用表格(例如图片库)，请停止放入DIV以将行划分为几行，请使用inline-block / float环绕或flex-wrap：wrap; 整理行。 在生成的内容可以完成相同工作的情况下，请勿添加空跨度。 是的，用您愚蠢的方式绘制汉堡包图标的方法，我在看着您。
The same goes for classes. Right now there’s this BALD FACED LIE being spread around — even flipping Google seems to believe it now — that throwing classes at every joe-blasted element is magically “Faster” at “rendering” a page than using selectors.
类也一样。 现在，到处散播着这种BALD FACED LIE (甚至现在翻转Google似乎也相信)，在每个“ joe-blasted”元素上抛出类比“使用选择器”在魔术地“渲染”页面上更“神奇”。
What makes this a lie is the more classes you have, the bigger the list of classes and elements with classes the browser has to maintain. The bigger the markup making the page take longer to load the code, making the server work harder to serve said code, AND making the parser take longer.
撒谎的是您拥有的类越多，浏览器必须维护的类和带有类的元素列表就越大。 标记越大，使页面花费更长的时间来加载代码，使服务器越难工作以提供所述代码，并使解析器花费的时间更长。
Hence why nonsense like BEM and throwing classes at everything is not the answer. At BEST on any real website it’s a wash.
因此，为什么像BEM这样的废话和在所有地方抛出类并不是答案。 在任何真实网站上的BEST中，它都是洗脸。
And really when a 486/66 with 8 megs of RAM running IE 5 under Win 3.x could handle it, complaining that tag selectors and combinators are “slow” in CSS is a BS claim in the age of multi-ghz multi-core handhelds. Laughably the same lame excuse and unfounded claim the “tables are evil and should never be used” whackjobs spew.
实际上，当在Win 3.x下运行IE 5并具有8兆RAM的486/66可以处理它时，抱怨标签选择器和组合器在CSS中“慢”是BS声称在多GHz多核时代掌上电脑。 可笑的是，同样la脚的借口和毫无根据的主张“桌子是邪恶的，永远不应该使用”。
完美风暴 (The Perfect S***storm)
A great example of “all of the above” abuse/misuse of HTML can be found in pretty much EVERY codebase that uses Bootstrap… or as some of us call it, “Bootcrap”
的“上述所有”一个很好的例子滥用/ HTML的误用，可以在几乎每一个代码库中发现，使用引导......或者我们中的一些称呼它，“Bootcrap”
It is knee deep in manure-shoveling bad practices, and as I’ve said for over a decade now the only thing you can learn from bootstrap is how NOT to create websites.
在铲除粪便的不良做法中，我深陷其中。正如我十多年来说的那样，您可以从引导中学到的唯一一件事就是如何不创建网站。
NOT to single out Boostrap since such failings can be found in every HTML/CSS framework. Tailwind, w3.css, etc, etc. They’re all little more than mental midgetry that are only popular through propaganda, predatory practices, and wishful thinking.
不要单挑Boostrap，因为这样的失败会在每个HTML / CSS框架中发现。 Tailwind，w3.css等，它们全都不过是精神上的小东西，它们只能通过宣传，掠夺性实践和一厢情愿的方式而流行。
Take something simple, like their “pricing” example:
举个简单的例子，例如“定价”示例：
https://getbootstrap.com/docs/4.5/examples/pricing/
https://getbootstrap.com/docs/4.5/examples/pricing/
And you’ll find such gems of ineptitude as:
而且您会发现这样的无用宝石：
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<h1 class="display-4">Pricing</h1>
<p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
</div><div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Free</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>10 users included</li>
<li>2 GB of storage</li>
<li>Email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
</div>
</div>Christmas on a cracker, what a ****-show. Endless pointless div for nothing, endless pointless classes for nothing, complete nonsensical gibberish use of numbered headings, button for what should probably be an anchor since it’s not a form nor should that be JavaScript’s flipping job.
圣诞节在饼干上，真是个秀。 无休止的div，无休止的div，无休止的无休止的类，对编号的标题的完全荒谬的胡言乱语的使用，可能不是锚的按钮，因为它不是形式，也不应该是JavaScript的翻转工作。
The first four DIV are doing the job of just one tag, the sections are being started by a H4 which is semantic gibverish, as is the use of an H1 as structural sibling to it. You’ve got perfectly good container classes, so why are they dumping classes on the headings, list, and button? It is — again — painfully apparent that the people who created and maintain bootstrap are unqualified to write a single blasted line of HTML or CSS.
前四个 DIV只能完成一个标签的工作，这些部分是由H4开始的，这是语义上的废话，就像使用H1作为其结构同级一样。 您已经拥有了非常好的容器类，那么为什么它们将类转储到标题，列表和按钮上呢？ 同样，很痛苦的是，创建和维护引导程序的人员没有资格编写HTML或CSS的单行代码。
It’s a train wreck laundry list of how NOT to build a website! All doing the job of:
它是如何不建立一个网站一个火车失事箩筐！ 所有人都在做以下工作：
<section id="pricing">
<h2>Pricing</h2>
<p>
Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.
</p>
<div class="cards">
<section>
<h2>Free</h2>
<ul>
<li><strong>$0 <span>/mo</span></strong></li>
<li>10 users included</li>
<li>2 GB of storage</li>
<li>Email support</li>
<li>Help center access</li>
</ul>
<a href="#">Sign Up For Free</a>
</section>Proper flipping semantics and less code. But sure, tell me again how much “easier” frameworks like Bootstrap are to work with. To be brutally frank if you hold that opinion, you don’t know enough HTML or CSS to be building websites, much less choosing a framework.
正确的翻转语义和更少的代码。 但是可以肯定的是，再次告诉我要使用多少“更轻松”的框架(如Bootstrap)。 坦率地说，如果您持这种观点，则您不了解足够HTML或CSS来构建网站，更不用说选择框架了。
The lack of proper semantics used in their examples and by everyone who follows that lead basically tells users with accessibility needs to go plow themselves. It makes the HTML harder to work with, makes the server have to work harder to build said HTML, and in most cases — as I proved when I rewrote the “Album” Example — you end up writing as much if not more code than you’d have without the framework.
在示例中以及跟随该示例的每个人所使用的语义都缺乏适当的含义，基本上告诉具有可访问性的用户需要自己耕种。 它使HTML更加难以使用，使服务器不得不更加努力地构建所说HTML，并且在大多数情况下( 正如我重写“相册”示例时所证明的那样)，最终编写的代码甚至比编写的代码还要多没有框架。
How is writing as much if not more code “easier”? It isn’t.
如何编写更多甚至更轻松的代码 ？ 不是。
The people who say these things are “easier” or “better for collaboration” simply need to shut their yap and learn just how wrong they are. It’s a 100% fiction made by people screaming “wah wah, eye dunz wunna lurn HTML”. Typically the same people claiming HTML is “easy” and “not a real programming language”.
那些说这些事情“更轻松”或“更好合作”的人只需要闭嘴，了解他们的错误。 这是人们大喊“哇哇，邓恩·乌纳·鲁恩HTML”的小说。 通常，同一个人声称HTML是“简单”的“不是真正的编程语言”。
If it’s so blasted easy, why can’t they be bothered to learn its rules and use it properly?!? Seriously those who parrot those two claims most are typically those who couldn’t write proper HTML if their life depended on it.
如果这么简单，为什么他们不麻烦他们学习规则并正确使用它呢？！ 认真地讲，最不赞成这两个主张的人通常是那些不能依靠自己的生活编写正确HTML的人。
为什么这一切都那么糟糕？ (Why Is All This So Bad?)
For starters it ignores a concept known as “separation of presentation from content”. Separation of concerns is always good practice in programming, but with HTML and CSS it pays dividends in places many don’t consider.
对于初学者来说，它忽略了一个称为“演示与内容分离”的概念。 关注点分离始终是编程中的好习惯，但是使用HTML和CSS可以在很多人不考虑的地方获益。
就像缓存。 (Like Caching.)
HTML is typically cached less — if at all —client-side because content can change. The more frequently a site is updated the more true this is. If you move style into the markup — like for that equally dumbass “lie” about moving “above the fold style” into your HTML — its less likely to be cached. That’s why nearly 100% of the time you see a <style> tag and 99% of the time you see style=””, you’re looking at developer stupidity.
通常，HTML缓存在客户端的缓存更少(如果有的话)，因为内容可以更改。 网站更新的频率越高，它就越真实。 如果将样式移动到标记中(例如，对于将“折叠样式之上”移动到HTML中同样愚蠢的“谎言”)，则缓存的可能性较小。 这就是为什么几乎100％的时间您看到<style>标记，而99％的时间您看到style =””的原因，您却看到了开发人员的愚蠢。
CSS is far easier to cache, so the more you can move into the CSS out of the markup, the faster the load, parse, and render. This can also be leveraged across multiple pages if you use a monolithic stylesheet per media type. (what goes in your media=”” on the LINK tag, If you omit that attribute or set it to media=”all”, you ***ed up). How does that help? You can pre-cache the appearance of subpages! For a small sacrifice of bandwidth on first-load, you can make every other page people visit on your site load and render faster!
CSS缓存起来要容易得多，因此，您可以从标记中移入CSS的次数越多，加载，解析和渲染的速度就越快。 如果您对每种媒体类型使用整体式样式表，那么也可以在多个页面上利用此功能。 (您的media =””在LINK标签上显示的内容，如果忽略该属性或将其设置为media =“ all”，则表示已注册)。 有什么帮助？ 您可以预缓存子页面的外观！ 为了在首次加载时牺牲一点带宽，您可以使人们在您的网站加载时访问的所有其他页面并更快地渲染！
So fast in fact, that it often rivals SPA’s and other JS trickery. On my own sites I often get people asking “where’s the scripting to hide the loads” because subpages only have to send the minimalist markup!
事实上，它是如此之快，以至于可以与SPA和其他JS骗术相媲美。 在我自己的站点上，我经常会引起人们问“隐藏负载的脚本在哪里”，因为子页面只需要发送最低限度的标记即可！
…或可访问性 (… or Accessibility)
Again, bad/broken/just outright garbage non-semantic markup is for all intents and purposes flipping the bird at people who aren’t perfectly sighted sitting there looking at a screen. This is the Internet, the only thing we as web developers can know for certain is that we do not know who is going to visit our sites and on what type of user-agent!
同样，出于所有意图和目的，坏/残破/完全是垃圾的非语义标记将鸟翻转给那些看不到屏幕的人。 这是Internet，作为Web开发人员，我们唯一可以确定的是，我们不知道谁将访问我们的网站以及哪种类型的用户代理！
Don’t be the type of dirtbag who bitches about their business having to pay for a handicap ramp, parks in handicap spaces when perfectly able just to avoid walking five feet, or saying things like “why should the blind be allowed to use the Internet?” (actual quote from someone I recently got fired from their job at an “alphabet soup” Federal Agency.)
别是那种会为自己的业务付费的残障人士，因为他们不得不支付障碍通道的费用，在完全能够避免步行五英尺的时候停在障碍空间中，或者说“为什么要让盲人使用互联网”这样的话题？” (实际引述为我最近在一家“字母汤”联邦机构被解雇的人的说法。)
Especially now that legal compliance under laws like the US ADA or UK EQA now no longer apply to just public utilities, medical, banking, and government. Thanks to the US Supreme Court refusing to hear and overturn the Domino’s case, it’s open season on retail websites for accessibility lawsuits.
尤其是现在，美国ADA或英国EQA等法律所规定的法律合规性不再仅适用于公用事业，医疗，银行和政府。 由于美国最高法院拒绝审理并推翻多米诺骨牌案，多米诺骨牌零售网站正处于开放季节，以应对无障碍诉讼。
…或搜索引擎优化 (… or Search Engine Optimization)
It too reaps the benefits of semantic markup since search engines don’t have eyes. A proper document structure helps them digest the page which is why headings often rank better than other text. The trick is to not abuse that by choosing your heading depths willy-nilly as that’s more likely to get you pimp-slapped for abuse than up-ranked.
由于搜索引擎没有眼睛，它也可以从语义标记中受益。 适当的文档结构可帮助他们消化页面，这就是标题通常比其他文本排名更好的原因。 诀窍是不要随意选择前进方向的深度，因为这样做更可能使您被皮条客打架而不是排名靠前。
In fact, well written well structured semantic markup will beat hands-down the sleazy, broken, gibberish tricks your alleged “SEO Expert” snake oil peddlers will try to spoon-feed you.
事实上，写得好，结构合理的语义标记将击败那些所谓的“ SEO专家”蛇油小贩试图用勺子喂食的卑鄙，折断，胡言乱语的技巧。
Particularly in the long-term where the sleazy tricks that work today are what Google and other engines put the kabosh on tomorrow. This is why your typical SEO obsessed nutter will run around like a chicken with their head cut off every time there’s an algorithm update, whilst developers like myself sit back with the popcorn, pointing and laughing at the fools.
尤其是从长远来看，今天有效的s俩是Google和其他引擎将明日之秀付诸东流的。 这就是为什么每次进行算法更新时，典型的SEO痴迷的小动物都会像鸡一样四处跑动，而像我这样的开发人员坐在爆米花旁，指着傻瓜嘲笑。
Part of why I’ve not had a website negatively impacted on its traffic by a algo update in near-on 14 years. You pull the sleazy tricks, expect the search engines to deliver a back-hand at best, a can of draino down your throat at worst.
为什么我在14年内就没有通过算法更新对网站的流量造成负面影响的部分原因。 您会花一些lea琐的技巧，期望搜索引擎最多能提供帮助，最坏的情况下可以让您一口干掉。
It all goes back to something Matt Cutts told us a decade and a half ago, when he was heading up Google’s Anti-abuse division.
这一切都可以追溯到十年半前马特·卡茨(Matt Cutts)告诉我们的时候，当时他正领导Google的反滥用部门。
Write for the user, not the search engine.
为用户而不是搜索引擎写信。
And writing for the user means ALL users, not just — again — the perfectly sighted sitting at a screen.
为用户编写文字意味着所有用户，而不仅仅是-再一次-完美的坐在屏幕上。
In terms of on-page optimization the two most important factors are:
就页面优化而言，两个最重要的因素是：
- Unique well written content of value 独特的书面价值内容
Semantic markup to give user-agents — like search engines — better clues as to what the content IS.
语义标记可以为用户代理(例如搜索引擎)提供有关内容是什么的更好的线索。
Most of the time you hear SEO experts flapping their yaps about much of anything-else on-page, they’re full of more manure than Biff Tannen’s ’48 Ford Super De Luxe.
大多数时候，您会听到SEO专家对页面上的许多其他内容不屑一顾，他们比Biff Tannen的'48 Ford Super De Luxe拥有更多的粪便。
您不是在夸大HTML的重要性吗？ (Aren’t you exaggerating HTML’s importance?)
Oh I get this one all the time from the know nothings. No. It exists for a reason, in many industries there are legal ramifications if you ignore those reasons. It has rules. It’s based on professional writing norms. Failing to follow it can alienate potential users, result in harder to maintain code, negatively impact your search rankings, and on the whole is a good chunk of why so many websites fail in their first year.
哦，我从无知到无时无刻都得到这个。 否。它的存在是有原因的，如果您忽略这些原因，在许多行业中都有法律后果。 它有规则。 它基于专业写作规范。 不遵循它会疏远潜在用户，导致难以维护代码，对您的搜索排名产生负面影响，总的来说，这就是为什么这么多网站在第一年失败的原因。
People look for the sleazy shortcuts and blindly copypasta bad code because they think they’re too stupid to learn it. They think it’s harder than it is, sending them diving for anything that says “easy” no matter how big a lie that is.
人们寻找缓慢的快捷方式，盲目地复制糟糕的代码，因为他们认为自己太愚蠢而无法学习它。 他们认为这比现在更难，无论谎言有多大，他们都会潜入任何说“轻松”的事物。
The propaganda of things like frameworks say that their way is “Easy” implying the alternatives are “hard”. They tell you that cross-browser development is hard, and you believe it. They use all sorts of glittering generalities to try and sucker you into thinking you’re too stupid to do it without their help, or that it would “take you too long” without their dimestore hoodoo.
诸如框架之类的东西的宣传说，它们的方式“容易”，这意味着替代方案是“艰难的”。 他们告诉您跨浏览器的开发很困难，您相信它。 他们使用各种闪闪发光的概括性方法，试图让您误以为您在没有他们帮助的情况下太愚蠢了，或者认为如果没有他们的dimestore hoodoo，这将“花费您太多时间”。
You know what? I don’t believe that about you. Yes, YOU. The person reading this right now. I actually think you’re smart enough to learn all this. And if you learn to use HTML — and by extension CSS — properly, you’ll see how what most of this industry is saying about web development amounts to little more than 100% pants on fire.
你知道吗？ 我不相信你 是的，就是你。 立即阅读此内容的人。 我实际上认为您足够聪明，可以学习所有这一切。 并且，如果您学会了正确使用HTML(以及扩展名为CSS)的用法，您将看到该行业大多数人对Web开发的评价仅相当于100％的火上浇油。
HTML is the bedrock, your foundation. Without it we wouldn’t have a web, and used improperly you have a house of cards. The way most people use HTML is like making a foundation for a two level home out of cyclopean stonework without a binder, and without testing the ground beneath it for density or water content. Don’t be surprise if when the wind blows it falls over, and then it rains resulting in the whole thing being sucked into a sinkhole.
HTML是基础，您的基础。 没有它，我们就不会有网络，使用不当就会有纸牌屋。 大多数人使用HTML的方式就像在没有粘合剂的情况下用独眼巨人的石工为两层房屋打基础，并且不测试其下方地面的密度或含水量。 如果风吹起而落下，然后下雨导致整个物体被吸入下水道，请不要感到惊讶。
结论 (Conclusion)
There are clear reasons HTML has the tags it does, and is based on structural rules common to writing norms that — at least in America — was covered by at least the fifth grade in the early ‘80’s. I imagine by now that’s college level electives… These rules and guides an the entire point of HTML is to be as accessible to as many users as possible, and anything you do — through ignorance or willful addle-minded obtusity — to interfere with that means you simply have failed to divine the purpose of HTML.
HTML具有标签的理由很明显，并且基于编写规范的通用结构规则(至少在美国)，该规范至少在80年代初被五年级所涵盖。 我想现在是大学级别的选修课...这些规则和指南将使HTML的整个观点尽可能地为尽可能多的用户所用，而您所做的任何事情-通过无知或故意的愚蠢行为-都会干扰这种方式您只是无法了解HTML的目的。
STOP choosing your tags based on default appearance. STOP using tags for things they don’t mean. STOP using classes to replicate HTML 3.2 style idiocy… and Christmas on a cracker learn how to use HTML properly with good practices, such as progressive enhancement, separation of concerns, and all the other things you’re supposed to be doing with it.
停止根据默认外观选择标签。 停止将标签用于不重要的内容。 停止使用类来复制HTML 3.2样式惯用语……在饼干上度过圣诞节，并学习如何通过良好的实践正确使用HTML，例如逐步增强功能，关注点分离以及您应该使用的所有其他功能。
Otherwise you’re doing yourself, your sites, and your visitors a disservice.
否则，您在做自己，对您的网站和对访客的访问都会造成损害。
翻译自: https://medium.com/@deathshadow/news-flash-youve-probably-been-using-html-wrong-2dfb62755280
科技类新闻快讯
1028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
