How to RENDER / DISPLAY HTML tags and mask their effect on the text it surrounds; A MUST READ FOR STEEMIT TUTORIAL MAKERS

Let's start from the familiar to the unfamiliar concept.
It is quite easy to use html tags or markdown styling to format your publications on steemit and during website design/programming; well, if you don't know how, do not be perturbed, I will release a tutorial on it a week from this publication. In the aforementioned case, the tags take effect on the text; for instance, if I want to bold or italize a text, the tags applied will only effect the emboldening on the text, but will never display the tags used to bolden the text.
Now what of a case where I want the reverse to be the case; I WANT TO RENDER THE TAGS and not leave an EFFECT on the text it surrounds. This is usually needed when performing tutorials that involve html tags or markdown styling.
A bunch of tutorials I have seen on steemit, usually, when performing these tutorials (tutorials that involve html tags or markdown styling) employ images as a solution to this challenge, since images cannot encode html effects. Well that's just a way of solving this problem, but IT IS NOT PROFESSIONAL!
The PROFESSIONAL WAY TO RESOLVE THIS CHALLENGE is to use a different character set to encode. In this case you use certain special entities. See the table below for a detailed list of the different entities for rendering your html tags.
Example:
To display this:
<b>Steemit rocks!</b>
Write this:
<b>Steemit rocks!</b>
Note:
If you write this instead : "<b>Steemit rocks!</b>" it will surely display this for you: Steemit rocks!
Observe that
< displayed (rendered) this <
also,
> displayed (rendered) this >
You could also render them using numbers; that is the one i personally prefer.
To display this:
<
Write this:
<
Also
To display this:
>
Write this:
>
See the tables below for a complete guide:
Table One:
Character | Entity | Decimal | Hex | Rendering in Your Browser | ||
---|---|---|---|---|---|---|
quotation mark = APL quote | " | " | " | " | " | " |
ampersand | & | & | & | & | & | & |
less-than sign | < | < | < | < | < | < |
greater-than sign | > | > | > | > | > | > |
Latin capital ligature OE | Œ | Œ | Œ | Œ | Œ | Œ |
Latin small ligature oe | œ | œ | œ | œ | œ | œ |
Latin capital letter S with caron | Š | Š | Š | Š | Š | Š |
Latin small letter s with caron | š | š | š | š | š | š |
Latin capital letter Y with diaeresis | Ÿ | Ÿ | Ÿ | Ÿ | Ÿ | Ÿ |
modifier letter circumflex accent | ˆ | ˆ | ˆ | ˆ | ˆ | ˆ |
small tilde | ˜ | ˜ | ˜ | ˜ | ˜ | ˜ |
en space |   |   |   | |||
em space |   |   |   | |||
thin space |   |   |   | |||
zero width non-joiner | ‌ | ‌ | ‌ | | | |
zero width joiner | ‍ | ‍ | ‍ | | | |
left-to-right mark | ‎ | ‎ | ‎ | | | |
right-to-left mark | ‏ | ‏ | ‏ | | | |
en dash | – | – | – | – | – | – |
em dash | — | — | — | — | — | — |
left single quotation mark | ‘ | ‘ | ‘ | ‘ | ‘ | ‘ |
right single quotation mark | ’ | ’ | ’ | ’ | ’ | ’ |
single low-9 quotation mark | ‚ | ‚ | ‚ | ‚ | ‚ | ‚ |
left double quotation mark | “ | “ | “ | “ | “ | “ |
right double quotation mark | ” | ” | ” | ” | ” | ” |
double low-9 quotation mark | „ | „ | „ | „ | „ | „ |
dagger | † | † | † | † | † | † |
double dagger | ‡ | ‡ | ‡ | ‡ | ‡ | ‡ |
per mille sign | ‰ | ‰ | ‰ | ‰ | ‰ | ‰ |
single left-pointing angle quotation mark | ‹ | ‹ | ‹ | ‹ | ‹ | ‹ |
single right-pointing angle quotation mark | › | › | › | › | › | › |
euro sign | € | € | € | € | € | € |
Table Two:
Numb | ASCII | ANSI | 8859 | UTF-8 | Description |
---|---|---|---|---|---|
32 | space | ||||
33 | ! | ! | ! | ! | exclamation mark |
34 | " | " | " | " | quotation mark |
35 | # | # | # | # | number sign |
36 | $ | $ | $ | $ | dollar sign |
37 | % | % | % | % | percent sign |
38 | & | & | & | & | ampersand |
39 | ' | ' | ' | ' | apostrophe |
40 | ( | ( | ( | ( | left parenthesis |
41 | ) | ) | ) | ) | right parenthesis |
42 | * | * | * | * | asterisk |
43 | + | + | + | + | plus sign |
44 | , | , | , | , | comma |
45 | - | - | - | - | hyphen-minus |
46 | . | . | . | . | full stop |
47 | / | / | / | / | solidus |
48 | 0 | 0 | 0 | 0 | digit zero |
49 | 1 | 1 | 1 | 1 | digit one |
50 | 2 | 2 | 2 | 2 | digit two |
51 | 3 | 3 | 3 | 3 | digit three |
52 | 4 | 4 | 4 | 4 | digit four |
53 | 5 | 5 | 5 | 5 | digit five |
54 | 6 | 6 | 6 | 6 | digit six |
55 | 7 | 7 | 7 | 7 | digit seven |
56 | 8 | 8 | 8 | 8 | digit eight |
57 | 9 | 9 | 9 | 9 | digit nine |
58 | : | : | : | : | colon |
59 | ; | ; | ; | ; | semicolon |
60 | < | < | < | < | less-than sign |
61 | = | = | = | = | equals sign |
62 | > | > | > | > | greater-than sign |
63 | ? | ? | ? | ? | question mark |
64 | @ | @ | @ | @ | commercial at |
65 | A | A | A | A | Latin capital letter A |
66 | B | B | B | B | Latin capital letter B |
67 | C | C | C | C | Latin capital letter C |
68 | D | D | D | D | Latin capital letter D |
69 | E | E | E | E | Latin capital letter E |
70 | F | F | F | F | Latin capital letter F |
71 | G | G | G | G | Latin capital letter G |
72 | H | H | H | H | Latin capital letter H |
73 | I | I | I | I | Latin capital letter I |
74 | J | J | J | J | Latin capital letter J |
75 | K | K | K | K | Latin capital letter K |
76 | L | L | L | L | Latin capital letter L |
77 | M | M | M | M | Latin capital letter M |
78 | N | N | N | N | Latin capital letter N |
79 | O | O | O | O | Latin capital letter O |
80 | P | P | P | P | Latin capital letter P |
81 | Q | Q | Q | Q | Latin capital letter Q |
82 | R | R | R | R | Latin capital letter R |
83 | S | S | S | S | Latin capital letter S |
84 | T | T | T | T | Latin capital letter T |
85 | U | U | U | U | Latin capital letter U |
86 | V | V | V | V | Latin capital letter V |
87 | W | W | W | W | Latin capital letter W |
88 | X | X | X | X | Latin capital letter X |
89 | Y | Y | Y | Y | Latin capital letter Y |
90 | Z | Z | Z | Z | Latin capital letter Z |
91 | [ | [ | [ | [ | left square bracket |
92 | \ | \ | \ | \ | reverse solidus |
93 | ] | ] | ] | ] | right square bracket |
94 | ^ | ^ | ^ | ^ | circumflex accent |
95 | _ | _ | _ | _ | low line |
96 | ` | ` | ` | ` | grave accent |
97 | a | a | a | a | Latin small letter a |
98 | b | b | b | b | Latin small letter b |
99 | c | c | c | c | Latin small letter c |
100 | d | d | d | d | Latin small letter d |
101 | e | e | e | e | Latin small letter e |
102 | f | f | f | f | Latin small letter f |
103 | g | g | g | g | Latin small letter g |
104 | h | h | h | h | Latin small letter h |
105 | i | i | i | i | Latin small letter i |
106 | j | j | j | j | Latin small letter j |
107 | k | k | k | k | Latin small letter k |
108 | l | l | l | l | Latin small letter l |
109 | m | m | m | m | Latin small letter m |
110 | n | n | n | n | Latin small letter n |
111 | o | o | o | o | Latin small letter o |
112 | p | p | p | p | Latin small letter p |
113 | q | q | q | q | Latin small letter q |
114 | r | r | r | r | Latin small letter r |
115 | s | s | s | s | Latin small letter s |
116 | t | t | t | t | Latin small letter t |
117 | u | u | u | u | Latin small letter u |
118 | v | v | v | v | Latin small letter v |
119 | w | w | w | w | Latin small letter w |
120 | x | x | x | x | Latin small letter x |
121 | y | y | y | y | Latin small letter y |
122 | z | z | z | z | Latin small letter z |
123 | { | { | { | { | left curly bracket |
124 | | | | | | | | | vertical line |
125 | } | } | } | } | right curly bracket |
126 | ~ | ~ | ~ | ~ | tilde |
127 | DEL | ||||
128 | € | euro sign | |||
129 | Â | Â | Â | NOT USED | |
130 | ‚ | single low-9 quotation mark | |||
131 | Æ’ | Latin small letter f with hook | |||
132 | „ | double low-9 quotation mark | |||
133 | … | horizontal ellipsis | |||
134 | †| dagger | |||
135 | ‡ | double dagger | |||
136 | ˆ | modifier letter circumflex accent | |||
137 | ‰ | per mille sign | |||
138 | Å | Latin capital letter S with caron | |||
139 | ‹ | single left-pointing angle quotation mark | |||
140 | Å’ | Latin capital ligature OE | |||
141 | Â | Â | Â | NOT USED | |
142 | Ž | Latin capital letter Z with caron | |||
143 | Â | Â | Â | NOT USED | |
144 | Â | Â | Â | NOT USED | |
145 | ‘ | left single quotation mark | |||
146 | ’ | right single quotation mark | |||
147 | “ | left double quotation mark | |||
148 | †| right double quotation mark | |||
149 | • | bullet | |||
150 | – | en dash | |||
151 | — | em dash | |||
152 | ˜ | small tilde | |||
153 | â„¢ | trade mark sign | |||
154 | Å¡ | Latin small letter s with caron | |||
155 | › | single right-pointing angle quotation mark | |||
156 | Å“ | Latin small ligature oe | |||
157 | Â | Â | Â | NOT USED | |
158 | ž | Latin small letter z with caron | |||
159 | Ÿ | Latin capital letter Y with diaeresis | |||
160 | no-break space | ||||
161 | ¡ | ¡ | ¡ | inverted exclamation mark | |
162 | ¢ | ¢ | ¢ | cent sign | |
163 | £ | £ | £ | pound sign | |
164 | ¤ | ¤ | ¤ | currency sign | |
165 | ¥ | ¥ | ¥ | yen sign | |
166 | ¦ | ¦ | ¦ | broken bar | |
167 | § | § | § | section sign | |
168 | ¨ | ¨ | ¨ | diaeresis | |
169 | © | © | © | copyright sign | |
170 | ª | ª | ª | feminine ordinal indicator | |
171 | « | « | « | left-pointing double angle quotation mark | |
172 | ¬ | ¬ | ¬ | not sign | |
173 | Â | Â | Â | soft hyphen | |
174 | ® | ® | ® | registered sign | |
175 | ¯ | ¯ | ¯ | macron | |
176 | ° | ° | ° | degree sign | |
177 | ± | ± | ± | plus-minus sign | |
178 | ² | ² | ² | superscript two | |
179 | ³ | ³ | ³ | superscript three | |
180 | ´ | ´ | ´ | acute accent | |
181 | µ | µ | µ | micro sign | |
182 | ¶ | ¶ | ¶ | pilcrow sign | |
183 | · | · | · | middle dot | |
184 | ¸ | ¸ | ¸ | cedilla | |
185 | ¹ | ¹ | ¹ | superscript one | |
186 | º | º | º | masculine ordinal indicator | |
187 | » | » | » | right-pointing double angle quotation mark | |
188 | ¼ | ¼ | ¼ | vulgar fraction one quarter | |
189 | ½ | ½ | ½ | vulgar fraction one half | |
190 | ¾ | ¾ | ¾ | vulgar fraction three quarters | |
191 | ¿ | ¿ | ¿ | inverted question mark | |
192 | À | À | À | Latin capital letter A with grave | |
193 | Ã | Ã | Ã | Latin capital letter A with acute | |
194 | Â | Â | Â | Latin capital letter A with circumflex | |
195 | Ã | Ã | Ã | Latin capital letter A with tilde | |
196 | Ä | Ä | Ä | Latin capital letter A with diaeresis | |
197 | Ã… | Ã… | Ã… | Latin capital letter A with ring above | |
198 | Æ | Æ | Æ | Latin capital letter AE | |
199 | Ç | Ç | Ç | Latin capital letter C with cedilla | |
200 | È | È | È | Latin capital letter E with grave | |
201 | É | É | É | Latin capital letter E with acute | |
202 | Ê | Ê | Ê | Latin capital letter E with circumflex | |
203 | Ë | Ë | Ë | Latin capital letter E with diaeresis | |
204 | Ì | Ì | Ì | Latin capital letter I with grave | |
205 | Ã | Ã | Ã | Latin capital letter I with acute | |
206 | ÃŽ | ÃŽ | ÃŽ | Latin capital letter I with circumflex | |
207 | Ã | Ã | Ã | Latin capital letter I with diaeresis | |
208 | Ã | Ã | Ã | Latin capital letter Eth | |
209 | Ñ | Ñ | Ñ | Latin capital letter N with tilde | |
210 | Ã’ | Ã’ | Ã’ | Latin capital letter O with grave | |
211 | Ó | Ó | Ó | Latin capital letter O with acute | |
212 | Ô | Ô | Ô | Latin capital letter O with circumflex | |
213 | Õ | Õ | Õ | Latin capital letter O with tilde | |
214 | Ö | Ö | Ö | Latin capital letter O with diaeresis | |
215 | × | × | × | multiplication sign | |
216 | Ø | Ø | Ø | Latin capital letter O with stroke | |
217 | Ù | Ù | Ù | Latin capital letter U with grave | |
218 | Ú | Ú | Ú | Latin capital letter U with acute | |
219 | Û | Û | Û | Latin capital letter U with circumflex | |
220 | Ü | Ü | Ü | Latin capital letter U with diaeresis | |
221 | Ã | Ã | Ã | Latin capital letter Y with acute | |
222 | Þ | Þ | Þ | Latin capital letter Thorn | |
223 | ß | ß | ß | Latin small letter sharp s | |
224 | Ã | Ã | Ã | Latin small letter a with grave | |
225 | á | á | á | Latin small letter a with acute | |
226 | â | â | â | Latin small letter a with circumflex | |
227 | ã | ã | ã | Latin small letter a with tilde | |
228 | ä | ä | ä | Latin small letter a with diaeresis | |
229 | å | å | å | Latin small letter a with ring above | |
230 | æ | æ | æ | Latin small letter ae | |
231 | ç | ç | ç | Latin small letter c with cedilla | |
232 | è | è | è | Latin small letter e with grave | |
233 | é | é | é | Latin small letter e with acute | |
234 | ê | ê | ê | Latin small letter e with circumflex | |
235 | ë | ë | ë | Latin small letter e with diaeresis | |
236 | ì | ì | ì | Latin small letter i with grave | |
237 | Ã | Ã | Ã | Latin small letter i with acute | |
238 | î | î | î | Latin small letter i with circumflex | |
239 | ï | ï | ï | Latin small letter i with diaeresis | |
240 | ð | ð | ð | Latin small letter eth | |
241 | ñ | ñ | ñ | Latin small letter n with tilde | |
242 | ò | ò | ò | Latin small letter o with grave | |
243 | ó | ó | ó | Latin small letter o with acute | |
244 | ô | ô | ô | Latin small letter o with circumflex | |
245 | õ | õ | õ | Latin small letter o with tilde | |
246 | ö | ö | ö | Latin small letter o with diaeresis | |
247 | ÷ | ÷ | ÷ | division sign | |
248 | ø | ø | ø | Latin small letter o with stroke | |
249 | ù | ù | ù | Latin small letter u with grave | |
250 | ú | ú | ú | Latin small letter u with acute | |
251 | û | û | û | Latin small letter with circumflex | |
252 | ü | ü | ü | Latin small letter u with diaeresis | |
253 | ý | ý | ý | Latin small letter y with acute | |
254 | þ | þ | þ | Latin small letter thorn | |
255 | ÿ | ÿ | ÿ | Latin small letter y with diaeresis |
I remain your humble friend and brother, Felix Obianozie (The Technopreneur). In case of any challenges or questions regarding this tutorials, converse with me on the comment section. Follow for more like this!

