860:
that will produce on-going dynamic behaviour after the page is rendered. For example, if rolling the mouse over a 'Buy now' link is meant to make the price, elsewhere on the page, become emphasized, JavaScript code can do this, but JavaScript needs to identify the price element, wherever it is in the
896:
programming technique, where, for example, clicking a hypertext link may cause JavaScript code to retrieve the text for a new price quotation to display in place of the current one within the page, without re-loading the whole page. When the new text arrives back from the server, the JavaScript must
770:
element to signify emphasis (appearing as text in italics), and introduces a more appropriate class name. By the correct use of CSS, such 'warnings' may be rendered in a red, bold font on a screen, but when printed out they may be omitted, as by then it is too late to do anything about them. Perhaps
1530:
element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this
567:
was introduced to mark up any inline span of text, because 'a generic container is needed to carry the LANG and BIDI attributes in cases where no other element is appropriate.' It still serves that general purpose, although a much richer range of semantic elements have been defined since then, and
699:
For these reasons, and in support of a more semantic web, attributes attached to elements within HTML should describe their semantic purpose, rather than merely their intended display properties in one particular medium. For example, the HTML in
608:
element contains a piece of information inline with the surrounding content, and may only contain other inline-level components. In practice, the default display of the elements can be changed by the use of
688:
attributes in conjunction with CSS to apply layout, typographic, color, and other presentation attributes to parts of the content. CSS does not just apply to visual styling: when spoken out loud by a
779:
This kind of grouping and labelling of parts of the page content might be introduced purely to make the page more semantically meaningful in general terms. It is impossible to say how the
787:
designed today may still be in use when information systems that we cannot yet imagine are trawling, processing, and classifying the web. Even today's search engines such as
771:
when spoken they should be given extra stress, and a small reduction in speech-rate. The second example is semantically richer markup, rather than merely presentational.
852:
Once the HTML or XHTML markup is delivered to a page-visitor's client browser, there is a chance that client-side code will need to navigate the internal structure (or
1361:
134:
427:
defines a 'division' of the document, a block-level item that is more distinct from elements above and below it than a span of inline material.
561:
in 1995. However, it was not until HTML 4.01 that it became part of the HTML language, appearing in the HTML 4 W3C Working Draft in 1997.
1474:
There is no simple way to find all the unidentified lists in a site. They can be marked up in dozens of different ways: as paragraphs,
260:
667:
1467:
802:
project designed to make the whole web increasingly useful and meaningful to today's and the future's information systems.
1490:
instead of the current wrapper element. For example to remove the bullets add this rule to the page's CSS stylesheet:
1574:
604:
block visually isolates a section of a document on the page, and may contain other block-level components. The
291:
1506:
613:(CSS), although the permitted contents of each element may not be changed. For example, regardless of CSS, a
331:, so that they are identifiable when a unique classification is necessary. Where other HTML elements such as
265:
222:
161:
1292:
129:
1365:
1252:
elements. The use of semantically appropriate elements provides better structure to HTML documents than
795:
217:
1336:
1302:
1288:
857:
663:
610:
414:
119:
853:
418:
151:
554:
446:
394:
156:
73:
1569:
402:
8:
1478:
s, tables, . Once you've found a list, marking up the individual items is easy. Just use
791:
and others use proprietary information processing algorithms of considerable complexity.
589:
1589:
1433:
1412:
893:
284:
173:
856:) of the web page. The most common reason for this is that the page is delivered with
813:
es. For example, microformats-aware software might automatically find an element like
1463:
584:. The most notable difference is how the elements are displayed. In standard HTML, a
558:
352:
917:
139:
692:, CSS styling can affect speech-rate, stress, richness and even position within a
356:
309:
100:
41:
1197:
952:
is a vital part of HTML and XHTML markup. However, they are sometimes overused.
1283:
1213:
1205:
780:
651:
597:
368:
244:
107:
51:
405:
portion of a document such as a few paragraphs, or an image with its caption.
1594:
1583:
1387:
929:
689:
277:
146:
112:
95:
1544:
765:
1502:
1313:
1278:
956:
897:
identify the exact region on the page to replace with the new information.
806:
799:
693:
632:
elements are used purely to imply a logical grouping of enclosed elements.
340:
328:
324:
85:
80:
31:
959:
structures available in HTML may be preferable to a home-made mixture of
313:
239:
234:
124:
68:
900:
Automatic testing tools also may need to navigate web page markup using
1308:
933:
183:
178:
56:
46:
435:
For example, to make a certain part of text inside a paragraph red,
921:
784:
409:
stands for division. The elements allow semantic attributes (e.g.
568:
there are also many more attributes that may need to be applied.
1501:
788:
229:
205:
1507:"Adding structure to forms: the FIELDSET and LEGEND elements"
1297:
1273:
1233:
925:
210:
200:
195:
188:
63:
36:
1362:"HTML5: A vocabulary and associated APIs for HTML and XHTML"
1337:"HTML5: A vocabulary and associated APIs for HTML and XHTML"
1236:
introduced several new elements; a few examples include the
397:
portion of a document, for example words within a sentence.
1269:
421:(e.g., animation, hiding, and augmentation) to be applied.
359:
for authors. Where no existing HTML element is applicable,
305:
22:
1514:
920:, this may include the use of page testing tools such as
844:
and allow for automatic dialing of the telephone number.
557:
in the internationalization working group's second draft
166:
1182:
Other examples of the semantic use of HTML rather than
1413:"HTML/Elements/span - Web Education Community Group"
809:
movement is an attempt to build an idea of semantic
571:
1202:elements to identify such divisions and the use of
367:can valuably represent parts of a document so that
928:family, and load or stress testing tools such as
1581:
339:(emphasis), and so on, accurately represent the
16:HTML elements used to define parts of a document
1364:. W3C. 4.5 Text-level semantics. Archived from
617:element may not contain block-level children.
1194:elements to divide up a web form, the use of
285:
1570:Grouping elements: the DIV and SPAN elements
1542:
1356:
1354:
861:markup. The following markup would suffice:
312:for documents designed to be displayed in a
1575:Create a Diagonal or Slanted Div using CSS
1331:
1329:
1075:... is usually preferable instead of this:
783:will develop in years and decades to come.
292:
278:
1351:
451:(web code used to add formatting to text)
417:styling (e.g., color and typography), or
1531:element makes documents more accessible.
1326:
576:There are multiple differences between
327:are elements used to define parts of a
1582:
1457:
668:Separation of content and presentation
343:of the content, the additional use of
1505:; Arnaud Le Hors; Ian Jacobs (1999).
635:There are three main reasons to use
458:(as seen by visitors of the webpage)
1434:"HTML 5.1: 4. The elements of HTML"
847:
774:
657:
13:
620:
14:
1606:
1563:
1405:
1380:
1230:elements used for such purposes.
572:Differences and default behaviour
1462:. Addison Wesley. p. 184.
1458:Harold, Elliotte Rusty (2008).
862:
814:
798:(W3C) has been running a major
732:
701:
1545:"HTML5 differences from HTML4"
1536:
1495:
1451:
1426:
731:is semantically weak, whereas
1:
1319:
266:Comparison of browser engines
1190:elements include the use of
7:
1543:van Kesteren, Anne (2010).
1339:. W3C. 4.4 Grouping content
1293:Help:Cascading Style Sheets
1263:
430:
10:
1611:
939:
918:dynamically generated HTML
661:
553:element was introduced to
544:
892:. Another example is the
796:World Wide Web Consortium
439:can be used as follows:
261:Document markup languages
1077:
972:
509:"color: blue;"
464:
1511:HTML 4.01 Specification
1303:ContextObjects in Spans
480:"color: red;"
355:for readers and easier
1388:"HTML <div> Tag"
1289:Cascading Style Sheets
858:client-side JavaScript
664:Cascading Style Sheets
611:Cascading Style Sheets
1218:elements rather than
944:The judicious use of
854:Document Object Model
419:client-side scripting
351:tags leads to better
152:Document Object Model
794:For some years, the
715:"red-bold"
157:Browser Object Model
970:For example, this:
746:"warning"
590:block-level element
130:Character encodings
924:, a member of the
751:password too short
720:password too short
680:elements to carry
1469:978-0-321-50363-3
1210:to identify form
876:"price"
672:It is common for
542:
541:
302:
301:
1602:
1557:
1556:
1554:
1552:
1540:
1534:
1533:
1529:
1523:
1521:
1499:
1493:
1492:
1489:
1485:
1481:
1477:
1460:Refactoring HTML
1455:
1449:
1448:
1446:
1444:
1430:
1424:
1423:
1421:
1420:
1409:
1403:
1402:
1400:
1398:
1384:
1378:
1377:
1375:
1373:
1368:on 1 August 2015
1358:
1349:
1348:
1346:
1344:
1333:
1259:
1255:
1251:
1247:
1243:
1239:
1229:
1225:
1221:
1217:
1209:
1201:
1193:
1192:<fieldset>
1189:
1185:
1178:
1175:
1172:
1162:
1159:
1156:
1153:
1150:
1147:
1143:
1140:
1137:
1134:
1131:
1128:
1124:
1121:
1118:
1115:
1112:
1109:
1105:
1102:
1099:
1096:
1093:
1092:"menu"
1090:
1087:
1084:
1081:
1057:
1054:
1051:
1048:
1045:
1042:
1038:
1035:
1032:
1029:
1026:
1023:
1019:
1016:
1013:
1010:
1007:
1004:
1000:
997:
994:
991:
988:
987:"menu"
985:
982:
979:
976:
966:
962:
951:
947:
932:when applied to
915:
911:
907:
903:
891:
890:
887:
884:
880:
877:
874:
871:
868:
865:
848:Access from code
843:
842:
839:
836:
832:
829:
826:
823:
820:
817:
812:
775:Semantic clarity
769:
761:
760:
757:
754:
750:
747:
744:
741:
738:
735:
730:
729:
726:
723:
719:
716:
713:
710:
707:
704:
687:
683:
679:
675:
658:Styling with CSS
650:
646:
642:
638:
631:
627:
616:
607:
603:
595:
587:
583:
579:
566:
552:
537:
533:
523:
520:
517:
513:
510:
507:
504:
501:
498:
494:
491:
488:
484:
481:
478:
475:
472:
469:
459:
452:
442:
441:
438:
426:
412:
408:
400:
392:
387:can be applied.
386:
382:
378:
374:
366:
362:
350:
346:
338:
334:
323:
319:
294:
287:
280:
245:Rendering engine
135:named characters
19:
18:
1610:
1609:
1605:
1604:
1603:
1601:
1600:
1599:
1580:
1579:
1566:
1561:
1560:
1550:
1548:
1541:
1537:
1527:
1519:
1517:
1500:
1496:
1487:
1483:
1479:
1475:
1470:
1456:
1452:
1442:
1440:
1432:
1431:
1427:
1418:
1416:
1411:
1410:
1406:
1396:
1394:
1386:
1385:
1381:
1371:
1369:
1360:
1359:
1352:
1342:
1340:
1335:
1334:
1327:
1322:
1266:
1257:
1253:
1249:
1245:
1241:
1237:
1227:
1223:
1219:
1211:
1203:
1195:
1191:
1187:
1183:
1180:
1179:
1176:
1173:
1170:
1166:which produces
1164:
1163:
1160:
1157:
1154:
1151:
1148:
1145:
1141:
1138:
1135:
1132:
1129:
1126:
1122:
1119:
1116:
1113:
1110:
1107:
1103:
1100:
1097:
1094:
1091:
1088:
1085:
1082:
1079:
1061:which produces
1059:
1058:
1055:
1052:
1049:
1046:
1043:
1040:
1036:
1033:
1030:
1027:
1024:
1021:
1017:
1014:
1011:
1008:
1005:
1002:
998:
995:
992:
989:
986:
983:
980:
977:
974:
964:
960:
949:
945:
942:
916:attributes. In
913:
909:
905:
901:
888:
885:
882:
878:
875:
872:
869:
866:
863:
850:
840:
837:
834:
830:
828:"tel"
827:
824:
821:
818:
815:
810:
777:
763:
758:
755:
752:
748:
745:
742:
739:
736:
733:
727:
724:
721:
717:
714:
711:
708:
705:
702:
685:
681:
677:
673:
670:
660:
648:
644:
640:
636:
629:
625:
623:
621:Practical usage
614:
605:
601:
593:
585:
581:
577:
574:
564:
550:
547:
535:
531:
529:
526:
525:
521:
518:
515:
511:
508:
505:
502:
499:
496:
492:
489:
486:
482:
479:
476:
473:
470:
467:
457:
456:
455:Rendered output
450:
449:
436:
433:
424:
410:
406:
398:
390:
384:
380:
376:
372:
369:HTML attributes
364:
360:
357:maintainability
348:
344:
336:
332:
321:
317:
310:markup language
308:, the standard
298:
17:
12:
11:
5:
1608:
1598:
1597:
1592:
1578:
1577:
1572:
1565:
1564:External links
1562:
1559:
1558:
1535:
1494:
1468:
1450:
1425:
1404:
1379:
1350:
1324:
1323:
1321:
1318:
1317:
1316:
1311:
1306:
1300:
1295:
1286:
1284:HTML attribute
1281:
1276:
1265:
1262:
1250:<figure>
1242:<footer>
1238:<header>
1169:
1168:
1078:
1073:
1072:
1069:
1066:
973:
941:
938:
849:
846:
781:World Wide Web
776:
773:
659:
656:
622:
619:
598:inline element
573:
570:
546:
543:
540:
539:
527:
465:
461:
460:
453:
432:
429:
393:represents an
300:
299:
297:
296:
289:
282:
274:
271:
270:
269:
268:
263:
255:
254:
250:
249:
248:
247:
242:
237:
232:
227:
226:
225:
215:
214:
213:
208:
203:
193:
192:
191:
181:
176:
171:
170:
169:
159:
154:
149:
144:
143:
142:
137:
127:
122:
117:
116:
115:
108:HTML attribute
105:
104:
103:
98:
93:
88:
78:
77:
76:
74:Mobile Profile
71:
61:
60:
59:
54:
49:
44:
34:
26:
25:
15:
9:
6:
4:
3:
2:
1607:
1596:
1593:
1591:
1588:
1587:
1585:
1576:
1573:
1571:
1568:
1567:
1546:
1539:
1532:
1516:
1512:
1508:
1504:
1503:Raggett, Dave
1498:
1491:
1471:
1465:
1461:
1454:
1439:
1435:
1429:
1414:
1408:
1393:
1389:
1383:
1367:
1363:
1357:
1355:
1338:
1332:
1330:
1325:
1315:
1312:
1310:
1307:
1304:
1301:
1299:
1296:
1294:
1290:
1287:
1285:
1282:
1280:
1277:
1275:
1271:
1268:
1267:
1261:
1235:
1231:
1228:<table>
1215:
1207:
1199:
1167:
1076:
1070:
1067:
1064:
1063:
1062:
971:
968:
958:
953:
937:
935:
931:
930:Apache JMeter
927:
923:
919:
898:
895:
859:
855:
845:
808:
803:
801:
797:
792:
790:
786:
782:
772:
767:
697:
695:
691:
690:voice browser
669:
665:
655:
653:
633:
618:
612:
599:
591:
569:
562:
560:
556:
528:
463:
462:
454:
448:
444:
443:
440:
428:
422:
420:
416:
404:
401:represents a
396:
388:
370:
358:
354:
353:accessibility
342:
335:(paragraph),
330:
326:
315:
311:
307:
295:
290:
288:
283:
281:
276:
275:
273:
272:
267:
264:
262:
259:
258:
257:
256:
252:
251:
246:
243:
241:
238:
236:
233:
231:
228:
224:
221:
220:
219:
216:
212:
209:
207:
204:
202:
199:
198:
197:
194:
190:
187:
186:
185:
182:
180:
177:
175:
172:
168:
165:
164:
163:
160:
158:
155:
153:
150:
148:
147:Language code
145:
141:
138:
136:
133:
132:
131:
128:
126:
123:
121:
118:
114:
113:alt attribute
111:
110:
109:
106:
102:
99:
97:
94:
92:
89:
87:
84:
83:
82:
79:
75:
72:
70:
67:
66:
65:
62:
58:
55:
53:
50:
48:
45:
43:
40:
39:
38:
35:
33:
30:
29:
28:
27:
24:
21:
20:
1549:. Retrieved
1538:
1525:
1518:. Retrieved
1510:
1497:
1473:
1459:
1453:
1441:. Retrieved
1437:
1428:
1417:. Retrieved
1415:. 2013-06-13
1407:
1395:. Retrieved
1391:
1382:
1372:16 September
1370:. Retrieved
1366:the original
1343:16 September
1341:. Retrieved
1314:Semantic Web
1279:HTML element
1254:<span>
1232:
1224:<span>
1188:<span>
1181:
1165:
1074:
1060:
969:
965:<span>
954:
950:<span>
943:
902:<span>
899:
851:
833:123-456-7890
807:microformats
804:
800:Semantic Web
793:
778:
698:
694:stereophonic
674:<span>
671:
637:<span>
634:
626:<span>
624:
615:<span>
606:<span>
594:<span>
582:<span>
575:
565:<span>
563:
551:<span>
548:
437:<span>
434:
423:
411:lang="en-US"
391:<span>
389:
361:<span>
345:<span>
322:<span>
303:
162:Style sheets
91:div and span
90:
81:HTML element
32:Dynamic HTML
1258:<div>
1246:<nav>
1220:<div>
1184:<div>
961:<div>
946:<div>
936:web sites.
934:form-driven
906:<div>
678:<div>
641:<div>
630:<div>
602:<div>
586:<div>
578:<div>
425:<div>
407:<div>
403:block-level
399:<div>
365:<div>
349:<div>
318:<div>
314:web browser
253:Comparisons
240:Web storage
235:Quirks mode
174:Font family
125:HTML editor
1584:Categories
1488:<dl>
1484:<ol>
1480:<ul>
1419:2013-11-14
1320:References
1309:JavaScript
967:elements.
908:elements'
662:See also:
652:attributes
643:tags with
592:whereas a
337:<em>
184:JavaScript
179:Web colors
120:HTML frame
1590:HTML tags
1392:W3Schools
1171:Main page
1106:Main page
1065:Main page
1001:Main page
785:Web pages
559:html-i18n
534:and I am
495:and I am
341:semantics
333:<p>
223:Validator
1528:FIELDSET
1443:3 August
1397:22 March
1264:See also
1174:Contents
1125:Contents
1068:Contents
1020:Contents
955:Various
922:HttpUnit
762:uses an
431:Examples
371:such as
329:document
1551:30 June
1520:12 July
1305:(COinS)
940:Overuse
881:$ 45.99
696:image.
545:History
140:Unicode
101:marquee
42:article
1466:
1198:legend
789:Google
600:. The
596:is an
447:syntax
395:inline
230:WHATWG
206:WebGPU
52:canvas
1547:. W3C
1486:, or
1298:CDATA
1274:HTML5
1234:HTML5
1214:input
1206:label
1155:</
1146:</
1127:</
1108:</
1086:class
1050:</
1041:</
1022:</
1003:</
981:class
926:xUnit
910:class
883:</
870:class
835:</
822:class
811:class
753:</
740:class
722:</
709:class
682:class
645:class
588:is a
530:I am
516:</
503:style
487:</
474:style
466:I am
445:HTML
383:, or
373:class
211:WebXR
201:WebGL
196:Web3D
189:WebCL
96:blink
69:Basic
64:XHTML
57:video
47:audio
37:HTML5
1595:HTML
1553:2010
1526:The
1522:2010
1464:ISBN
1445:2017
1399:2018
1374:2014
1345:2014
1291:and
1272:and
1270:HTML
1248:and
1216:>
1212:<
1208:>
1204:<
1200:>
1196:<
1186:and
1177:Help
1161:>
1152:>
1149:span
1144:Help
1142:>
1139:span
1136:<
1133:>
1130:span
1123:>
1120:span
1117:<
1114:>
1111:span
1104:>
1101:span
1098:<
1095:>
1080:<
1071:Help
1056:>
1047:>
1039:Help
1037:>
1031:<
1028:>
1018:>
1012:<
1009:>
999:>
993:<
990:>
975:<
963:and
957:list
948:and
904:and
894:Ajax
889:>
879:>
864:<
841:>
838:span
831:>
819:span
816:<
805:The
768:>
764:<
759:>
749:>
734:<
728:>
725:span
718:>
706:span
703:<
676:and
666:and
639:and
628:and
580:and
555:HTML
549:The
536:blue
522:>
519:span
514:blue
512:>
500:span
497:<
493:>
490:span
483:>
471:span
468:<
381:lang
363:and
347:and
325:tags
320:and
306:HTML
86:meta
23:HTML
1515:W3C
1476:div
1438:W3C
1256:or
1226:or
1158:div
1083:div
912:or
886:div
867:div
684:or
647:or
532:red
485:red
415:CSS
413:),
385:dir
304:In
218:W3C
167:CSS
1586::
1524:.
1513:.
1509:.
1482:,
1472:.
1436:.
1390:.
1353:^
1328:^
1260:.
1244:,
1240:,
1222:,
1053:ul
1044:li
1034:li
1025:li
1015:li
1006:li
996:li
978:ul
914:id
766:em
756:em
737:em
686:id
654::
649:id
538:!
524:!
379:,
377:id
375:,
316:,
1555:.
1447:.
1422:.
1401:.
1376:.
1347:.
1089:=
984:=
873:=
825:=
743:=
712:=
506:=
477:=
293:e
286:t
279:v
Text is available under the Creative Commons Attribution-ShareAlike License. Additional terms may apply.