Edit documentation: `DR: img tag`

[JessicaLucindaCheng]

Dependency

• [ ] #4364
• [x] #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 https://github.com/hackforla/website/issues/4363#issuecomment-1925799436

Resources/Instructions

• Comment with content in it: https://github.com/hackforla/website/issues/4363#issuecomment-1925799436
• 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]

Issue

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

Problem Statement

In our current codebase, we use both <img...> and <img.../>.

Example of code with <img...>: https://github.com/hackforla/website/blob/706d7ce3628f9958cda525201c7c444d3d57d21b/pages/404.html#L12

Example of code with <img.../> https://github.com/hackforla/website/blob/706d7ce3628f9958cda525201c7c444d3d57d21b/pages/donate.html#L18

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

[github-actions[bot]]

Hi @JessicaLucindaCheng, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[JessicaLucindaCheng]

Once this issue is in the New Issue Approval column, a dev lead needs to review the issue and edit this issue so that it is ready for a PM to prioritize it.

[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!

[github-actions[bot]]

Hi @vraer, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[JessicaLucindaCheng]

• Since Vanessa (GitHub: vraer) already added the updated decision record as part of the pr https://github.com/hackforla/website-wiki/pull/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.

[github-actions[bot]]

Hi @JessicaLucindaCheng, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[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

[JessicaLucindaCheng]

Tasks

• [x] In a new comment below, copy the current version of the DR: img tag from https://github.com/hackforla/website-wiki/blob/main/docs/decision-records/adopted/standardize-html-img-tag.md?plain=1
• [x] Then, replace permalinks to code with an example of the code using code blocks
• [x] In https://github.com/hackforla/website/wiki/How-to-Contribute-to-the-Wiki, add this to the list with a note that it is a re-write changing the permalinks to code in code blocks

[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 (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 https://github.com/hackforla/website/issues/4363#issuecomment-1925799436 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