This post has received a 6.31 % upvote from @boomerang thanks to: @blessingchinaza
@boomerang distributes 100% of the SBD and up to 80% of the Curation Rewards to STEEM POWER Delegators. If you want to bid for votes or want to delegate SP please read the @boomerang whitepaper.
@blessingchinaza payed 11.0 SBD to @minnowbooster to buy a stealth upvote.

transaction-id ebaa1bfb87fdcbed8422bce1e7a02f84d67c2450
@stealthgoat
@blessingchinaza payed 11.5 SBD to @minnowbooster to buy a stealth upvote.

transaction-id 6f66a970df47493530c668780212ecd6b36cdb4f
@stealthgoat
you got up voted for $3.24 at 49% by @hamza-arshad
This post has received a 1.03 % upvote from @buildawhale thanks to: @blessingchinaza. Send at least 1 SBD to @buildawhale with a post link in the memo field for a portion of the next vote.
To support our daily curation initiative, please vote on my owner, @themarkymark, as a Steem Witness
@blessingchinaza payed 10.0 SBD to @minnowbooster to buy a stealth upvote.

transaction-id 9ddda78611616e17faff7284fe4171ddbbdd21d7
@stealthgoat
Your post had been curated by the @buildawhale team and mentioned here:
https://steemit.com/buildawhale/@buildawhale/buildawhale-curation-digest-12-19-17
Keep up the good work and original content, everyone appreciates it!