AppIcon in Images.xcassets.29pt 29pt*2 29pt*3 40pt*2 40pt*3 57pt57pt*2 60pt*2 60pt*3.Images.xcassetsic_launcher.png to folder [PrjDir]/android/app/src/main/res/mipmap-*.ic_launcher.png to mipmap-hdpi.ic_launcher.png to mipmap-mdpi.ic_launcher.png to mipmap-xhdpi.ic_launcher.png to mipmap-xxhdpi.
1
2
3
4
5
6
| <!-- Good --><ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul> |
1
2
3
4
5
| <!-- Good --><p>Hello world!</p><!-- Bad: uppercase tags --><P>Hello world!</P> |
1
2
3
4
5
6
7
8
| <!-- Good --><input type="text" /><!-- Bad: Not self-closing --><input type="text"><!-- Bad: Missing space before slash --><input type="text"/> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!-- Good --><p>Hello world!</p><ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul><!-- Bad: Missing closing tags --><p>Hello world!<ul> <li>Item 1 <li>Item 2 <li>Item 3</ul> |
1
2
3
4
5
6
7
8
| <!-- Good --><div class="dialog"><!-- Bad: Mixed case attribute name --><div Class="dialog"><!-- Bad: Uppercase attribute name --><div CLASS="dialog"> |
1
2
3
4
5
| <!-- Good --><div class="dialog"><!-- Bad: Spaces around equals sign --><div class = "dialog"> |
1
2
3
4
5
6
7
8
| <!-- Good --><div class="dialog"><!-- Bad: Missing quotes --><div class=dialog><!-- Bad: Using single quotes --><div class='dialog'> |
1
2
3
4
5
| <!-- Good --><input type="text" required="required" /><!-- Bad: Missing value--><input type="text" required /> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <!DOCTYPE html><html lang="en"><head> <title>Page title</title> <meta charset="UTF-8" /> <!-- other meta tags --> <!-- stylesheet and other link references --> <!-- JavaScript references --></head><body> <!-- content --></body></html> |
<html>element. The lang attribute must be set to the appropriate language for the page.<head>, which should contain <title>and <meta charset="UTF-8">as the first two children. After that may come, in order, additional meta information, stylesheet and other <link>references, and JavaScript references.<head>should bedirattribute on the <html>element:
1
2
| <!-- Good --><html lang="en" dir="rtl"> |
directionproperty for this purpose.<script>element. The typeattribute should not be included.
1
2
3
4
5
| <!-- Good --><script src="paypay.js"></script><!-- Bad: Using type --><script type="text/javascript" src="paypay.js"></script> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!-- Good --><script>var PAYPAL_ID = "asd098qawlkjasdf";</script><!-- Bad: Using type --><script type="text/javascript">var PAYPAL_ID = "asd098qawlkjasdf";</script><!-- Bad: Using HTML comments --><script><!--var PAYPAL_ID = "asd098qawlkjasdf";//--></script> |
1
2
| <!-- Bad: Uses inline event handler --><button onclick="doSomething()">Click Me</button> |
<link>element. The typeattribute should not be included and the mediaattribute isn't required unless the style sheet shouldn't be used by default (for example, if it only applies to print).
1
2
3
4
5
| <!-- Good --><link rel="stylesheet" href="paypal.css" /><!-- Bad: Using type --><link rel="stylesheet" type="text/css" href="paypay.css" /> |
<h1>element. Do not use <h1>inside of <section>elements.
1
2
3
4
5
6
7
8
9
10
11
12
| <!-- Good --><body> <h1>Page Title</h1></body><!-- Bad: Multiple h1s --><body> <h1>Page Title</h1> <section> <h1>Section Title</h1> </section></body> |
hrefmust contain either a valid URL for alternate content or an ID reference in the form#id, such as #close. In this case, the JavaScript attaching the event handler must also add a roleattribute equal to buttonto indicate to screen readers that the link is non-navigational.
1
2
3
4
5
6
7
8
| <!-- Good --><a href="#close">Close</a><!-- Bad: role should be added only by JavaScript --><a href="#close" role="button">Close</a><!-- Bad: href isn't a valid ID --><a href="#">Close</a> |
titleattribute should be used sparingly, and only in cases where it's providing additional information that isn't apparent from the markup. For instance, there is no reason to provide a titleattribute that duplicates a link's text or an image's altattribute. Thettitleattribute is required when using the patternattribute on an <input>element.
1
2
3
4
5
6
7
8
| <!-- Good --><input type="text" pattern="[\d]+" title="Numbers only" /><!-- Bad: Duplicating link content --><!-- Bad: Duplicating alt content --><img src="logo.png" alt="PayPal" title="PayPal" /> |
<caption> element that contains the title of the table. If this content should not be displayed on the page, use theaccessAid CSS class on the <caption> element. Each <th> element may have a scope attribute indicating whether it applies to a row or a column. Scope is optional but recommended.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!-- Good --><table> <caption>PayPal Balance</caption> <tr> <th scope="col">Currency</th> <th scope="col">Balance</th> </tr> <tr> <td>U.S. Dollar</td> <td>$1.00 USD</td> </tr></table><!-- Bad: missing caption, TH, scope --><table> <tr> <td>Currency</td> <td>Balance</td> </tr> <tr> <td>U.S. Dollar</td> <td>$1.00 USD</td> </tr></table> |
<label>element describing their use regardless of UI design. If necessary, you may hide the <label>using the accessAidclass. Do not put the input element inside of <label>.
1
2
3
4
5
6
7
8
9
10
| <!-- Good --><label for="userEmail">E-mail:</label> <input type="email"name="userEmail" id="userEmail" /><!-- Good --><label for="userEmail" class="accessAid">E-mail:</label> <inputtype="email" name="userEmail" id="userEmail" /><!-- Bad --><label>E-mail:<input type="email" name="userEmail" id="userEmail" /></label> |
<input>types may be used:buttoncheckboxemailfilehiddennumberradiosubmitteltexturl<input>types:colordaterangereset<fieldset>element to enclose the options and use the <legend>element to specify the text that corresponds to all radio buttons. Use an unordered list where each item is one radio button, and each radio button has its own<label>.
1
2
3
4
5
6
7
8
9
| <!-- Good --><fieldset> <legend>Payment for:</legend> <ul> <li><input type="radio" id="payment_type_service" value="S"> <label for="payment_type_service">Service/Other</label></li> <li><input type="radio" id="payment_type_goods" value="G"> <label for="payment_type_goods">Goods</label></li> <li><input type="radio" id="payment_type_cash" value="C"> <label for="payment_type_cash">Cash Advance</label></li> </ul></fieldset> |
<section>, <article>, <header>, <footer> and <nav>) for the main page grid.