Playing: 354: The Surprisingly Exciting World of HTML Elements
LOUDNESS
May 19th, 2021
The Surprisingly Exciting World of HTML Elements
👇 Download Show✏️ Edit Show NotesIn this episode of Syntax, Scott and Wes talk about HTML — interesting HTML elements, things you might not know, wish lists for the future, and more!
Prismic - Sponsor
Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor
If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Cloudinary - Sponsor
Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes
02:34 - What is semantic HTML?
- What is the content? HTML should describe the content first and foremost.
04:04 - Why semantic HTML?
- Accessibility
- SEO
- Styling is easier
- HTML tags that have meaning:
- Almost all of them
- Common ones:
<p><ul>/<ol>and<li><a><h1>to<h6>
20:04 - Structural / Layout tags
<nav><header>- You can have more than one header
- Header cannot be in a footer / address / header
<section><footer><aside><main><article>
26:18 - Some fun ones you might not know
<address><kbd><sup>/<datalist><time>and strike?<track><wbr><cite><dfn><mark><ruby>/<rt>/<rb>- A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters.
<meter>and<progress>- While
<progress>is used to convey how much work in a task has been completed, theelement is used to display a measurement on a known scale. This could be something like the current disk usage on your computer, or a temperature measurement (within a defined range).
- While
<marquee>
32:12 - Visual vs Semantic tags
- Almost all tags in HTML are semantic
<i>vs<em>and<bold>vs<strong><i>and<bold>are NOT deprecated like many have said- The
<strong>element is for content that is of greater importance, while the element is used to draw attention to text without indicating that it's more important.
35:40 - HTML tags with no meaning:
<div><span>
37:51 - Some elements have special functionality or styling
<details>and<summary>tag<fieldset>+<legend>
40:59 - What elements would we like to see?
- Modal element
- Textarea that grows with content
- Animated accordion
- A better table
- One that works with grid/flex/modern CSS, auto-sizing, max/min widths
- From Twitter:
- VirtualList
- Carousel - HOT DRAMA
- Date range
- Hero
tag that figured its level out by itself. Useful for components that can go anywhere - Icon tag
- Cookie banner
tag that shows HTML elements without encoding * You can kinda do this with display block on script and style tags
Links
××× SIIIIICK ××× PIIIICKS ×××
- Scott: Hat Washer
- Wes: Netflix's This is a Robbery
Shameless Plugs
- Scott: 1: Become a Level Up Tutorials Author 2: Github Actions with Brian Douglas - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code 'Syntax' for $10 off!
Tweet us your tasty treats!
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets