[OH-Dev] [issue971] Need to find a replacement for the <tt> tag, as it is not available in HTML5

[eeshangarg]

New submission from eeshangarg <jerryguitarist at gmail.com>:

While working on some front-end HTML and CSS issues at the PyCon 2014 sprints, I
found that the OpenHatch website makes extensive use of the <tt> tag (which has
been deprecated in HTML5) for representing text that needs to look like code. tt
stands for 'teletype text'.

The Front-end style guide <https://openhatch.org/wiki/Front-end_style_guide>,
has more information for why a tag like the <tt> tag is needed. Please scroll to
the section "Usage instructions for the code, pre and tt tags".

paulproteus and other developers at the sprint advised me to come up with a
replacement or fix for this issue. 

I found two tags, namely <samp> and <kbd>, which could act as valid replacements
for the <tt> tag, and which are available in HTML5. <samp> is generally used to
represent sample output whereas <kbd> is generally used for keyboard input to be
typed in by the user. Text enclosed within <samp> and <kbd> looks identical to
text enclosed within <tt>.

A list of all HTML elements, and whether they are available in HTML5 or not, can
be found at <http://en.wikipedia.org/wiki/HTML_element#List_of_all_HTML_elements>.

I also tested these tags locally, by replacing the <tt> tags on the medium hints
of the 'Patching individual files' in the diffpatch training mission with <kbd>
and <samp>. Associated screen shots before and after replacing the tags are
attached. As you can see, there is no difference between the output of these
three tags.

Another solution that I can think of is to change the existing CSS properties of
either the <pre> or the <code> tag to handle formatting that the <tt> tag
currently handles (more info in the Front-end style guide, link above). 

So, I would really appreciate it if someone who knows about HTML standards could
give me some guidance on how to handle this task or if there is a better way to
do this. Also, I would be willing to put in the time and effort to work on and
resolve this task if someone could just point me in the right direction. Thanks!

----------
files: hints_after_replacing_tt_with_samp.png
messages: 4296
nosy: eeshangarg, paulproteus
priority: bug
status: unread
title: Need to find a replacement for the <tt> tag, as it is not available in HTML5

__________________________________________
Roundup issue tracker <bugs at openhatch.org>
<https://openhatch.org/bugs/issue971>
__________________________________________
-------------- next part --------------
A non-text attachment was scrubbed...
Name: hints_after_replacing_tt_with_samp.png
Type: image/png
Size: 177260 bytes
Desc: not available
URL: <http://lists.openhatch.org/pipermail/devel/attachments/20140429/865117d9/attachment-0001.png>