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

[vraer]

@JessicaLucindaCheng I've added this decision record to my forked wiki repo in the sandbox-wiki branch.

• Decision Record directory: https://github.com/vraer/website-wiki/tree/sandbox-wiki/docs/DR.
• img tag dr: https://github.com/vraer/website-wiki/blob/sandbox-wiki/docs/DR/adopted/HTML-img-tag-standardization.md

After talking to @ExperimentsInHonesty yesterday, I tried updating the ci.yml and mkdocs.yaml files with the necessary plugins and markdown extensions for the decision records to display properly on the wiki. Unfortunately, things didn't go as planned, so that needs fixing, but you can still get the gist if you take a look.

Feel free to share any thoughts or suggestions you might have.

[JessicaLucindaCheng]

@vraer Thanks for adding the DR to the wiki and making edits that improved upon what I wrote! Looking at the Markdown file, the content LGTM!

[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