Edit documentation: DR: img tag

[JessicaLucindaCheng]

Dependency

• Instructions for how to contribute to the website-wiki repo #4364
• Updating Wiki: Move Current Wiki to New Repository #3636
• Additional issues that need to be completed as determined by the Technical Lead before contributions can start in the website-wiki repo

Overview

We need to edit a decision record DR: img tag so that it has content that is helpful in understanding our standards for img HTML tags.

Action Items

• Edit the DR: img tag in the website-wiki with the content in Edit documentation: DR: img tag #4363 (comment)

Resources/Instructions

• Comment with content in it: Edit documentation: DR: img tag #4363 (comment)
• Link to the DR: img tag in the website-wiki repo: https://github.com/hackforla/website-wiki/blob/main/docs/decision-records/adopted/standardize-html-img-tag.md?plain=1

[JessicaLucindaCheng]

• Since Vanessa (GitHub: vraer) already added the updated decision record as part of the pr Refactor Decision Record directory structure and file names website-wiki#8, I went ahead and assigned Vanessa to this issue since she basically completed the work for this issue.
• I know this bypasses the dependencies in the issue but I think this is okay. I had put the dependencies thinking that a junior developer would eventually make the edits. However, since Vanessa is a team lead and already added it as part of her pr, I think this issue is completed.

[JessicaLucindaCheng]

Issue

None

Problem Statement

In our codebase, we are not consistent with whether we apply an ending slash for img HTML tags.

Example of code with <img...>:

<img src="/assets/images/404.svg" alt="404">

Example of code with <img.../>

<img class="donate-banner-icon" src="/assets/images/donate/solidarity-pana.svg" alt="" />

Potential Solution

Use the img HTML tag without an ending slash meaning <img...> (Source 1).

Feasibility Determination

This is feasible because we only use HTML. An ending slash in an img tag is needed for XHTML and XML (Source 2), which we don't use.

Sources

1. https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element
2. https://stackoverflow.com/a/15149657

[JessicaLucindaCheng]

@ExperimentsInHonesty

@JessicaLucindaCheng will revise the draft in a comment below and then add this to the list of pages that need to get added to the wiki, keeping in mind that its actually a re-write

• I have revised the draft in Edit documentation: DR: img tag #4363 (comment) and changed the permalinks to code blocks. Also, I have added this revision to the list for it to be changed in the website-wiki repo