Using this abomination
Is this annoyingly complex? Yes. Is it still easier to parse than a real Tumblr theme? Also yes.
Adding blocks
There is a very specific element wrapping pattern you need to follow for the styling to look correct. Usually, you'll probably be splitting your page into sections, so use the <section> tag with the "post: class with the following structure:
<section class="post">
<div class="article-content">
THIS IS WHERE YOUR TEXT ACTUALLY GOES
</div>
<footer class="article-footer"><div class="date">Optional footer line, you can put a date here. Delete if not using</div></footer>
</section>
There are two scenarios where you don't want to use section: if you're doing an actual list of blog posts, each post should be wrapped in an article tag, so use <article class="post"> instead. If you're just using the boxes for stylistic purposes, use <div class="post">. (If you're not sure whether that's the case, you should most likely use a regular div if there's no header at the beginning of the section.)
Tags
The footer is optional, so just delete it if you don't want it. You can also add "tags" to the footer in true Tumblr fashion:
<footer class="article-footer"><div class="date">Date or whatever</div> <div class="tags"> <span class="tag">#tag here</span> </div> </footer>
Tags can contain links without any issues.
Image posts
You can add a main image to a section by putting it in front of the article-content element. It will separate the image from the rest of the "post" content like in a Tumblr image post. If you want inline images (i.e. the image is inside the box), you can just add them normally.
<section class="post">
<img src="IMAGE PATH" alt="ALT TEXT" class="postimage" />
<div class="article-content">
THIS IS WHERE YOUR TEXT ACTUALLY GOES
</div>
<footer class="article-footer"><div class="date">FOOTER</div></footer>
</section>
If you're still confused, the next post has the full enchilada (image and tags) as a demo.
