Demos:Tests: Avoid self-closing HTML tags

mgol · mgol · commit 0977ea1b4835 · 2023-05-10T10:53:57.000+02:00
Self-closing tags are reported by newer versions of the htmllint Grunt plugin. They also don't make sense in our HTML files since they are not XHTML-compliant and they run in HTML mode anyway. Ref gh-2157
diff --git a/demos/autocomplete/xml.html b/demos/autocomplete/xml.html
@@ -47,10 +47,10 @@
 
 <div class="ui-widget">
 	<label for="birds">London matches: </label>
-	<input id="birds" />
+	<input id="birds">
 </div>
 
-<div class="ui-widget" style="margin-top:2em; font-family:Arial">
+<div class="ui-widget" style="margin-top:2em; font-family: Arial, sans-serif">
 	Result:
 	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
 </div>
diff --git a/demos/controlgroup/default.html b/demos/controlgroup/default.html
@@ -54,7 +54,7 @@ <h1>Controlgroup</h1>
 			<button>Book Now!</button>
 		</div>
 	</fieldset>
-	<br/>
+	<br>
 	<fieldset>
 		<legend>Rental Car</legend>
 		<div class="controlgroup-vertical">
diff --git a/demos/controlgroup/splitbutton.html b/demos/controlgroup/splitbutton.html
@@ -37,7 +37,7 @@ <h1>Split button</h1>
 			<option>Delete</option>
 		</select>
 	</div>
-	<br/>
+	<br>
 	<h3>Output:</h3>
 	<ul class="output"></ul>
 </div>
diff --git a/demos/datepicker/alt-field.html b/demos/datepicker/alt-field.html
@@ -16,7 +16,7 @@
 </head>
 <body>
 
-<p>Date: <input type="text" id="datepicker">&nbsp;<input type="text" id="alternate" size="30"/></p>
+<p>Date: <input type="text" id="datepicker">&nbsp;<input type="text" id="alternate" size="30"></p>
 
 <div class="demo-description">
 <p>Populate an alternate field with its own date format whenever a date is selected using the <code>altField</code> and <code>altFormat</code> options.  This feature could be used to present a human-friendly date for user selection, while passing a more computer-friendly date through for further processing.</p>
diff --git a/demos/datepicker/animation.html b/demos/datepicker/animation.html
@@ -16,9 +16,9 @@
 </head>
 <body>
 
-<p>Date: <input type="text" id="datepicker" size="30"/></p>
+<p>Date: <input type="text" id="datepicker" size="30"></p>
 
-<p>Animations:<br />
+<p>Animations:<br>
 	<select id="anim">
 		<option value="show">Show (default)</option>
 		<option value="slideDown">Slide down</option>
diff --git a/demos/datepicker/date-formats.html b/demos/datepicker/date-formats.html
@@ -16,9 +16,9 @@
 </head>
 <body>
 
-<p>Date: <input type="text" id="datepicker" size="30"/></p>
+<p>Date: <input type="text" id="datepicker" size="30"></p>
 
-<p>Format options:<br />
+<p>Format options:<br>
 	<select id="format">
 		<option value="mm/dd/yy">Default - mm/dd/yy</option>
 		<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
diff --git a/demos/datepicker/date-range.html b/demos/datepicker/date-range.html
@@ -42,9 +42,9 @@
 <body>
 
 <label for="from">From</label>
-<input type="text" id="from" name="from"/>
+<input type="text" id="from" name="from">
 <label for="to">to</label>
-<input type="text" id="to" name="to"/>
+<input type="text" id="to" name="to">
 
 <div class="demo-description">
 <p>Select the date range to search for.</p>
diff --git a/demos/datepicker/localization.html b/demos/datepicker/localization.html
@@ -17,7 +17,7 @@
 </head>
 <body>
 
