Skip to content

Latest commit

 

History

History
645 lines (481 loc) · 23.9 KB

html-tags.md

File metadata and controls

645 lines (481 loc) · 23.9 KB
Raw

HTML Tags that can be used in Markdown files

All HTML tags tested to see their effect in a markdown file. Checkout MDN HTML elements reference for a logical breakdown on all HTML tags.

Table of contents

  1. All tags
  2. Block level tags
    1. Semanic tags
    2. Skipped block tags
    3. Unique HTML tags
    4. HTML markdon versions
    5. Block tag examples
  3. Inline tags
    1. Skipped inline tags
    2. Inline that did not work
    3. Formatting text tags
    4. Inline that worked
    5. Inline tag examples
  4. Block tags that worked
  5. Inline tags that worked
    1. More testing

All tags

From MDN:

Top level: Interesting section for the elements about the page - the root element is <html>. SKIP ALL OF THESE!

Type Element Element Element Element
Root: <head>
Common: <meta> <link> <title> <script>
Uncommon: <base> <style>

Next is the <body> tag which contains all the elements that you tend to work with and that are being tested in this file. After that are the semantic Content Sectioning tags. It makes no sense to test the semantic tags, and all the non-semantic tags work except for address:

Type Tag Tag Tag Tag
Semantic: <article> <aside> <footer> <header>
<main> <menu> <nav> <section>
Non-semantic: <address> <h1> <h2> <h3>
<h4> <h5> <h6> <hr>

The next MDN section is called Text Content:

Type Tag Tag Tag Tag Tag
Solo tags: <blockquote> <div> <p> <pre> <dialog>
Grouped tags: <dl> <dt> <dd> - -
<details> <summary> - - -
<figcaption> <figure> - - -
<li> <ol> <ul> - -

The next section is huge: Inline text semantics

