After tweeting about a CSS property for 100 days in a row last year, I did it again this year, this time it was all about HTML elements.
Again, I learned quite a lot about a language I have been using for over 15 years now almost daily. There is some interesting about almost every HTML element. I also have to say that it is fantastic to have MDN as a reference available. You can learn so much by looking things up there.
So, without further ado here is the full list of elements I tweeted about. You can also look them up directly on twitter using the #HTMLElementInATweet hashtag if you prefer.
Day 1: <html>
— Michael Scharnagl (@justmarkup) January 1, 2021
The root element. All other elements must be descendants of this element.
ℹ️ Always set the lang attributehttps://t.co/1M9IuYKfnU#HTMLElementInATweet
Day 2: <audio>
— Michael Scharnagl (@justmarkup) January 2, 2021
Embed sound content in documents
ℹ️ Never use the autoplay attribute - let the users decide if they want to hear it.https://t.co/a73RjyygRz#HTMLElementInATweet
Day 3: <br>
— Michael Scharnagl (@justmarkup) January 3, 2021
Produces a line break in text
ℹ️ Better use <p> elements, and use CSS properties to control the spacing.https://t.co/dDkty2QVhh#HTMLElementInATweet
Day 4: <li>
— Michael Scharnagl (@justmarkup) January 4, 2021
Represents an item in a list
ℹ️ You can use the value attribute to indicate the current ordinal value of the list item as defined by the <ol> element.https://t.co/x3NEHrXHNq#HTMLElementInATweet
Day 5: <h1> - <h6>
— Michael Scharnagl (@justmarkup) January 5, 2021
The section headings
ℹ️ Although no browser support <h> and/or the document outline they do style headlines different based on surrounding sections https://t.co/bipv4RJ155https://t.co/NlBCXtRtcq#HTMLElementInATweet
Day 6: <base>
— Michael Scharnagl (@justmarkup) January 6, 2021
Specifies the base URL to use for all relative URLs in a document.
ℹ️ Open Graph tags do not acknowledge <base>, and should always have full absolute URLs.https://t.co/qY7k4jT4Xt#HTMLElementInATweet
Day 7: <ins>
— Michael Scharnagl (@justmarkup) January 7, 2021
Represents a range of text that has been added to a document.
ℹ️ The presence of the <ins> element is not announced by most screen reading technology in its default configuration.https://t.co/okkdDoubPz#HTMLElementInATweet
Day 8: <noscript>
— Michael Scharnagl (@justmarkup) January 8, 2021
Defines a section of HTML to be inserted if scripting is currently turned off in the browser.
ℹ️ If you use <noscript>Turn on JavaScript to view this page</noscript>, you are doing it wrong.https://t.co/1sHapOe0MV#HTMLElementInATweet
Day 9: <title>
— Michael Scharnagl (@justmarkup) January 9, 2021
Defines the document's title.
ℹ️ It is important to provide a title value that describes the page's purpose. https://t.co/pLXMBFEkJb#HTMLElementInATweet
Day 10: <math>
— Michael Scharnagl (@justmarkup) January 10, 2021
The top-level element in MathML for describing mathematical notations
ℹ️ Only supported in Firefox and Safari
Example: https://t.co/Ym9yV4DNG9https://t.co/zKeVlxm020#HTMLElementInATweet
Day 11: <p>
— Michael Scharnagl (@justmarkup) January 11, 2021
Represents a paragraph
ℹ️ The end tag may be omitted if the element is immediately followed by another block-level element.https://t.co/VJCdX94I4g#HTMLElementInATweet
Day 12: <span>
— Michael Scharnagl (@justmarkup) January 12, 2021
A generic inline container for phrasing content
ℹ️ It should only be used when no other semantic element is appropriate.https://t.co/jTI5MvAZx1#HTMLElementInATweet
Day 13: <button>
— Michael Scharnagl (@justmarkup) January 13, 2021
A clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.
ℹ️ A <button> inside a form will act as a submit button, unless you add type="button"https://t.co/slNtJwZBoc#HTMLElementInATweet
Day 14: <tr>
— Michael Scharnagl (@justmarkup) January 14, 2021
Defines a row of cells in a table
ℹ️ There are various valid use cases for a table, layout is none of them.https://t.co/aa9w6Oo9Bw#HTMLElementInATweet
Day 15: <div>
— Michael Scharnagl (@justmarkup) January 15, 2021
Is the generic container for flow content.
ℹ️ It is a container, never misuse as an interactive element.
Would personally prefer they would have it called <block> :-)https://t.co/rI22G7tcVg#HTMLElementInATweet
Day 16: <cite>
— Michael Scharnagl (@justmarkup) January 16, 2021
It is used to describe a reference to a cited creative work.
ℹ️ Typically, browsers style the contents of an <cite> element in italics by default.https://t.co/9nmfjuk5vV#HTMLElementInATweet
Day 17: <tfoot>
— Michael Scharnagl (@justmarkup) January 17, 2021
Defines a set of rows summarizing the columns of the table.
ℹ️ Not the most interesting element, still very useful for semantics and accessibility if used right.https://t.co/mwMTLpN3Yk#HTMLElementInATweet
Day 18: <time>
— Michael Scharnagl (@justmarkup) January 18, 2021
Represents a specific period in time
ℹ️ You should include the datetime attribute to translate dates into machine-readable formathttps://t.co/UoffxKUXJc#HTMLElementInATweet
Day 19: <body>
— Michael Scharnagl (@justmarkup) January 19, 2021
Represents the content of an HTML document
ℹ️ The element with the most possible attributes, including many deprecated like link="pink" (used to change default browser defined color for links)https://t.co/K2FtL6FSHn#HTMLElementInATweet
Day 20: <textarea>
— Michael Scharnagl (@justmarkup) January 20, 2021
Represents a multi-line plain-text editing control.
ℹ️ Never set resize: none; better use resize: vertical; so users can still resize vertically, but it won't break your horizontal layout.https://t.co/GfiwvcM4pg#HTMLElementInATweet
Day 21: <param>
— Michael Scharnagl (@justmarkup) January 21, 2021
Defines parameters for an <object> element.
ℹ️ Was useful for embedding Flash (officially gone since 31.12.2020)https://t.co/vjkogoJwCD#HTMLElementInATweet
Day 22: <ruby>
— Michael Scharnagl (@justmarkup) January 22, 2021
Represents small annotations
ℹ️ The term ruby originated as a unit of measurement used by typesetters, representing the smallest size that text can be printed on newsprint while remaining legible.https://t.co/pg7Lh5q9Cb#HTMLElementInATweet
Day 23: <colgroup>
— Michael Scharnagl (@justmarkup) January 23, 2021
Defines a group of columns within a table.
ℹ️ You can use the span attribute indicating the number of consecutive columns the <colgroup> element spanshttps://t.co/vInvCA4OQe#HTMLElementInATweet
Day 24: <kbd>
— Michael Scharnagl (@justmarkup) January 24, 2021
Represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.
For example: <kbd>Strg</kbd>+<kbd>b</kbd>: Boldhttps://t.co/jH2vI5xCNW#HTMLElementInATweet
Day 25: <head>
— Michael Scharnagl (@justmarkup) January 25, 2021
Contains machine-readable information (metadata) about the document
ℹ️ There is a lot that can be in the <head> https://t.co/SBkYBl8nWlhttps://t.co/nClLKh7Wlk#HTMLElementInATweet
Day 26: <meter>
— Michael Scharnagl (@justmarkup) January 26, 2021
Represents either a scalar value within a known range or a fractional value.
ℹ️ The meter element should not be used to indicate progresshttps://t.co/FW4EQKhALq#HTMLElementInATweet
Day 27: <main>
— Michael Scharnagl (@justmarkup) January 27, 2021
Represents the dominant content of the <body> of a document.
ℹ️ Browser reader mode functionality looks for the presence of the <main> element.https://t.co/Geo65nsC2J#HTMLElementInATweet
Day 28: <fieldset>
— Michael Scharnagl (@justmarkup) January 28, 2021
Is used to group several controls as well as labels (<label>) within a web form.
ℹ️ Great for grouping radio buttons, checkboxes and related fields.https://t.co/CFoYzwVK7i#HTMLElementInATweet
Day 29: <b>
— Michael Scharnagl (@justmarkup) January 29, 2021
Is used to draw the reader's attention to the element's contents
ℹ️ Although browsers style content inside <b> as bold, do not use it for styling purposes.https://t.co/YwvzssVgv7#HTMLElementInATweet
Day 30: <var>
— Michael Scharnagl (@justmarkup) January 30, 2021
Represents the name of a variable in a mathematical expression or a programming context.https://t.co/X3ELf5tFpO#HTMLElementInATweet
Day 31: <map>
— Michael Scharnagl (@justmarkup) January 31, 2021
Is used with <area> elements to define an image map (a clickable link area).
ℹ️ Instead of image map you can create the same functionality nowadays with SVG.https://t.co/1vWcWCy21A#HTMLElementInATweet
Day 32: <ul>
— Michael Scharnagl (@justmarkup) February 1, 2021
Represents an unordered list of items
ℹ️ If you using list-style:none; Safari will remove semantics https://t.co/xQ4ym6MyLihttps://t.co/O4wIqkyp7R#HTMLElementInATweet
Day 33: <sup>
— Michael Scharnagl (@justmarkup) February 2, 2021
Specifies inline text which is to be displayed as superscript
ℹ️ The <sup> element should only be used for typographical reasonshttps://t.co/9LPdgoIA5l#HTMLElementInATweet
Day 34: <address>
— Michael Scharnagl (@justmarkup) February 3, 2021
Indicates that the enclosed HTML provides contact information
ℹ️ Can be used for physical address, URL, email address, phone number, social media handle, geographic coordinates, and so forth.https://t.co/QMEAa29JPl#HTMLElementInATweet
Day 35: <picture>
— Michael Scharnagl (@justmarkup) February 4, 2021
Contains zero or more <source> elements and one <img> element to offer alternative versions of an image
ℹ️ Great for art direction, handling multiple image formats and adapting to user preferenceshttps://t.co/I2toAM8P1O#HTMLElementInATweet
Day 36: <slot>
— Michael Scharnagl (@justmarkup) February 5, 2021
Is a placeholder inside a web component that you can fill with your own markup.
ℹ️ It lets you create separate DOM trees and present them together.https://t.co/e9Mfmw6x9e#HTMLElementInATweet
Day 37: <aside>
— Michael Scharnagl (@justmarkup) February 6, 2021
Represents a portion of a document whose content is only indirectly related to the document's main content.
ℹ️ One of the elements added with HTML5 – which was already supported in IE 9 – time flieshttps://t.co/tNcJShsZGc#HTMLElementInATweet
Day 38: <table>
— Michael Scharnagl (@justmarkup) February 7, 2021
Represents tabular data
ℹ️ You can use the CSS property border-collapse only for this element, although I wish it could be used for other elements.https://t.co/fhMqCDMnqL#HTMLElementInATweet
Day 39: <caption>
— Michael Scharnagl (@justmarkup) February 8, 2021
Specifies the caption (or title) of a table.
ℹ️ The <caption> element should be the first child of its parent <table> element.https://t.co/1gixqJ5lLs#HTMLElementInATweet
Day 40: <s>
— Michael Scharnagl (@justmarkup) February 9, 2021
Renders text with a strikethrough, or a line through it.
ℹ️ Use the <s> element to represent things that are no longer relevant or no longer accurate – not for styling.https://t.co/xhQv6giGQD#HTMLElementInATweet
Day 41: <area>
— Michael Scharnagl (@justmarkup) February 10, 2021
Defines an area inside an image map that has predefined clickable areas
ℹ️ Did you know, that before image map in HTML there were server-side image maps? https://t.co/fZqCMEW3sBhttps://t.co/2ydPQXlZYZ#HTMLElementInATweet
Day 42: <dd>
— Michael Scharnagl (@justmarkup) February 11, 2021
Provides the description, definition, or value for the preceding term (<dt>) in a description list (<dl>).
ℹ️ VoiceOver on iOS 14 Supports Description Lists https://t.co/3U5vNLRjpahttps://t.co/RVg9JRnImk#HTMLElementInATweet
Day 43: <section>
— Michael Scharnagl (@justmarkup) February 12, 2021
Represents a standalone section
ℹ️ If the contents of the element would make sense syndicated as a standalone piece, the <article> element may be a better choice.https://t.co/H4pXPlj2ll#HTMLElementInATweet
Day 44: <q>
— Michael Scharnagl (@justmarkup) February 13, 2021
Indicates that the enclosed text is a short inline quotation.
ℹ️ Most modern browsers will automatically add quotation marks around text inside a <q> element.https://t.co/CqZoW7GRbe#HTMLElementInATweet
Day 45: <source>
— Michael Scharnagl (@justmarkup) February 14, 2021
Specifies multiple media resources <picture>, <audio>, or the <video> element
ℹ️ The media attribute currently only works for <picture>, it was removed for <video> in all browsers but Safari https://t.co/94Z3tw8ES2https://t.co/ufC46N61en#HTMLElementInATweet
Day 46: <dfn>
— Michael Scharnagl (@justmarkup) February 15, 2021
Is used to indicate the term being defined within the context of a definition phrase or sentence.
ℹ️ If the <dfn> element has a title attribute, it must contain the term being defined and no other text.https://t.co/m986AlyNlc#HTMLElementInATweet
Day 47: <embed>
— Michael Scharnagl (@justmarkup) February 16, 2021
Embeds external content at the specified point in the document.
ℹ️ Use the title attribute on an embed element to label its content so that people using assistive technology can understand what it contains.https://t.co/RhgTwpliKq#HTMLElementInATweet
Day 48: <hr>
— Michael Scharnagl (@justmarkup) February 17, 2021
Represents a thematic break between paragraph-level elements
ℹ️ Only use if for semantic reason. If you wish to draw a horizontal line, you should do so using CSS.https://t.co/GJFGkbc4xm#HTMLElementInATweet
Day 49: <dialog>
— Michael Scharnagl (@justmarkup) February 18, 2021
Represents a dialog box or other interactive component
ℹ️ While supported in Chromium, there are accessibility issues which makes it not usable for now https://t.co/dC9DVeaffdhttps://t.co/V7PHaDGr5I#HTMLElementInATweet
Day 50: <tbody>
— Michael Scharnagl (@justmarkup) February 19, 2021
Encapsulates a set of table rows (<tr>), indicating that they comprise the body of the table.
ℹ️ If the table includes a <thead> block (to semantically identify header rows), the <tbody> block must come after it.https://t.co/M5tCuCPFo0#HTMLElementInATweet
Day 51: <canvas>
— Michael Scharnagl (@justmarkup) February 20, 2021
Use the HTML <canvas> element with either the canvas scripting API or the WebGL API to draw graphics and animations.
ℹ️ You should provide alternate content inside the <canvas> block.https://t.co/c7unZdWlbY#HTMLElementInATweet
Day 52: <abbr>
— Michael Scharnagl (@justmarkup) February 21, 2021
Represents an abbreviation or acronym
ℹ️ Spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand ithttps://t.co/aBzHZtzMLH#HTMLElementInATweet
Day 53: <a>
— Michael Scharnagl (@justmarkup) February 22, 2021
Creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
ℹ️ If it goes somewhere, use <a>https://t.co/3lFe7alPyn#HTMLElementInATweet
Day 54: <code>
— Michael Scharnagl (@justmarkup) February 23, 2021
Displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code.
ℹ️ To represent multiple lines of code, wrap the <code> element within a <pre> element.https://t.co/DDnsn7FJgm#HTMLElementInATweet
Day 55: <sub>
— Michael Scharnagl (@justmarkup) February 24, 2021
Specifies inline text which should be displayed as subscript for solely typographical reasons.
ℹ️ Should be used only for typographical reasons, else use CSS like vertical-align: -25%https://t.co/LcsftBH5Sg#HTMLElementInATweet
Day 56: <mark>
— Michael Scharnagl (@justmarkup) February 25, 2021
Represents text which is marked or highlighted for reference or notation purpose
ℹ️ Don't use <mark> for syntax highlighting purposeshttps://t.co/PHiUxXISxT#HTMLElementInATweet
Day 57: <figure>
— Michael Scharnagl (@justmarkup) February 26, 2021
Represents self-contained content, potentially with an optional caption
ℹ️ Not only for <img>, can also be used for things like code, poems and everything referenced as a single unit.https://t.co/aa48awSs1T#HTMLElementInATweet
Day 58: <header>
— Michael Scharnagl (@justmarkup) February 27, 2021
Represents introductory content
ℹ️ It was originally used as the <head> element and was used on the first website https://t.co/U8p1rlqJ1z but made it only in the specification with HTML5https://t.co/R1YfxnZjfC#HTMLElementInATweet
Day 59: <strong>
— Michael Scharnagl (@justmarkup) February 28, 2021
Indicates that its contents have strong importance, seriousness, or urgency.
ℹ️ You have to be strong now, but this is not for styling.https://t.co/TfWctuelug#HTMLElementInATweet
Day 60: <rb>
— Michael Scharnagl (@justmarkup) March 1, 2021
Is used to delimit the base text component of a <ruby> annotation
ℹ️ This feature is non-standard and is not on a standards track. Only supported in Firefox and, wait for it, Internet Explorer 5 - 11https://t.co/9iNu7xsCcX#HTMLElementInATweet
Day 61: <thead>
— Michael Scharnagl (@justmarkup) March 2, 2021
Defines a set of rows defining the head of the columns of the table.
ℹ️ There was a (now obsolete) attribute called char, which is now specified (but not supported) in CSS as text-align: "."; https://t.co/WNXU0t3aJmhttps://t.co/ur8Re83rfP#HTMLElementInATweet
Day 62: <nav>
— Michael Scharnagl (@justmarkup) March 3, 2021
Represents a section of a page whose purpose is to provide navigation links
ℹ️ Use aria-label to describe the purpose of the navhttps://t.co/CX5oVSDuuj#HTMLElementInATweet
Day 63: <figcaption>
— Michael Scharnagl (@justmarkup) March 4, 2021
Represents a caption or legend describing the rest of the contents of its parent <figure> element.
ℹ️ How to figure? https://t.co/sOCylQ9yRPhttps://t.co/T7WsFio39a#HTMLElementInATweet
Day 64: <bdo>
— Michael Scharnagl (@justmarkup) March 5, 2021
Overrides the current directionality of text, so that the text within is rendered in a different direction.
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right
to left.</bdo></p>https://t.co/9QNvAh1HD1#HTMLElementInATweet
Day 65: <meta>
— Michael Scharnagl (@justmarkup) March 6, 2021
Represents metadata that cannot be represented by other HTML meta-related elements
ℹ️ There are many interesting standard metadata names https://t.co/VNFmOXVZzvhttps://t.co/pozxavczFW#HTMLElementInATweet
Day 66: <del>
— Michael Scharnagl (@justmarkup) March 7, 2021
Represents a range of text that has been deleted from a document.
ℹ️ As it is not announced to screen reader you should use :before/:after to announce it https://t.co/jJD0twc2odhttps://t.co/g6F1ndpQJf#HTMLElementInATweet
Day 67: <input>
— Michael Scharnagl (@justmarkup) March 8, 2021
Is used to create interactive controls for web-based forms in order to accept data from the user
ℹ️ Don't use the placeholder attribute instead of a label.https://t.co/b1KBxtS7oG#HTMLElementInATweet
Day 68: <template>
— Michael Scharnagl (@justmarkup) March 9, 2021
Is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded
ℹ️ Great for web components to define the enhanced HTML.https://t.co/zzgt2lQAe2#HTMLElementInATweet
Day 69: <hgroup>
— Michael Scharnagl (@justmarkup) March 10, 2021
Represents a multi-level heading for a section of a document
ℹ️ It is partially implemented in most browsers, but will most likely never be usable. Looking at you outline algorithm.https://t.co/ojBekuxNUv#HTMLElementInATweet
Day 70: <iframe>
— Michael Scharnagl (@justmarkup) March 11, 2021
Represents a nested browsing context, embedding another HTML page into the current one.
ℹ️ Always set the title attribute to concisely describe the embedded content.https://t.co/hKEF3Brl0N#HTMLElementInATweet
Day 71: <samp>
— Michael Scharnagl (@justmarkup) March 12, 2021
Is used to enclose inline text which represents sample (or quoted) output from a computer program.
ℹ️ Can be used for example to show the output after running a command in bash on your site.https://t.co/TFzFdSVHWg#HTMLElementInATweet
Day 72: <data>
— Michael Scharnagl (@justmarkup) March 13, 2021
Links a given piece of content with a machine-readable translation.
ℹ️ Can be combined with microformats or the microdata attributeshttps://t.co/NhLlsp9Fzr#HTMLElementInATweet
Day 73: <summary>
— Michael Scharnagl (@justmarkup) March 14, 2021
Specifies a summary, caption, or legend for a <details> element's disclosure box.
ℹ️ Content can be any heading content, plain text, or HTML that can be used within a paragraph.https://t.co/kZ9nUi306l#HTMLElementInATweet
Day 74: <style>
— Michael Scharnagl (@justmarkup) March 15, 2021
Contains style information for a document, or part of a document.
ℹ️ You can use the nonce attribute to whitelist inline styles in a style-src Content-Security-Policy.https://t.co/1LPAXXhtJm#HTMLElementInATweet
Day 75: <track>
— Michael Scharnagl (@justmarkup) March 16, 2021
Is used as a child of the media elements, <audio> and <video> to specify timed text tracks.
ℹ️ Can be used to provide captions and subtitles.https://t.co/aOJivzBCm7#HTMLElementInATweet
Day 76: <datalist>
— Michael Scharnagl (@justmarkup) March 17, 2021
Contains a set of <option> elements that represent the permissible or recommended options available
ℹ️ It is very basic and you can't really style or define when it should be shown. Still good for some use cases.https://t.co/DO2ucDECuV#HTMLElementInATweet
Day 77: <img>
— Michael Scharnagl (@justmarkup) March 18, 2021
Embeds an image into the document.
ℹ️ Always set the alt attribute, use empty value if decorative or decide if background-image or none is better in that case anyway.https://t.co/TLNZwGa2lZ#HTMLElementInATweet
Day 78: <option>
— Michael Scharnagl (@justmarkup) March 19, 2021
Is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element.
ℹ️ Not really stylable as of now, but this might change someday I hope.https://t.co/dWkOGt4gOm#HTMLElementInATweet
Day 79: <i>
— Michael Scharnagl (@justmarkup) March 20, 2021
Represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others. https://t.co/2Z4Yd5URdW#HTMLElementInATweet
Day 80: <video>
— Michael Scharnagl (@justmarkup) March 21, 2021
Embeds a media player which supports video playback into the document.
ℹ️ Videos should provide both captions and transcripts that accurately describe its contenthttps://t.co/FmuilLQYI8#HTMLElementInATweet
Day 81: <label>
— Michael Scharnagl (@justmarkup) March 22, 2021
Represents a caption for an item in a user interface.
ℹ️ Don't place interactive elements such as anchors or buttons inside a label.https://t.co/UYgloacd2J#HTMLElementInATweet
Day 82: <em>
— Michael Scharnagl (@justmarkup) March 23, 2021
Marks text that has stress emphasis.
<p>Use HTML <em>now</em>!</p>https://t.co/5xg3GDBnyp#HTMLElementInATweet
Day 83: <object>
— Michael Scharnagl (@justmarkup) March 24, 2021
Represents an external resourcehttps://t.co/m63WG7xYq6#HTMLElementInATweet
Day 84: <article>
— Michael Scharnagl (@justmarkup) March 25, 2021
Represents a self-contained composition in a document
ℹ️ Each <article> should be identified by a headinghttps://t.co/U8UACwXFYq#HTMLElementInATweet
Day 85: <ol>
— Michael Scharnagl (@justmarkup) March 26, 2021
Represents an ordered list of items
ℹ️ You can use the reversed attribute to number the items from high to low.https://t.co/bT8uueUE6M#HTMLElementInATweet
Day 86: <pre>
— Michael Scharnagl (@justmarkup) March 27, 2021
Represents preformatted text which is to be presented exactly as written in the HTML file.
ℹ️ If you want to show ASCII images, always provide an alternate description.https://t.co/zFtc9zsxrm#HTMLElementInATweet
Day 87: <small>
— Michael Scharnagl (@justmarkup) March 28, 2021
Represents side-comments and small print, like copyright and legal text.
ℹ️ Like with every other HTML element, don't misuse for styling. https://t.co/1XPHfeotdw#HTMLElementInATweet
Day 88: <link>
— Michael Scharnagl (@justmarkup) March 29, 2021
Specifies relationships between the current document and an external resource.
ℹ️ prefetch/preload can be very helpful, but as always, test if this is really the best for your case.https://t.co/Wo5bA0RZXN#HTMLElementInATweet
Day 89: <legend>
— Michael Scharnagl (@justmarkup) March 30, 2021
Represents a caption for the content of its parent <fieldset>
ℹ️ Always use a <legend> if you use a <fieldset>https://t.co/AjsTCIh5Ck#HTMLElementInATweet
Day 90: <optgroup>
— Michael Scharnagl (@justmarkup) March 31, 2021
Creates a grouping of options within a <select> element.
ℹ️ Use the label attribute to give the group a heading.https://t.co/X57gusVAkt#HTMLElementInATweet
Day 91: <blockquote>
— Michael Scharnagl (@justmarkup) April 1, 2021
Indicates that the enclosed text is an extended quotation.
ℹ️ You can use the cite attribute to specify the source of the quotation.https://t.co/qB76gYp7Ba#HTMLElementInATweet
Day 92: <script>
— Michael Scharnagl (@justmarkup) April 2, 2021
Is used to embed executable code or data
ℹ️ Use type="module" to only load JavaScript for modern browsers, make sure base experience is still working without JavaScript.https://t.co/VZybDYSSeb#HTMLElementInATweet
Day 93: <select>
— Michael Scharnagl (@justmarkup) April 3, 2021
Represents a control that provides a menu of options.
ℹ️ Yes, hard to style, still think twice before using a JavaScript-based alternative - getting them accessibility is really hard.https://t.co/QYG7iLAw24#HTMLElementInATweet
Day 94: <output>
— Michael Scharnagl (@justmarkup) April 4, 2021
Is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.
ℹ️ Many browsers implement this element as an aria-live regionhttps://t.co/hwbaEDHOXd#HTMLElementInATweet
Day 95: <progress>
— Michael Scharnagl (@justmarkup) April 5, 2021
Displays an indicator showing the completion progress of a task.
ℹ️ The minimum value is always 0, and you can not set any other value for min.https://t.co/Znu2lTjqKR#HTMLElementInATweet
Day 96: <details>
— Michael Scharnagl (@justmarkup) April 6, 2021
Creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.
ℹ️ Do not misuse as a hamburger menu.https://t.co/PyfpMKWNwU#HTMLElementInATweet
Day 97: <svg>
— Michael Scharnagl (@justmarkup) April 7, 2021
Is a container that defines a new coordinate system and viewport.
ℹ️ You don't need the xmlns attribute when using it directly in HTML.https://t.co/cof8ojVnjl#HTMLElementInATweet
Day 98: <wbr>
— Michael Scharnagl (@justmarkup) April 8, 2021
Represents a word break opportunity
ℹ️ Behaves like the U+200B ZERO-WIDTH SPACE code pointhttps://t.co/ZP5eVSesmH#HTMLElementInATweet
Day 99: <form>
— Michael Scharnagl (@justmarkup) April 9, 2021
Represents a document section containing interactive controls for submitting information.
ℹ️ Your daily reminder that you can do a lot using form and server-side code.https://t.co/in4Qr8pikw#HTMLElementInATweet
Day 100: <footer>
— Michael Scharnagl (@justmarkup) April 10, 2021
Represents a footer for its nearest sectioning content or sectioning root element.
🎉 That's it. That was fun. 100 days of #HTMLElementInATweet are over now. Hope you learned something.https://t.co/KWujbA3OXH