Context
I build a lot of email templates, at work.
I wanted to be better, so I took a refresher course on HTML and CSS.
As I clicked on "Begin Course", I felt like a fraud.
"Bro, you have about 4 years experience building web apps, what the hell am I doing with learning HTML and CSS?", my inner voice said.
I felt the same way Shakespeare would feel if he was learning ABC,s after writing Macbeth.
If it's one thing every dev knows, it's that it's impossible to know everything. That's why we all read articles, do side projects, and Google search like crazy.
Half of all Google searches are devs trying to figure out how to center divs. Another 10%, are devs searching for differences between a left join and a right join.
Skipping the lamba, I learned a couple of things in my course that has improved my ability to write semantic HTML better, increasing accessibility in the web apps and email templates I build.
Since sharing is caring, below are the top 8 new things I learned.
1. Blockquote and Cite element
I never knew there were native elements for quotes, don't judge me. This group of elements is used to create quotes, the browser natively adds a margin to indent the content and styles the cite element.
2. Figure and Figcaption elements
I'll admit, I knew about the Figure element but never used it before. The Figure element is used for self-contained content, like code, images, videos, illustrations, etc. The figcaption tag is used to caption a figure and the browser loves it when you use captions.
"Tomide, abeg, all these one na yarns, why should I use the Figure element ?"
"You'd like for your web app to rank higher on search engines, right?"
"Yes"
"You'd like for your web app to rank higher on search engines, right?"
"You'd like disabled people to access content on your site with no problem, right?"
3. Create Detailed Emails with Anchor Links.
Alright, this is one I knew but totally forgot about, you could include the subject of an email in an anchor element using the mailto property.
4. Root relative paths
<img src="/path/to/image.jpg" />
This tells the browser, ignore the current path and start looking for the image from the root location of the website.
<img src="./path/to/image.jpg" />
This tells the browser, start from the current path and start looking for the image.
5. Embedding SVGs
There are many ways to embed SVGs, inline, img, object .
<!-- a inline embed -->
<svg width="212" height="224" viewBox="0 0 212 224" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M106 212C164.542 212 212 164.542 212 106C212 47.4578 164.542 0 106 0C47.4578 0 0 47.4578 0 106C0 164.542 47.4578 212 106 212Z" fill="#081928"/>
<path d="M211.5 106C211.5 164.266 164.266 211.5 106 211.5C47.734 211.5 0.5 164.266 0.5 106C0.5 47.734 47.734 0.5 106 0.5C164.266 0.5 211.5 47.734 211.5 106Z" stroke="#1B3554" stroke-opacity="0.0198992"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="212" height="212">
<path fill-rule="evenodd" clip-rule="evenodd" d="M106 212C164.542 212 212 164.542 212 106C212 47.4578 164.542 0 106 0C47.4578 0 0 47.4578 0 106C0 164.542 47.4578 212 106 212Z" fill="white"/>
<path d="M211.5 106C211.5 164.266 164.266 211.5 106 211.5C47.734 211.5 0.5 164.266 0.5 106C0.5 47.734 47.734 0.5 106 0.5C164.266 0.5 211.5 47.734 211.5 106Z" stroke="white"/>
</mask>
</svg>
<!-- img method -->
<img src="/path/dramon.svg" alt="Illustration of Dramon the Dog" Title="Dramon the dog"/>
<!-- object element -->
<object type="image/svg+xml" data="/path/dramon.svg">
<!-- fallback embed -->
<img src="/path/dramon.svg"/>
</object>
Which is the best way? Like many things in tech, it depends on your situation. To make this decision, there are 3 main factors to consider
- Interactivity: The
objectand inline embed allows you to treat SVGs as HTML, animate, and manipulate SVG images with CSS and JS. - SEO: This is a little tricky, Google does not display inline SVG as part of the results in an image search, so if you want traffic from an image search, you should use
<img title="image title" alt="SEO keyword"/>. To optimize inline SVG for a web search, you can use ARIA attributes and - Accessibility: Only
<img />support thealtandtitleattributes that are read aloud by screen readers.
6. Track element
The track element is used to embed text for Video content on a page.
It is best used for subtitles or closed captions but can be used for much more.
<video controls width="300" src="/path/to/your/video.mp4">
<track default kind="subtitles" srclang="end" src="/path/to/track.vtt">
</video>
Thanks for reading, If you found this article useful, please share to your dev friends on socials.
Are there any other HTML tips you know about? Please share in the comments below.
Top comments (5)
great post. this is a real WebVTT example (click on CC to enable the text):
Thanks a lot, Anderson.
This is super helpful. Thanks Tomiiide
Great tips! Thank you.
All this tips very important thank Tomide