HTML Explained in 123 Tweets: The Google #htmltuesday Archive

Published on January 21, 2014 (↻ February 5, 2024), filed under (RSS feed for all categories).

This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.

Did you know that Google’s Webmaster Team tweeted short statements about all HTML elements, every week, for two and a half years? It was called “#htmltuesday” and ran from 2011 to 2013. Whether you followed or missed it, all of these tweets are now available in one single place: here. Welcome to a little roller-coaster ride through all of HTML.

Google Web Studio on Twitter.

Figure: They’re the ones who make things happen.

HTML in 123 Tweets

  1. <applet> element. Hello World. Good to use in the Golden Days. Not preferred to be seen with today. #htmltuesday—2011-07-19
  2. <b>, also see: not <strong>. Flexes its muscles after HTML 5 gave it new meaning: http://goo.gl/862Os. #htmltuesday—2011-07-26
  3. <acronym>. Prime use: debating when to prefer over <abbr>. Will we miss it? #htmltuesday—2011-08-02
  4. <link>: media-independent, reflects relationships. Popular: served with rel=stylesheet, http://goo.gl/rLQTa. #htmltuesday—2011-08-09
  5. From <small> text to <small> print: an element that got repurposed with HTML 5. #htmltuesday—2011-08-16
  6. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. One might want to use <h7> headings too but that’s not how it works. #htmltuesday—2011-08-23
  7. <basefont>. HTML 4 and below and a base font. Beautiful: <basefont face=arial color=black size=2>. Use CSS. #htmltuesday—2011-08-30
  8. <hgroup>, new with HTML 5. Section heading “to group a set of h1–h6 elements.” Occasionally disputed. #htmltuesday—2011-09-06
  9. <label>: one of the most important HTML elements for accessibility (and usability). Label form elements. #htmltuesday—2011-09-13
  10. <blockquote>: “the blockquote element represents a section that is quoted from another source.” Copy that. #htmltuesday—2011-09-20
  11. <iframe> element, the “inline subwindow.” We are tired of adding @frameborder for popular browsers. #htmltuesday—2011-09-27
  12. <xmp>: example section. Part of HTML until HTML 3.2. Who has actually used it? We didn’t. #htmltuesday—2011-10-04
  13. <head>. Key ingredient of HTML documents. One of the most popular elements, http://goo.gl/weKKV. #htmltuesday—2011-10-11
  14. <dd>. Definition description. Used with <dl> and <dt>. No markup for dialogs though: http://goo.gl/9EePd. #htmltuesday—2011-10-18
  15. <caption>, for a table. We get the idea it’s not used often enough. #htmltuesday—2011-10-25
  16. From the most popular to the most feared HTML element: <font>. The Dillinger of HTML. #htmltuesday—2011-11-01
  17. Frames—or <noframes>, “displayed only by [UAs] that do not support frames.” Supported but gone with HTML 5. #htmltuesday—2011-11-08
  18. <tt>. Teletype text style. We like to get to know everyone who uses this element. #htmltuesday—2011-11-15
  19. <style> element: not always welcome from a maintenance standpoint but can be useful for performance reasons. #htmltuesday—2011-11-22
  20. <br>rrrr. Most of the time, what authors really mean is a new paragraph. #htmltuesday—2011-11-29
  21. <dfn> for the “defining instance of the enclosed term” (HTML 4 language). Is this clear? Do you use it? #htmltuesday—2011-12-06
  22. <kbd>: one of the few elements present in every HTML spec. Not used very frequently. #htmltuesday—2011-12-13
  23. HTML 5 allows <details> to be shared when @open is set, otherwise to just display a <summary>. #htmltuesday—2011-12-20
  24. <figcaption>. We don’t quite get it either and want <divcaption> too: http://goo.gl/pycni. #htmltuesday—2011-12-27
  25. <nav>, navigation section: can hold more than just lists of links. We’ve been waiting for this. #htmltuesday—2012-01-03
  26. <isindex>. More elements in one than <input type=file>: http://goo.gl/gXzWs. Deprecated though. #htmltuesday—2012-01-10
  27. <meter>. HTML 5 says: “a scalar measurement within a known range, or a fractional value.” But != <progress>. #htmltuesday—2012-01-17
  28. <q>, inline quotation. A bit of confusion around this which HTML 5 tries to resolve: http://goo.gl/iX8GF. #htmltuesday—2012-01-24
  29. We love the <object> element, the all-purpose element to embed external resources. #htmltuesday—2012-01-31
  30. <div>itis. n. Chronic lack of meaning on web pages that grew up between 2000 and 2015. #htmltuesday—2012-02-07
  31. <sub>script. We’d need more than 140 chars to explain too: see Wikipedia on subscript, http://goo.gl/0KObb. #htmltuesday—2012-02-14
  32. <embed>. How hard did we work around validation issues in the past. Now part of HTML 5. #htmltuesday—2012-02-21
  33. <footer>: new HTML element that may appear in more than one place in a document, http://goo.gl/T5vLp. #htmltuesday—2012-02-28
  34. <bdi>: one of HTML’s last additions; text “isolated […] for the purposes of bidirectional text formatting.” #htmltuesday—2012-03-06
  35. <command> for user-invokable commands. Best used with <menu>. http://goo.gl/4AMya. #htmltuesday—2012-03-13) [meanwhile, the command element had been kicked out of HTML 5]
  36. <i>, at first presentational, in HTML 5 “text in an alternate voice or mood.” We’re in an alternative mood. #htmltuesday—2012-03-20
  37. <section>. Generic sectioning element introduced by HTML 5. Can be part of an <article>. #htmltuesday—2012-03-27
  38. <form>: we like the idea of “form ownership” http://goo.gl/v0kbB as well as other Web Forms byproducts. #htmltuesday—2012-04-03
  39. <a> as in anchor element. Cornerstone of the Web. We love it. #htmltuesday—2012-04-10
  40. <frame>. From everybody’s darling to persona non grata in what felt like 20 years. #htmltuesday—2012-04-17
  41. <select> (your <option>s). So compact, it’s both curse (usability) and blessing (screen real estate). #htmltuesday—2012-04-24
  42. <tbody>, table body. Probably the element whose entirely optional tags are inadvertently omitted the most. #htmltuesday—2012-05-01
  43. <progress>. New in HTML 5, to “represent the completion progress of a task.” We guess its status is 100%. #htmltuesday—2012-05-08
  44. <area>. Client-side image map. Outdated and complicated way to make parts of an image clickable. #htmltuesday—2012-05-15
  45. <code>. Rarely observed to be used the wrong way. #htmltuesday—2012-05-22
  46. Does <video> do away with <object>/<embed> craziness? We don’t know (when) but are excited. #htmltuesday—2012-05-29
  47. <aside> element, also brought by HTML 5. Should be thought of as a sidebar. #htmltuesday—2012-06-12
  48. <td>, table data cell. Part of the very powerful family of table elements. We’ve seen it in a lot of places. #htmltuesday—2012-06-19
  49. <meta> data. Most common uses: encoding, page keywords, description. #htmltuesday—2012-06-26
  50. <dl> for definition lists: one of the elements part of every spec. Not for dialogs: http://goo.gl/4kbLS. #htmltuesday—2012-07-03
  51. Big messages require <big> elements. Not part of HTML 5 but we already learned to use CSS for special FX. #htmltuesday—2012-07-10
  52. <address> element: for contact information. Who did not use it the wrong way at one point or another? #htmltuesday—2012-07-17
  53. <figure>: not just that but any flow content worth showcasing. Goes well with <figcaption>s. #htmltuesday—2012-07-24
  54. <datalist>. We learned about it in the Web Forms drafts and are looking forward to seeing it in the wild. #htmltuesday—2012-08-07
  55. <sup>. Superscript™. #htmltuesday—2012-08-14
  56. <title>. One of the most important elements: makes “<!doctype html><title> </title>” the shortest valid doc. #htmltuesday [example corrected—HTML since requires the title element to be non-empty]—2012-08-21
  57. <menu>, another list-like element. Never part of XHTML, always part of HTML. We understand. #htmltuesday—2012-08-28
  58. The <source> element: new with HTML 5. Works with media elements to define “alternative media resources.” #htmltuesday—2012-09-04
  59. <del>. Deleted text. Also see → <ins>. #htmltuesday—2012-09-11
  60. <wbr>. A line break opportunity. We like the tweet opportunity: #htmltuesday—2012-09-18
  61. <dt>, definition term. Likes company: does not leave home without <dl> and <dd>. #htmltuesday—2012-09-25
  62. <header> element: another new way to structure documents, for “introductory or navigational aids.” #htmltuesday—2012-10-02
  63. <audio>, as in: almost <video>. An easy way to embed audio contents in documents. So it sounds. #htmltuesday—2012-10-09
  64. <optgroup> to group <options> and put a nice label on them. Somehow not that popular. #htmltuesday—2012-10-16
  65. <img> for images: one of the most popular and possibly important elements. Always define @alt. #htmltuesday—2012-10-23
  66. <em> as in emphasis. Slightly less frequently used for styling than <i>: italics for the things that matter. #htmltuesday—2012-10-30
  67. <th>, short for “table header [cell].” Should be used more often: some tables only consist of <td> elements. #htmltuesday—2012-11-06
  68. <html>. The mother of all HTML elements and yet its tags are optional (in text/html). #htmltuesday—2012-11-13
  69. <var>iables: included in all HTML specifications. Not a very popular element though. #htmltuesday—2012-11-20
  70. <article>: “a self-contained composition that is independently distributable or reusable,” per spec. Oh. #htmltuesday—2012-11-27
  71. <cite> for “the title of a work”—but not “[a] person’s name.” #htmltuesday—2012-12-04
  72. <u> for underlined text. Deprecated for ages: Use CSS instead and only ever on links. #htmltuesday—2012-12-11
  73. <input> for times in which we don’t find a listener. No doubt one of the most important elements. #htmltuesday—2012-12-18
  74. <output> element. We remember an old Web Forms 2 example: <input> * <input> = <output>. That explained. #htmltuesday—2013-01-08
  75. <p>, the paragraph. Per the HTML 5 spec, “a block of text with one or more sentences.” One or more. #htmltuesday—2013-01-15
  76. <frameset>. Meh. #htmltuesday—2013-01-22
  77. <table>. For tabular data not layouts but everyone’s with this by now. #htmltuesday—2013-01-29
  78. <base>. Document base URL and target. Particularly useful for testing 3rd party code. Special value you see? #htmltuesday—2013-02-05
  79. <hr> for horizontal rule: not quite a fancy element and also not one easily, consistently to style. #htmltuesday—2013-02-12
  80. <track> for text tracks of media elements like <video>. Types defined via @kind (subtitles, captions, etc). #htmltuesday—2013-02-19
  81. <bdo> for bidi override. Things are getting complicated from here. #htmltuesday—2013-02-26
  82. <strike>-through text style again. Part of HTML 2, 3, and 4. Not more welcome than <s>. #htmltuesday—2013-03-05
  83. <param>: element to set parameters for <object>. Not representing anything on its own per HTML 5 spec. #htmltuesday—2013-03-12
  84. <ruby> markup: http://w3.org/TR/ruby/. We know it from XHTML but it took HTML 5 to show it to all of us. #htmltuesday—2013-03-19
  85. <plaintext>: an HTML element from the past, gone after HTML 3.2. Have you ever used it? #htmltuesday—2013-03-26
  86. <script> element: <script src=foo></script> preferred over <script>foo();</script> for maintenance reasons. #htmltuesday—2013-04-02
  87. <colgroup> for column groups. We know: HTML picks names to be descriptive, then short when used frequently. #htmltuesday—2013-04-09
  88. <li> for list item. HTML founding member. We like <li>s! #htmltuesday—2013-04-16
  89. Script—or <noscript>. Often crucial to make contents accessible to users who disable scripting. #htmltuesday—2013-04-23
  90. <time>. Like <time>2011-11-12T14:54:39</time>. More examples: http://goo.gl/nKDMZ. #htmltuesday—2013-04-30
  91. For more input use <textarea>. #htmltuesday—2013-05-07
  92. <data> for “data with machine-readable equivalent.” Almost substitute for <time>, then addition to HTML 5. #htmltuesday—2013-05-14
  93. <dir>, “directory list.” Part of HTML until 4.01. Deprecated for a long, long time. #htmltuesday—2013-05-21
  94. <pre>formatted text. Mostly remembered as the element that respects whitespace and line breaks. #htmltuesday—2013-05-28
  95. <center>. Equivalent to <div align=center>. We can’t tell which is worse. #htmltuesday—2013-06-04
  96. <samp>: “(sample) output from a program or computing system.” With HTML for a long time but used rarely. #htmltuesday—2013-06-11
  97. <thead> for table headers: when used, likely (but not necessarily) a proud parent of a few <th> elements. #htmltuesday—2013-06-18
  98. <body>. Optional but so vital, containing everything we, or a document, needs. What would we do without it. #htmltuesday—2013-06-25
  99. <main>. Formerly covered by <body>. We’re not sure it’s needed. One of the newest elements. #htmltuesday—2013-07-02
  100. <rp>: part of ruby markup in HTML 5, XHTML 1.1, XHTML 2.0. Parentheses for fallback. #htmltuesday—2013-07-09
  101. <strong>(er) emphasis (HTML 4), importance (HTML 5). Not a <b> replacement. #htmltuesday—2013-07-16
  102. <listing>. HTML element, gone after HTML 3.2. We don’t even want to know. #htmltuesday—2013-07-23
  103. <canvas>, one of THE features HTML 5 brought to us. Including issues: we listened in accessibility debates. #htmltuesday—2013-07-30
  104. <button>. More content and styling flexibility than <input type=submit>. No? #htmltuesday—2013-08-06
  105. <ol>, ordered list. Best served with chilled <li> elements. #htmltuesday—2013-08-13
  106. <s>trike-through text style. Deprecated. Presentational. Not invited to HTML documents anymore. #htmltuesday—2013-08-20
  107. <map> element for client-side image map: much nicer to do via CSS, see e.g. http://goo.gl/sC3oB. #htmltuesday—2013-08-27
  108. <span>. Such an exciting element that we prefer to talk about the weather. #htmltuesday—2013-09-03
  109. <option>: form element. Not much excitement here. #htmltuesday—2013-09-10
  110. <col>, <colgroup>’s playmate, an element to mark up table columns. We’ve seen more popular ones. #htmltuesday—2013-09-17
  111. <keygen> for “key pair generator control.” We remember controversy, and aren’t really convinced yet. #htmltuesday—2013-09-24
  112. <tr>. Table row. Exciting. #htmltuesday—2013-10-01
  113. <ul>, for “unordered list.” We do bet that it hosts more <li> elements world-wide than its <ol> counterpart. #htmltuesday—2013-10-08
  114. <fieldset> to group form elements. Helps accessibility. #htmltuesday—2013-10-15
  115. <abbr title="Abbreviation">abbr.</abbr> #htmltuesday—2013-10-22
  116. <rt>, ruby markup for ruby text. Please see us again next week. #htmltuesday—2013-10-29
  117. <tfoot>, another member of the table markup clan. We are not afraid. #htmltuesday—2013-11-05
  118. <ins>. Inserted text. Also see → <del>. #htmltuesday—2013-11-12
  119. <mark>, HTML 5, to mark e.g. text that has been searched for or text in a quote, when calling something out. #htmltuesday—2013-11-19
  120. <summary>, for any <details>. New with HTML 5. #htmltuesday—2013-11-26
  121. <legend>: this HTML element wishes it was but it’s not as popular as it’s important within <fieldset>s. #htmltuesday—2013-12-03
  122. <template> to clone and insert HTML fragments. Hi Web Components. #htmltuesday—2013-12-10
  123. <dialog>, for “a part of an [app] a user interacts with,” like a dialog box. This was the last #htmltuesday! Thanks for flying with us!—2013-12-17

