Read on Twitter
HTML is more capable than ever before.
Some Great HTML Stuff For You– and how to use them
Here are the elements you should be making use of today.
Thread
#100DaysOfCode
Some Great HTML Stuff For You– and how to use them
Here are the elements you should be making use of today.
Thread
#100DaysOfCode
1. <dialog>
Use it to: Display a popup or modal window without the overheads
This new, semantic element is designed to denote a supplementary, interactive component that displays out of the main flow of the document.
For e.g.
<dialog open>
<p>Dialog Content</p>
</dialog>
Use it to: Display a popup or modal window without the overheads
This new, semantic element is designed to denote a supplementary, interactive component that displays out of the main flow of the document.
For e.g.
<dialog open>
<p>Dialog Content</p>
</dialog>
2. <details> & <Summary>
Use them to: Show/hide content under a collapsible heading without using JS
The accordion is a common user interface pattern.
For e.g
<details open>
<summary>Heading</summary>
<p>Some extremely long content…</p>
</details>
Use them to: Show/hide content under a collapsible heading without using JS
The accordion is a common user interface pattern.
For e.g
<details open>
<summary>Heading</summary>
<p>Some extremely long content…</p>
</details>
3. <picture>
Use it to: Respond to different viewports and serve specialized content
The <picture> element allows developers to define different sources for the same image. Based on the attributes passed to those sources, the browser determines which image to download and use.
Use it to: Respond to different viewports and serve specialized content
The <picture> element allows developers to define different sources for the same image. Based on the attributes passed to those sources, the browser determines which image to download and use.
4. Web Components
Use it to: Create custom HTML tags
Building a Web Component uses three different specifications in the browser to construct, configure, and generate their inner workings.
Custom elements
Shadow DOM
HTML templates
Use it to: Create custom HTML tags
Building a Web Component uses three different specifications in the browser to construct, configure, and generate their inner workings.
Custom elements
Shadow DOM
HTML templates
5. <input>
Use it to: Give instant feedback on form inputs
Even the simplest of forms need some kind of validation.
For e.g.
Colour inputs:
<input type="color" />
Number inputs:
<input type="number" min="0" max="99" />
Use it to: Give instant feedback on form inputs
Even the simplest of forms need some kind of validation.
For e.g.
Colour inputs:
<input type="color" />
Number inputs:
<input type="number" min="0" max="99" />
6. <main>
This marks up the core content of the document.
In contrast to any header, footer, or navigation elements,
its content will vary from page to page.
There can only be one <main> element visible at any time.
This marks up the core content of the document.
In contrast to any header, footer, or navigation elements,
its content will vary from page to page.
There can only be one <main> element visible at any time.
7. <nav>
It can be a site’s main navigation or a grouping of internal links such as a table of contents.
Not all links need to be inside a <nav>.
8. <header>
Use a <header> to separate any kind of introductory content from the rest of the document.
It can be a site’s main navigation or a grouping of internal links such as a table of contents.
Not all links need to be inside a <nav>.
8. <header>
Use a <header> to separate any kind of introductory content from the rest of the document.
9. <footer>
This would typically hold extra information like author or copyright information, along with any related navigation.
10. <aside>
Designate an area of a document that contains supplementary information about the main content.
This would typically hold extra information like author or copyright information, along with any related navigation.
10. <aside>
Designate an area of a document that contains supplementary information about the main content.
11. <article>
Use <article> when the content it will display is self-containing, for example, a blog post or even a news story.
There can be multiple <article> elements on a page and there are no limits on where they can appear.
Use <article> when the content it will display is self-containing, for example, a blog post or even a news story.
There can be multiple <article> elements on a page and there are no limits on where they can appear.
12. <section>
This represents a grouping of content within a document where no other element is suitable.
13. <H1> to <H6>
Heading elements have been around for a long time, but make sure they are being used correctly inside sectioning elements.
This represents a grouping of content within a document where no other element is suitable.
13. <H1> to <H6>
Heading elements have been around for a long time, but make sure they are being used correctly inside sectioning elements.
14. <time>
Dates and times are formatted differently across the world and so cannot be reliably parsed by a search engine or email client.
Specify what parts of a sentence are time and allow programs to extract and use that information.
Dates and times are formatted differently across the world and so cannot be reliably parsed by a search engine or email client.
Specify what parts of a sentence are time and allow programs to extract and use that information.
15. <mark>
When wanting to highlight a few words of a sentence,
it may seem best to use <strong>.
While <strong> denotes importance,
<mark> denotes relevance in the current situation.
An example of this would be matched terms in a search result.
Hope you like this
When wanting to highlight a few words of a sentence,
it may seem best to use <strong>.
While <strong> denotes importance,
<mark> denotes relevance in the current situation.
An example of this would be matched terms in a search result.
Hope you like this
