your posting pal! these days i post about bikes, camping, games, and generally grumpy tech stuff

pfp by @doomvega



ltsquigs
@ltsquigs

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
A non-exhaustive list of basic HTML tags that work
TagWhat it do?How It Renders On CohostDocs
<a>Link to a URL.GoogleMDN
<abbr>Marks that a word is an abbreviation.CSSMDN
<b>Emboldens text.Example TextMDN
<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..
Item 1
Definition 1.
Item 2
Definiton 2.
MDN
<figure>, <figcaption>Used to display a figure (such as an image) and give it a caption.
eggbug
eggbug
MDN
<hr>Creates a horizontal seperator across the container.First Line
Second Line
MDN
<i>Marks text as italic.Example TextMDN
<ins>, <del>Marks text as having been inserted or deleted from a change.Inserted TextDeleted TextMDN
<img>Includes an image. (Note default style has lots of margin, can override with style)eggbugMDN
<mark>Marks the text as being markedMarked TextMDN
<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 TextMDN
<ruby>, <rp>, <rt>Used to indicate text includes ruby characters (e.g. furigana).MDN
<samp>Marks the text as coming from sample computer outputExample TextMDN
<sub>Marks the text as being subscriptExample TextMDN
<sup>Marks the text as being superscriptExample TextMDN
<s>Strikes through the textExample TextMDN
<small>Makes the text smallExample TextMDN
<summary>, <details>Used to show a summary and give option to user to expand into details
Example Example Text
MDN
<table> (et al)Used to create tables.This whole thing is a tableMDN
<ul>, <ol>, <li>Used to creatae order and unordered lists.
  • Unordered List
  • Unordered List 2
  1. Ordered List
  2. Ordered List 2
MDN
Obscure/Redundant HTML Formatting Tags
HTML Tags that are obscure or redundant
TagWhat it do?How It Renders On CohostDocs
<cite>Indicates that the text included is a citation.Example CitationMDN
<dfn>Indicates a term that is being defined.ExampleMDN
<em>Emphasis text.Example TextMDN
<kbd>Marks text as being related to keyboard keysCtrl + Alt + DelMDN
<strong>Marks text as strong.Example TextMDN
<time>Marks text as representing a time.MDN
<wbr>Tells the browser it can force a wordbreak at a point.ExtremelylongonewordtextthatshouldbebrokenMDN
<var>Tells the browser the text is a mathematical variable.xMDN
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.


You must log in to comment.

in reply to @ltsquigs's post:

my understanding is that the profile fields also allow..some? of this? but it's a vastly more limited set. do you happen to know which tags work in the profile fields?

It would be cool if this information was displayed under the same "?" icon for markdown. Just to help people with limited knowledge of html/css out.