-<p>Date: <input type="text" id="datepicker"/>&nbsp;
+<p>Date: <input type="text" id="datepicker">&nbsp;
 	<select id="locale">
 		<option value="ar">Arabic (&#8235;(&#1575;&#1604;&#1593;&#1585;&#1576;&#1610;&#1577;</option>
 		<option value="zh-TW">Chinese Traditional (&#32321;&#39636;&#20013;&#25991;)</option>
diff --git a/demos/draggable/snap-to.html b/demos/draggable/snap-to.html
@@ -26,7 +26,7 @@
 	<p>I'm a snap target</p>
 </div>
 
-<br style="clear:both" />
+<br style="clear:both">
 
 <div id="draggable" class="draggable ui-widget-content">
 	<p>Default (snap: true), snaps to all other draggable elements</p>
diff --git a/demos/droppable/photo-manager.html b/demos/droppable/photo-manager.html
@@ -139,25 +139,25 @@
 <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
 	<li class="ui-widget-content ui-corner-tr">
 		<h5 class="ui-widget-header">High Tatras</h5>
-		<img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
+		<img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72">
 		<a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
 		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
 	</li>
 	<li class="ui-widget-content ui-corner-tr">
 		<h5 class="ui-widget-header">High Tatras 2</h5>
-		<img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
+		<img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72">
 		<a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
 		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
 	</li>
 	<li class="ui-widget-content ui-corner-tr">
 		<h5 class="ui-widget-header">High Tatras 3</h5>
-		<img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
+		<img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72">
 		<a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
 		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
 	</li>
 	<li class="ui-widget-content ui-corner-tr">
 		<h5 class="ui-widget-header">High Tatras 4</h5>
-		<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
+		<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72">
 		<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
 		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
 	</li>
diff --git a/demos/slider/range-vertical.html b/demos/slider/range-vertical.html
@@ -24,7 +24,7 @@
 
 <p>
 	<label for="amount">Target sales goal (Millions):</label>
-	<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;" />
+	<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
 </p>
 
 <div id="slider-range" style="height:250px;"></div>
diff --git a/demos/slider/range.html b/demos/slider/range.html
@@ -25,7 +25,7 @@
 
 <p>
 	<label for="amount">Price range:</label>
-	<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;" />
+	<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
 </p>
 
 <div id="slider-range"></div>
diff --git a/demos/slider/rangemax.html b/demos/slider/rangemax.html
@@ -24,7 +24,7 @@
 
 <p>
 	<label for="amount">Minimum number of bedrooms:</label>
-	<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;" />
+	<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
 </p>
 <div id="slider-range-max"></div>
 
diff --git a/demos/slider/rangemin.html b/demos/slider/rangemin.html
@@ -24,7 +24,7 @@
 
 <p>
 	<label for="amount">Maximum price:</label>
-	<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;" />
+	<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
 </p>
 
 <div id="slider-range-min"></div>
diff --git a/demos/slider/slider-vertical.html b/demos/slider/slider-vertical.html
@@ -25,7 +25,7 @@
 
 <p>
 	<label for="amount">Volume:</label>
-	<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;" />
+	<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
 </p>
 
 <div id="slider-vertical" style="height:200px;"></div>
diff --git a/demos/slider/steps.html b/demos/slider/steps.html
@@ -24,7 +24,7 @@
 
 <p>
 	<label for="amount">Donation amount ($50 increments):</label>
-	<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;" />
+	<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
 </p>
 
 <div id="slider"></div>
diff --git a/demos/spinner/overflow.html b/demos/spinner/overflow.html
@@ -25,7 +25,7 @@
 
 <p>
 	<label for="spinner">Select a value:</label>
-	<input id="spinner" name="value" />
+	<input id="spinner" name="value">
 </p>
 
 <div class="demo-description">
diff --git a/tests/unit/checkboxradio/checkboxradio.html b/tests/unit/checkboxradio/checkboxradio.html
@@ -43,37 +43,37 @@
 <input type="checkbox" id="check"><label for="check">Toggle</label>
 <input type="checkbox" id="check2"><label for="check2">Checkbox</label>
 <label for="checkbox-method-refresh" id="checkbox-method-refresh-label">checkbox refresh</label>
-<input type="checkbox" id="checkbox-method-refresh"/>
+<input type="checkbox" id="checkbox-method-refresh">
 <label for="checkbox-method-destroy" class="bar" id="checkbox-method-destroy-label">checkbox refresh</label>
-<input type="checkbox" class="foo" id="checkbox-method-destroy"/>
+<input type="checkbox" class="foo" id="checkbox-method-destroy">
 <label for="checkbox-method-disable">checkbox refresh</label>
-<input type="checkbox" class="foo" id="checkbox-method-disable"/>
+<input type="checkbox" class="foo" id="checkbox-method-disable">
 
 <label for="radio-method-refresh" id="radio-method-refresh-label">radio refresh</label>
-<input type="radio" id="radio-method-refresh"/>
+<input type="radio" id="radio-method-refresh">
 <label for="radio-method-destroy" class="bar" id="radio-method-destroy-label">radio refresh</label>
-<input type="radio" class="foo" id="radio-method-destroy"/>
+<input type="radio" class="foo" id="radio-method-destroy">
 <label for="radio-method-disable">radio refresh</label>
-<input type="radio" class="foo" id="radio-method-disable"/>
+<input type="radio" class="foo" id="radio-method-disable">
 
 <label for="checkbox-option-disabled">checkbox disabled</label>
-<input type="checkbox" class="foo" id="checkbox-option-disabled"/>
+<input type="checkbox" class="foo" id="checkbox-option-disabled">
 <label for="checkbox-option-icon">checkbox icon</label>
-<input type="checkbox" class="foo" id="checkbox-option-icon"/>
-<label for="checkbox-option-label">checkbox label<input type="checkbox" class="foo" id="checkbox-option-label"/></label>
+<input type="checkbox" class="foo" id="checkbox-option-icon">
+<label for="checkbox-option-label">checkbox label<input type="checkbox" class="foo" id="checkbox-option-label"></label>
 <label>
-	<input type="checkbox" id="label-with-no-for"/>
+	<input type="checkbox" id="label-with-no-for">
 </label>
 <label>
-	<input type="checkbox" id="label-with-no-for-with-html"/>
+	<input type="checkbox" id="label-with-no-for-with-html">
 	<strong>Hi</strong>, <em>I'm a label</em>
 </label>
 <label>
-	<input type="checkbox" id="label-with-no-for-with-text"/>
+	<input type="checkbox" id="label-with-no-for-with-text">
 	Hi, I'm a label
 </label>
 <label>
-	<input type="checkbox" id="label-with-no-for-with-html-like-text"/>
+	<input type="checkbox" id="label-with-no-for-with-html-like-text">
 	&lt;em&gt;Hi, I'm a label&lt;/em&gt;
 </label>
 
diff --git a/tests/unit/controlgroup/controlgroup.html b/tests/unit/controlgroup/controlgroup.html
@@ -20,7 +20,7 @@
 			<option>Slow</option>
 		</select>
 		<label for="checkbox">Checkbox</label>
-		<input type="checkbox" value="checkbox" id="checkbox" />
+		<input type="checkbox" value="checkbox" id="checkbox">
 		<select>
 			<option>Fast</option>
 			<option>Medium</option>
diff --git a/tests/visual/effects/scale.html b/tests/visual/effects/scale.html
@@ -152,7 +152,7 @@
 				<option value="center">center</option>
 				<option value="right">right</option>
 			</select>
-		</label><br />
+		</label><br>
 		<label id="current">jQuery UI Scale Animation Test</label>
 		<button id="cyclePrev">Back</button>
 		<button id="doAnim">Run Animation</button>
