Thariq from Anthropic has written a great article on why using HTML instead of Markdown is the way.
Article: https://x.com/trq212/status/2052809885763747935
Examples: https://thariqs.github.io/html-effectiveness/
—
TIMESTAMPS:
0:00 Use HTML now!
00:14 The issue with md files, advantages of HTML
00:55 Markdown vs HTML
04:00 Great examples of HTML
04:35 The issue with HTML and why it doesn't matter
05:47 More great use cases
06:15 How to use this new technique
07:28 The arguments for markdown
—
Unlock the full potential of your online presence with Kabarza and Samuel—experts in web design and development (respectively), powered by cutting-edge AI solutions. We blend creative design with advanced tech to deliver smart, high-impact websites that stand out. Ready to elevate your business? Contact us today and see what AI-driven innovation can do for you!
LINKS & RESOURCES:
Website: https://cmdaishow.com
Check out Kabarza's amazing work: https://kabarza.com
Visit Samuel's website for more: https://samuelgregory.co.uk
📷 Follow on Instagram: https://www.instagram.com/cmdaishow
—
HASHTAGS:
#html #markdown #anthropic
#ai #podcast #aidesign #aidevelopment #vibecoding #webdesign #webdevelopment #ainews #webnews #designnews #devnews
Transcript
Tarik from Anthropic, he shared a very interesting article use HTML instead of MD files. And my social media has been full of it. So, Command AI The idea is that with MD files, agents can read it easily and it's quite efficient in usage of tokens, but with HTML, it's nicer for us humans to read. HTML can contain much richer information compared to markdown. It can of course do simple document structure like headers and formatting, but it can also represent all sorts of other information such as uh basically like tables and design data, CSS, SVGs, and code um and just so much more. On the very left, we have a markdown file not rendered. So, this is basically the raw information and you see this hashtag and then that's basically your H1. One hashtag means H1 essentially. Then that's how the rendered one for human. So, there are tools that do this for you. For example, on my Mac, if I show you the same file, I have a I have an app that renders the preview for me quite nicely. If you don't have that, you will see it just like that. When you open it on your Mac or on your computer, you see the file just like that. Now, you see this is quite simple, but it's nice, right? It especially this one. This one is not very readable. Like, good luck reading this. I think that I think there's a there's you've got a you've got a missing bracket or something like that, but that should render like a table above. Yeah, it it's the this it's because of the spacing. Like, it's smaller. Like, yeah. But, it's it's still not really easy to read. Like, I would argue like this table here, again, this table. You see because of the information density, it it the you know, the the length of the information, it's just not easy to read. But, this one is easier to read. So, why does this matter? This matters because [music] you want when you are talking to your agent, you want to have like a format to communicate with which you both can read it effectively. Like, no information lost, but also in tokens, you don't want to use too many tokens. Now, now the idea from Tarik is, which by the way, I've been doing this for quite some time. I'm really happy to share like I've been asking my agents to just output HTML to me instead of MD files quite often. So, I told the agent to take this MD file and create a rich HTML based on this MD file and present it to me. You see, it's just much nicer to look at. For example, look at this export UI panel. This is the plan for a panel. It's just a very rough diagram or like UI here. Here, you have a proper UI. You can It Well, it doesn't like click, but you could tell your agent to make it interactive, right? It it would work. So, that's really nice about it. Then, when it comes to like rich information or like coding, it's just much nicer to have it. You can have like diagrams and so much more. And And this is really nice. The types of things that you can do. For example, here. I could This is a really good example of something that you can do with a shimmel that you can't do with MD files or not as nicely or Which one was it? Like a clickable flow. This is you know, this works. I mean, there is a JavaScript here involved as well, but you get the idea. Or like with SVGs, I do this by the time by the way all the time. I ask my agent to explain something in diagrams or in SVG and they're really good at it. They like this you can imagine being just much easier to understand as a human, but also the agent will understand it just fine. Now, what is the issue with that? Tokens. And people were making jokes about Anthropic having the deal with SpaceX first and then publish this because this is going to consume more uh tokens. How much more? There has to an argument to be made and I don't know the exact answer and there is a test to be made made. If I'm chatting with my agent, the the likelihood is that there is a lot of tokens that are going to be used just for the reasoning. I don't know the proportions. That's my point. Like I don't know if it's even if an HTML doc is What's happening? Even if an Even if an HTML doc is 10 times more token thirsty than an MD file, even if it's 10 times more token thirsty, it might not matter at the if you look at the entire interaction that you have with the Claude code instance because of the reasoning and what what not. I don't know. I would actually like to maybe test that. Article which we will share. There There are like other arguments to be made, like visual clarity and ease of reading as I mentioned. It's just much nicer with hierarchy of information. Ease of sharing, by the way. Like we can also Like ease of sharing. Like within eight you could share an MD file, but with an HTML you could just quickly put it on Vercel and share it with anyone on a group chat. That's That's like a big deal, I would say. Anyway, give it a try next time you're planning something with your agent. Like let's say you're doing a marketing This is what literally I did for a client of mine. We We started doing marketing research because he wants to write blog posts and create SEO pages, pages made for SEO. We did the He did it on his end on ChatGPT. I did it the same at the same time on my end with Claude Code. The difference at the end I said, "Present to me everything in a in an HTML." And it did. And then I just I I'm logged in in Vercel in the CLI. I just hit like deploy to Vercel. Just did and shared it with him. Well, if he wants to share it with me, he needs to share like his chat history or whatever, like a text Well, I shared an HTML doc with him with steps, with ref- references and links and like uh uh checkboxes. It's just you know, uh it's just much nicer to work with and it can be something you do with clients. So I'm I'm writing a book at the moment and I actually really want that to be in Markdown while I'm editing cuz I want to read the words and edit the words and this and that and the other, right? The end goal is It will be HTML for sure, but like, you know, in there are some cases like Obsidian is a is a markdown network of files basically and people using that to journal and and create their second brain and things like that. I think that probably also belongs in markdown. Maybe even a HTML maybe it creates both. Maybe there maybe there is a HTML file created at the same time as a markdown, [snorts] but again Yeah. when when I need to hand I need to go in and hand edit stuff. That's where markdown will reign supreme. However, if I don't and I don't want to let my agent do everything. But why not why would you use markdown and even for that case and not just use like a simple like very simple HTML doc like Because the book won't have things like that in it. As an example, there there there there is a element of simplicity. Like if the if the document is very simple like it doesn't need tables and this and that then it makes sense to have for me it makes sense to have it in markdown cuz I want to be able to write it. I'm not asking my agent to write things for me. I want to be able to go in there and whatever. Whereas if I'm navigating through you know spans and all the rest of it and tag and and whatever then it just becomes whatever. But it's No, I see. Yeah. But we we are talking about many like many more use cases HTML is more appropriate, but it's cool. It's it's I think we're all kind of doing it, but it just needed someone to really sit down and and demonstrate and articulate with which Darrel did. So This is part of a larger conversation on my show Command AI which we stream live every single week. We discuss the news and all things related to AI in the world of design and web. Catch us next week and join in the banter. Command AI