The Back-Story

In the May of 2011, the small “Education & Outreach” group of Google’s Web Studio (back then the Webmaster Team) were debating how to add more value and fun to the team’s Twitter account. Tony had an idea: “We choose a ‘tag of the day’ and tweet an explanation of when to use it, adding the #tagoftheday hash tag.” We liked it.

Over an email conversation that went on for a few days, we exchanged more ideas. We tweaked. And we agreed on calling the series “#htmltuesday”. As I, Jens, have privately been maintaining a list of all HTML elements for a while we took that as a starting point, and I volunteered to write tweets for the next two and a half or so years. This is the result. In alphabetical order.

This is the introduction that I had prepared for a post on the Webmaster Central blog in anticipation of the end of the #htmltuesday series. It sums everything up well. The series ended a few months after I left, on December 17 of last year. It didn’t really seem like there would be anything left to do, with Tony and me having left the team, but Tony has still stayed with Google, both of us have still been in touch, and now Tony helped me pull archives and obtain permissions. Many thanks to Tony, hence, for all of his help, to Cathy, my former manager, as well as Google in general for helping to preserve this little collection.

There’s not much else to say then unless you like to know how the post would have ended if I had stayed at Google. You’d also read the following:

The series has now finished. Unless more elements are added to HTML 5 (WHAT WG lineage), that’s it. What element would you pick to tweet about? Please share your own #htmltuesday tweets. @GoogleWebStudio says hi!

Written by Jens O. Meiert, Tech Lead, Google Web Studio

So long, #htmltuesday.

Was this useful or interesting? Share (toot) this post, or maybe treat me to a coffee. Thanks!

About Me

Jens Oliver Meiert, on September 30, 2021.

I’m Jens, and I’m an engineering lead and author. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m close to W3C and WHATWG, and I write and review books for O’Reilly and Frontend Dogma.

With my current move to Spain, I’m open to a new remote frontend leadership position. Feel free to review and refer my CV or LinkedIn profile.

I love trying things, not only in web development, but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.