Type Tag Tag Tag Tag Tag
Solo content: <a> <abbr> <br> <bdi> <bdo>
<br> <cite> <code> <data> <kbd>
<samp> <small> <span> <sub> <sup>
<time> <var> <wbr> - `
Solo format: <b> <dfn> <em> <i> <kbd>
<q> <s> <strong> <del> <ins>
Connected: <rp> <rt> <ruby> - -

Image and multimedia:

Element Element Element
<area> <audio> <img>
<map> <track> <video>

Miscellaneous -> Embedded content, canvas, SVG and MathML:

Type Element Element Element
Main tag: <embed> <iframe> <object>
<picture> <portal> <svg>
<math> <canvas> <noscript>
Support tags: <param> <source> -

The <table> tag:

  • MAIN: <table>, <thead>, <tbody>, <tfoot>
  • OTHER: <col>, <colgroup>, <td>, <th>, <tr>

The <form> tag:

  • MAIN: <form> and <fieldset> with <legend>
  • GROUPED: <datalist>, <option>, <optgroup>, and <select>
  • OTHER: <button>, <input>, <label>, <meter>, <output>, <progress>, <textarea>

Wierd ones: <slot>, <template>

Block level tags

28 tags total

Semanic tags

9 Semantic tags: SKIP because they do not work and/or work like div tags

HTML Tag Tested? Displayed?
<article> NO N/A
<aside> NO N/A
<footer> NO N/A
<header> NO N/A
<hgroup> Yes N/A
<main> NO N/A
<menu> NO N/A
<nav> NO N/A
<section> NO N/A

Skipped block tags

7 tags skipped or did not display correctly. Forms, and therefore fieldsets, may need actions to work.

HTML Tag Tested? Displayed? Correctly? Why Use?
<address> Yes YES No no italics, needed br tags
<dialog> Yes NO - -
<fieldset> Yes Yes Yes -
<legend> Yes Yes Yes -
<figcaption> Yes NO NO -
<figure> Yes NO NO -
<form> No skip - -

Unique HTML tags

8 TAGS WITH ALTERNATE FORMATIING THAT WORKED:

HTML Tag Tested? Displayed? Correctly? Why Use?
<blockquote> Yes YES Yes NO NEED TO USE
<hr> Yes Yes Yes diff size?
<dd> Yes Yes Yes Indent
<dl> Yes Yes Yes Indent
<dt> Yes Yes Yes Indent
<details> Yes Yes Yes Hidden content
<pre> Yes Yes Yes NO NEED TO USE
<table> Yes Yes Yes Inline CSS?

NOTE: dd, dt, dl > 1st 'd' stands for description, 'l' for list, 't' for term, and 2nd 'd' for details, or description list, description term, description details.

NOTE 2: I have not tested a table with thead or tbody, or the tags that allow for spanning like colgroup, thead, tfoot, colspan, and rowspan. There is a good chance that they will work and provide additional styling that markdown syntax does not have.

HTML markdon versions

11 TAGS THAT WORKED BUT ALREADY HAVE CORRESPONDING MARKDOWN TAGS:

HTML Tag Tested? Displayed? Correctly? Why Use?
<div> Yes Yes Yes Inline CSS?
<p> Yes Yes Yes Inline CSS?
<h1> Yes Yes Yes Inline CSS?
<h2> Yes Yes Yes Inline CSS?
<h3> Yes Yes Yes Inline CSS?
<h4> Yes Yes Yes Inline CSS?
<h5> Yes Yes Yes Inline CSS?
<h6> Yes Yes Yes Inline CSS?
<ol> Yes Yes Yes Inline CSS?
<ul> Yes Yes Yes Inline CSS?
<li> Yes Yes Yes Inline CSS?
<blockquote> Yes Yes Yes Inline CSS?
bold test italic strikethough

Block tag examples

Some text here inside a `fieldset` tag. **Bold**, _italic_, ~~strikethrough~~.
Legend tag: **Bold**, _italic_, ~~strikethrough~~ fieldset tag with a legend tag, inut tags don't display

Address tag check (Did not display as italic and needed br tags to display as block? Also, tel did not diaply as a link)

jim@rock.com
(311) 555-2368
Mozilla Foundation
331 E Evelyn Ave
Mountain View, CA 94041
USA

jim@rock.com
(311) 555-2368
Dark side of the moon
130K miles away
Above Earth
Space

<address> tag has no effect on GitHub.

Blockquote tag check: no diff from > so will it accept inline css?

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.

Figure, img, and figcaption tags check: displayed but as a paragraph

An eye

An artistic eye but does it wrap when exceeds the length of the image? With figure element

An eye

An artistic eye but does it wrap when exceeds the length of the image? With figure element

Headings and hgroup tag check: no effect for hgroup, inline for headings?

one

two: no auto horiz rule? Yes, there is

three

four

five
six

HEADING 1 SIZE COMPARED TO PARAGRAPH SIZE

PARAGRAPH SIZE COMPARED TO HEADING 1 SIZE

HEADING 2 SIZE COMPARED TO PARAGRAPH SIZE

PARAGRAPH SIZE COMPARED TO HEADING 2 SIZE

HEADING 3 SIZE COMPARED TO PARAGRAPH SIZE

PARAGRAPH SIZE COMPARED TO HEADING 3 SIZE

MATCH -> HEADING 4 SIZE EQUALS PARAGRAPH SIZE (bold )

MATCH -> PARAGRAPH SIZE EQUALS HEADING 4 SIZE (plain)

HEADING 5 SIZE COMPARED TO PARAGRAPH SIZE

PARAGRAPH SIZE COMPARED TO HEADING 5 SIZE

HEADING 6 SIZE COMPARED TO PARAGRAPH SIZE

PARAGRAPH SIZE COMPARED TO HEADING 6 SIZE

Takeaway: Consider h5 or ##### and h6 or ###### for a smaller font size block element.

ol, li, ul tags check: all worked, inline css?

  • unordered
  1. ordered

Pre tag check: exactly the same as code blocks BUT WITHOUT CODE HIGHLIGHTING

  function testFx() {
    console.log("Hello");
  }

Table tag test: inline css? Bold, italic and strikethough do not work in table cells, but they do in markdown tables!!!

Format Syntax
H1 #
H2 ##
H3 ###
Italics *italics*
Bold **Bold**
Strike thru ~~strikethrough~~
Horiz. Rule – – –
Block quote > text here
tfoot? tfoot?

Inline tags

55 tags total

Skipped inline tags

23 tags not even tested because they would not provide value, have no visual distinction, or have no application for a markdown file:

HTML Tag Tested? Displayed?
<abbr> NO N/A
<acronym> NO N/A
<area> NO N/A
<bdi> No N/A
<bdo> No N/A
<canvas> No N/A
<cite> No N/A
<data> NO N/A
<datalist> NO N/A
<input> No N/A
<label> No N/A
<map> No N/A
<meter> No N/A
<noscript> No N/A
<object> No N/A
<output> No N/A
<portal> No N/A
<progress> No N/A
<script> No N/A
<select> No N/A
<slot> No N/A
<template> No N/A
<textarea> No N/A
<tt> No N/A
<wbr> No N/A

Inline that did not work

13 tags tested but did not display:

HTML Tag Tested? Displayed? Correctly? Why Use?
<audio> YES NO No -
<big> Yes No No -
<button> Yes No No -
<dfn> Yes NO No -
<embed> Yes No No -
<iframe> Yes No No -
<mark> Yes NO ??? ???
math Yes Yes No -
<picture> yES ??? ??? ???
<small> Yes No No -
<svg> Yes No No -
<time> Yes No No -
<u> Yes No No -
<video> Yes No No -

Formatting text tags

8 TAGS FOR FORMATTING THAT WORKED:

HTML Tag Tested? Displayed? Correctly? Why Use?
<b> Yes Yes - Bold
<strong> Yes Yes - Bold
<s> Yes Yes - strikethru
<del> Yes Yes - strikethru
<em> Yes Yes - italic
<i> Yes Yes - italic
<var> Yes Yes No Italic
<ins> Yes Yes - Underline

Inline that worked

11 TAGS TESTED THAT WORK:

HTML Tag Tested? Displayed? Correctly? Why Use?
<a> Yes Yes Yes no inline or target
<br> YES YES YES Line breaks
<code> Yes Yes Yes NO NEED TO USE
<img> Yes Yes Yes Inline CSS?
<kbd> Yes Yes Yes Styling/Visual
<q> Yes Yes Yes Not sure
<ruby> Yes Yes - ???
<samp> Yes Yes Yes Monospaced font!
<span> Yes N/A Yes Uses?
<sub> Yes Yes Yes Subscript!
<sup> Yes Yes Yes Superscript!

Inline tag examples

Testing a tag: _blank, and inline styles DID NOT WORK

GOOGLE

Testing audio tag: visually appeared in VS Code preview but not on GitHub and does not function.

Your browser does not support the audio element.

b and strong tags test:
ALL DISPLAYED Bold text same as in markdown and how about the strong tag.

code tag test: SAME AS SINGLE BACKTICKS

This is a test of the code tag same as backticks I bet.

del & s tags test: BOTH WORKED

Strikethrough text same as in markdown and how about the s tag.

dfn, em and i tags test: em and i WORKED, dfn DID NOT

This is em tag italics same as in markdown and how about the i tag and the dfn tag.

A validator is a program that checks for syntax errors in code or documents.

Button tag does not work

embed tag test: DID NOT DISPLAY

ins and u tags test: u tag DID NOT WORK ins tag DID!

Will the u tag be displayed as underlined and what about the ins tag?

iframe tag test: DID NOT DISPLAY and for some reason displays the code unlike the other elements that just did not display.

<iframe src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik" id="inlineFrameExample" title="Inline Frame Example" width="300" height="200"> </iframe>

mark tag test: DID NOT DISPLAY

This is a mark tag, does it work?

ruby tag test: worked but not applicable to me

明日 (Ashita)

samp tag test: WORKED

This is regular text. SAMP monospaced text: Keyboard not found. Press F1 to continue and so is this.

small and big tags test: DID NOT DISPLAY

This is regular text. The content is small, but this isn't. This is Big deprecated text

sub and sup tags test: WORKED

H2 and 23 and o7

svg tag test: DID NOT DISPLAY

time tag test: DID NOT WORK

The Cure will be celebrating their 40th anniversary on July 7 in London's Hyde Park.

var tag test: ANOTHER VERSION OF ITALICS?

This is a test of the var tag, why would you use it?>

video tag test: DID NOT DISPLAY

q and kbd tags: WORKED

The q tag wraps text in quotes, the kbd tag wraps keyboard keys in a styled format like with CTRL or SHIFT.

Block tags that worked

Duplicates markdown: blockquote, h1 thru h6, hr, ol ul li, pre, table

Worked but unsure of use: details with summary, dl dt dd (indent), div

Is align an attribute? How do I find similar attributes like that?

Attributes:

  • blockquote: global
  • h1 thru h4: global, align (center, right)
  • h5 and h6: Same as above, very small font size!
  • ol, ul: global
  • li: global
  • pre: global
  • table: global
  • address: global
  • details, summary: global
  • dl, dt, dd: global
  • div: global
  • p: global, align (left, center, right)

Unless there is a way to display the tags differently, then I do not see the point of using pre, table, lists, or blockquote. Especially the table tag since there are a lot of tags you need to enter.

Inline tags that worked

Duplicates markdown: a, b and strong (BOLD), code, del and s (Strikethrough), em and i and var (Italics), img (width, align [left, center, right])

Worked: br (line break), ins (underline), sub and sup (Obvious), samp (Monospaced font), q (quotes), kbd (format)

Do they accept inline CSS?

Attributes:

  • a: target did not work, no title attribute, no style attribute - DON'T USE!
  • b, strong: global
  • br: global
  • code: global
  • del, s: na, global
  • em, i, var: global
  • img: align, width
  • ins: na
  • kbd: global
  • q: global
  • samp: global
  • span: global
  • sub, sup: global

Global attributes: id, class, draggable, style, title, tabindex, data-*, contenteditable, autofocus,

The only tags worth using:

  • div for dividers using - or _ or = or other characters (no use br tags)
  • p for align center or right
  • headings for anchor links with html entities or for center or right alignment
  • h5 and h6 for smaller than paragraph size block elements
  • br for line breaks of paragrpah text like the address tag
  • img to set width and height and align of center or right
  • ins for underline
  • kbd for keyboard chars or other keys
  • samp for monospaced font
  • sup and sub for super and subscript
  • maybe dl dt dd for the indent definition type of style
  • maybe span

Skip the following unless I can find inline styles or attributes that work with the following: blockquote, ol ul li, table, address, or a. As for bold, italic, and strikehrough, just use the markdown versions.

More testing

abbr tag: did not display correctly

You can use CSS to style your HTML.

Cite tag - italic link? did not display correctly

Nineteen Eighty-Four

Nineteen Eighty-Four (without link)


Paragraph align="center", 2 br tags above

Paragraph align="right"

div align="center"
div align="right"

Centered h2

Right h2

I tried some depricated tags hoping they may work in Markdown but the ones I tried did not work:

Depricated: <acronym>, <applet>, <basefont>, <bgsound>, <big>, <blink>, <center>, <content>, <dir>, <font>, <frame>, <frameset>, <hgroup>, <image>, <keygen>, <marquee>, <menuitem>, <nobr>, <noembed>, <noframes>, <plaintext>, <rb>, <rtc>, <shadow>, <spacer>, <strike>, <tt>, and <xmp>.