Everyone is messing with CSS right now, but there are also plenty of just regular HTML tags that cohost lets you put into the posts. I figured I would make a reference of what those tags were and what they look like for anyone wanting to do something Markdown doesnt quite do.
Basic HTML Formatting Tags
| Tag | What it do? | How It Renders On Cohost | Docs |
|---|---|---|---|
| <a> | Link to a URL. | MDN | |
| <abbr> | Marks that a word is an abbreviation. | CSS | MDN |
| <b> | Emboldens text. | Example Text | MDN |
| <blockquote> | Indicates that the contained text is an extended quote. | Example Text that should span multiple lines | MDN |
| <br> | Forces a new line. | First Line Second Line | MDN |
| <bdo> | Overrides the browser default direction for rendering text. | This text will go right to left. | MDN |
| <code> | Indicates that the text included is programming code. | var example_code = 'test'; | MDN |
| <dl>, <dt>, <dd> | Used to create a list that includes definitions of each item.. |
| MDN |
| <figure>, <figcaption> | Used to display a figure (such as an image) and give it a caption. |
| MDN |
| <hr> | Creates a horizontal seperator across the container. | First Line Second Line | MDN |
| <i> | Marks text as italic. | Example Text | MDN |
| <ins>, <del> | Marks text as having been inserted or deleted from a change. | Inserted Text | MDN |
| <img> | Includes an image. (Note default style has lots of margin, can override with style) | MDN | |
| <mark> | Marks the text as being marked | Marked Text | MDN |
| <p> | Indicates the text is a paragraph. | Paragraph 1 Paragraph 2 | MDN |
| <pre> | Displays the text inside without collapsing any whitespace. | First Line Second Line | MDN |
| <q> | Marks the text as being an inline quote and adds appropriate quotation marks. | Quoted Text | MDN |
| <ruby>, <rp>, <rt> | Used to indicate text includes ruby characters (e.g. furigana). | 振り仮名 | MDN |
| <samp> | Marks the text as coming from sample computer output | Example Text | MDN |
| <sub> | Marks the text as being subscript | Example Text | MDN |
| <sup> | Marks the text as being superscript | Example Text | MDN |
| <s> | Strikes through the text | MDN | |
| <small> | Makes the text small | Example Text | MDN |
| <summary>, <details> | Used to show a summary and give option to user to expand into details | ExampleExample Text | MDN |
| <table> (et al) | Used to create tables. | This whole thing is a table | MDN |
| <ul>, <ol>, <li> | Used to creatae order and unordered lists. |
| MDN |
Obscure/Redundant HTML Formatting Tags
| Tag | What it do? | How It Renders On Cohost | Docs |
|---|---|---|---|
| <cite> | Indicates that the text included is a citation. | Example Citation | MDN |
| <dfn> | Indicates a term that is being defined. | Example | MDN |
| <em> | Emphasis text. | Example Text | MDN |
| <kbd> | Marks text as being related to keyboard keys | Ctrl + Alt + Del | MDN |
| <strong> | Marks text as strong. | Example Text | MDN |
| <time> | Marks text as representing a time. | MDN | |
| <wbr> | Tells the browser it can force a wordbreak at a point. | Extremelylongoneword | MDN |
| <var> | Tells the browser the text is a mathematical variable. | x | MDN |
Containers: <div>, <span>
There are two tags primarily used to encapsulate and organize other HTML tags, DIV and SPAN.If you want to know the technical details of the difference between the two... google it.
The short of it is that DIV is a "block" container, it is meant to represent an independent block of content. Most browsers will render a DIV as wide as the space it is contained in, effectively making any elements after a DIV element render in the next "line".
SPAN on the otherhand is an "inline" element and is meant to contain only elements that can be rendered inside of other contnet like a text block. It does not take up the whole space it is rendered in but also has no inherit width.
Of course everything I just said up there is only true most of the time, and historically everyone has ignored the rules on how you are supposed to use DIV and SPANs and browsers have created whole sets of exceptions and rules to how they work.
If you really really need precise container control, go google Flexbox.