Inline HTML

Markdown supports inline HTML, giving you additional flexibility for layout and styling. You can mix HTML elements directly into your Markdown content.

Why Use HTML?

While Markdown is great for content, sometimes you need more control over layout or want to add specific CSS classes. That's where inline HTML comes in handy.

Common HTML Patterns

The Spacer Pattern

One of the most useful patterns is the spacer, which pushes content to opposite sides using flexbox:

Loading syntax highlighting...

This creates a heading with the job title on the left and the date range on the right. The CSS in the default template styles .spacer with margin: 0 auto and the h3 with display: flex.

Custom Containers

Wrap content in divs with custom classes for special styling:

Loading syntax highlighting...

Important: Leave blank lines before and after Markdown content inside HTML elements so it gets processed as Markdown.

Spans for Inline Styling

Use spans to apply classes to specific text:

Loading syntax highlighting...

Allowed HTML Elements

For security, resume.lol sanitizes HTML. The following elements and attributes are allowed:

  • Elements: Standard HTML tags like div, span, p, a, ul, ol, li, h1-h6, strong, em, br, etc.
  • Attributes: class, className on all elements; href and target on links

Inline styles with the style attribute are removed during sanitization for security.

Example: Header Section

Here's a complete example of a resume header using inline HTML:

Loading syntax highlighting...

With the appropriate CSS (in the CSS tab), this creates a centered header with contact information displayed horizontally.

Tips for Using HTML

  • Use HTML sparingly - Markdown is easier to read and maintain
  • Always leave blank lines around Markdown content inside HTML elements
  • Define your custom classes in the CSS tab
  • Test your resume to make sure HTML renders correctly
  • Remember that className gets automatically converted to class