(Division) . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 231 (Denition List) . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
(Term in a Denition List or Caption in Figure or Details) . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 236 (Emphasis)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 238 (Embedded Object) . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 240 (Form Field Grouping) . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 242 (Figure) . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . 244 (Font Denition) . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 246 (Footer) . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
(Form for User Input) . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 249 (Window Region) . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . 252 (Frameset Denition) . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 255 through
(Headings) . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. 258 (Document Head) . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . 260 (Header) . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . 261 (Header Group)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
263 11. (Horizontal Rule) . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 265 (HTML Document) . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . 267
and the Most Popular Tags? . . . . . . . . . . . . . . . .
. 507 Changing Element Types with display . . . . . . . . . . . . .
. . . . . . . . . . . . 508 Controlling White Space . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512 Major
Themes of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . 513 Separation of Structure
and Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. 514 CSS: More Appropriate and Powerful for Presentation . . . . .
. . . . . . 516 Cross-Browser CSS Madness . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 517 Myths and
Misconceptions Related to CSS . . . . . . . . . . . . . . . . . . .
. . 517 Summary . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519 5
CSS Syntax and Property Reference . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . 521 CSS Versions . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . 521 CSS Basics . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . 521 Style Inclusion Methods . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . 524 Linked
Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . 524 Embedded Styles . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . 526 Imported Styles@import . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . 526 Inline Styles . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . 527 CSS Measurements . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527
CSS Strings and Keywords . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 529 Counters . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . 530 CSS Color Values . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . 530 CSS Selectors . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 533
Miscellaneous CSS Constructs . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . 539 /* comments */ . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . 539 @charset . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 540
@font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . 540 @media . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . 541 @page . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. 541 !important . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . 542 CSS1 and CSS
2.1 Properties . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . 542 background . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . 543 background-attachment . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . 543 background-color . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . 544 background-image . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 544
background-position . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 545 C o n t e n t s xiii 14. xiv
HTML & CSS: The Complete Referencexiv HTML & CSS: The
Complete Reference background-repeat . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . 546 border .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . 547 border-bottom . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . 547 border-bottom-color . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . 548
border-bottom-style . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . 548 border-bottom-width . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. 548 border-collapse . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 549 border-color . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . 549 border-left . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
550 border-left-color . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . 551 border-left-style . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 551 border-left-width . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 552
border-right . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . 552 border-right-color .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 552 border-right-style . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553
border-right-width . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . 553 border-spacing . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . 553 border-style . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 554
border-top . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . 556 border-top-color . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 556 border-top-style . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557
border-top-width . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . 557 border-width . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . 557 bottom . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559
caption-side . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . 559 clear . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . 560 clip . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . 560 color . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 561
content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 562 counter-increment .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 564 counter-reset . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564
cursor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 565 direction . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . 567 display . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . 568 empty-cells . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . 570 oat . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 571 font . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 572 font-family . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572
font-size . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 573 font-style . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . 574 font-variant . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. 575 font-weight . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 575 height . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . 576 left . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 577 letter-spacing . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 578
line-height . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . 578 list-style . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . 579 list-style-image . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
579 list-style-position . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . 579 list-style-type . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . 580 15. margin . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . 581 margin-bottom . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 582 margin-left . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . 582 margin-right . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
583 margin-top . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 583 max-height . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . 584 max-width . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
584 min-height . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 585 min-width . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . 585 orphans . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
586 outline . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . 586 outline-color .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . 588 outline-style . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. 589 outline-width . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 590 overow . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . 590 padding . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. 591 padding-bottom . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . 593 padding-left . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . 593 padding-right . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594
padding-top . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 594 page-break-after . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 595 page-break-before . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . 595
page-break-inside . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . 596 position . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 596 quotes . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
597 right . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . 598 table-layout
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . 598 text-align . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . 599 text-decoration . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . 599 text-indent .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . 600 text-transform . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . 600 top . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 601
unicode-bidi . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 602 vertical-align . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . 602 visibility . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
603 white-space . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 604 widows . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . 604 width . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . 605 word-spacing . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . 606 z-index . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . 607 CSS2 and CSS 2.1 Aural Style
Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. 607 6 CSS3 Proprietary and Emerging Features Reference . . . . .
. . . . . . . . . . . . . 613 The State of CSS3 . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . 613 CSS3 Selectors . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . 613
CSS3-Introduced Values and Units . . . . . . . . . . . . . . . . .
. . . . . . . . . . . 621 CSS3 Color Values . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 622
Namespaces . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 624 Media Queries . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 625 Web Fonts . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 626
Miscellaneous CSS3 Changes . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . 629 C o n t e n t s xv 16. xvi HTML &
CSS: The Complete Referencexvi HTML & CSS: The Complete
Reference Implemented CSS3 and Browser-Specic Features . . . . . .
. . . . . . . . . . . . . . . 629 @keyframes . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . 630 accelerator . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 631 animation .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . 632 animation-delay . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. 633 animation-direction . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 634 animation-duration . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . 635 animation-iteration-count . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 636 animation-name . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 637 animation-timing-function . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . 638
backface-visibility . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . 640 background-clip . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . 641 background-origin . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . 642
background-position-x . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . 643 background-position-y . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 644
background-size . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . 644 behavior . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 645 binding . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649
border-bottom-left-radius . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . 650 border-bottom-right-radius . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 651
border-image . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 651 border-radius . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 653 border-top-left-radius . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 654
border-top-right-radius . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 655 box-reect . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . 655 box-shadow . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 656 box-sizing
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 658 column-break-after . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . 659 column-break-before . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 659 column-count . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 660 column-gap . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 661
column-rule . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 661 column-rule-color . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . 662 column-rule-style . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 663
column-rule-width . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . 664 column-width . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . 665 columns . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . 665 lter . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . 666 gradient . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . 671 image-rendering . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 673
ime-mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . 673 interpolation-mode .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . 674 layout-grid . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674
layout-grid-char . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . 675 layout-grid-line . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 675 layout-grid-mode . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . 676
layout-grid-type . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . 676 line-break . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . 677 marquee-direction . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 677 17.
marquee-play-count . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . 678 marquee-speed . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . 679 marquee-style . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . 680 mask . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . 681 mask-attachment . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
682 mask-box-image . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 682 mask-clip . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . 683 mask-composite . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684
mask-image . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 684 mask-origin . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 685 mask-position . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 685
mask-position-x . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . 686 mask-position-y . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . 687 mask-repeat . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 687 mask-size .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . 688 opacity . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . 690 outline-offset . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 690
outline-radius . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 691 overow-style . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 691 overow-x . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 692
overow-y . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 693 perspective . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . 693 perspective-origin . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 694
resize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . 695 ruby-align . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . 696 ruby-overhang . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
697 ruby-position . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 698
scrollbar-3dlight-color . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . 698 scrollbar-arrow-color . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . 699 scrollbar-base-color . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 699
scrollbar-darkshadow-color . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . 700 scrollbar-face-color . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. 701 scrollbar-highlight-color . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . 701 scrollbar-shadow-color .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . 702 scrollbar-track-color . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 703 size . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . 703 text-align-last . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . 704 text-autospace . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 704
text-ll-color . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 705 text-justify . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . 705 text-kashida-space . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 706
text-overow . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . 707 text-rendering . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 708 text-shadow . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 708
text-stroke . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . 710 text-stroke-color . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 710 text-stroke-width . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 711
text-underline-position . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 711 transform . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . 712 C o n t e n t s xvii 18. xviii HTML & CSS: The
Complete Referencexviii HTML & CSS: The Complete Reference
transform-origin . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . 715 transform-style . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . 716 transition . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 717
transition-delay . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 717 transition-duration . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . 718 transition-property . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 719
transition-timing-function . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 719 user-select . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . 720 word-break . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . 721 word-wrap
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . 722 writing-mode . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . 722 zoom . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . 724 Part III
Appendixes A Character Entities . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 727
Encoding Quirks and Considerations . . . . . . . . . . . . . . . .
. . . . . . . . . . 728 Traditional HTML Entities . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 731
HTML 4.x and XHTML 1.x Character Entities . . . . . . . . . . . . .
. . . . . . . . . . . . 740 Latin Extended-A . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 741
Latin Extended-B . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . 741 Spacing Modier Letters . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. 741 General Punctuation . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . 741 Greek . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . 743 Letter-like Symbols . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 744
Arrows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 745 Mathematical
Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 746 Technical Symbols . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . 747 Geometric
Shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . 748 Miscellaneous Symbols . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 748
Embracing Unicode . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 748 B Fonts . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 751 Specifying Fonts . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . 751 Fonts for Windows Platform and
Browsers . . . . . . . . . . . . . . . . . . . . . 752 Fonts for
Macintosh System and Browsers . . . . . . . . . . . . . . . . . . .
. . . 755 PC Mac Font Similarity . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . 757 Downloadable Fonts .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . 760 Microsofts Dynamic Fonts . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . 760 Standard
Downloadable Fonts . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 761 Cross-Browser Downloadable Fonts . . . . . . .
. . . . . . . . . . . . . . . . . . . . 761 Font Replacement with
Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 763 sIFR and Other Text Replacement Techniques . . .
. . . . . . . . . . . . . . . . . . . . . . 764 C Colors . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 765 (X)HTML Colors . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . 765 Nonstandard Color Names and Numerical
Equivalents . . . . . . . . . . 765 (X)HTML Elements Supporting
Color . . . . . . . . . . . . . . . . . . . . . . . . . 772 19. CSS
Color Values . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 773 CSS Color-Related
Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . 776 Browser-Safe Colors . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 779 D
URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 783 Basic
Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 783 Server Address . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . 784 Directory . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 786
Filename . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 787 Fragment Identier .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . 788 Protocol . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 788
Other Features of URLs . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 789 Data URIs . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . 791 Other Emerging URL Forms . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 794
Relative URLs . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . 795 Using the Tag
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . 795 URL Challenges . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 796
Unclear Case Sensitivity . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 797 Unclear Length Limits . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
797 Persistence Concerns . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . 797 Long, Dirty URLs . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . 797 Short, Cryptic URLs . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . 797 Location, Not
Meaning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 798 Beyond URLs . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
798 New Addressing Schemes: URNs, URCs, and URIs . . . . . . . . .
. . . . . 798 E Reading a Document Type Denition . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . 801 Element Type
Declarations . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . 801 Occurrence Indicators . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . 802 Logical Connectors . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 803
SGML Content Exclusion and Inclusion . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . 804 Attribute Declarations . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . 804 SGML and XML Keywords . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 805 Parameter
Entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . 806 Comments . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . 806 The DTDs . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 807 Index . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . 809 C o n t e n t s xix 20. This page intentionally left
blank 21. Acknowledgments T he fifth edition of this book might as
well be the first edition of a brand-new book. The HTML5
specification marks a return to past ideas and an explosion of
future ideas. It took a great deal of work to put this new edition
together. Given the amount of effort required, I want to make sure
that all those that helped are given their due. First, I want to
acknowledge the numerous fixes and improvements that came from the
feedback from both my students at UCSD and readers around the
world. I write these books for you, and I am glad you are putting
this information to good use. I would also like to show my
appreciation to the many staff members at PINT who helped on this
book project in some direct or indirect way. I cant specifically
thank and mention the dozens of employees we have at PINT and my
other firm Port80 Software who keep the lights on, but Ill call a
few out who warrant some extra kudos. Christie Sorenson once again
helped this time with heavy lifting particularly in the CSS effort,
and I can safely say that she has learned, relearned, and even
forgotten more about Web development than probably anyone I know,
besides maybe myself. Looking forward to more project fun in the
future, Christie! Plenty of other PINTsters helped. Rob McFarlane,
Andrew Simpkins, and Bryan Sleiter helped out with imagery. The
project managers, particularly Mine Okano, Robin Nobel, Matt
Plotner, and Olivia Chen, gave me moral support and occasional pity
as I toiled away upstairs. Glenn Dawson addressed my many server
changes and helped debug some annoying aspects of HTML5. Dan
Whitworth assisted on a few chapters here and there and probably
had nightmares about getting a call to really dive in. Joe Lima
listened to some of my verbal nonsense and helped guide me to some
deeper insights than I could have ever arrived at on my own. Daisy
Bhonsle kept up a very long-standing proofing relationship, and I
am very glad she always helps out. The student certainly has become
the master. The folks at McGraw-Hill Professional are always a
pleasure to work with. Meghan Riley helped guide me along, and Megg
Morin didnt lose faith, at least not completely. Thanks for being
my patron the last decade, Megg! My technical editor, James Pence,
probably wondered when this project was going to finish, and
somehow he finished a nontechnical book of his own during the
project. xxi 22. xxii HTML & CSS: The Complete Reference
Finally, to my friends and family who tried to give me space to
write this thing, you deserve the biggest thanks. My children,
Graham, Olivia, and Desmond, had to put up with a grouchy dad and
far too many absent weekends, so we now return you to our regularly
scheduled weekends! Cecilia, you provided a lot of help as well
that made things a bit easier on all of us, so thank you for that.
Finally, Sylvia, you always support my online efforts, as hard as
they may be. I know you, more than anyone, appreciate the
importance of this project, considering the role HTML has played in
our lives. Thomas A. Powell [email protected] October 2009 23. I n t
r o d u c t i o n xxiii Introduction T he fifth edition of this
book represents a significant change in structure and content to
address HTML5. The book is similar to the previous edition in maybe
a third of the content; otherwise, it is an all-new effort. Most
obviously, as compared to the previous editions, which focused
mainly on XHTML and HTML 4, this edition focuses on HTML5, which
represents both a return to the markup past and the unveiling of an
exciting future of Web applications. However, we do retain some
information from previous editions because in order for this work
to be truly complete, we must not focus only on the future but also
present all the elements supported in browsers today, including the
archaic, proprietary, and standard (X)HTML tags. These will still
be encountered for years to come, and we want this book to provide
the reference you need in addressing their syntax. CSS coverage has
been expanded greatly to fully cover CSS 2.1 as well as every
proprietary and emerging CSS 3 property supported in one or more
popular shipping browsers circa 2009. No value judgment is made; if
Internet Explorer has supported a proprietary CSS feature for the
last decade, its included. However, we do avoid presenting CSS
features that are truly speculative in great depth, but where
appropriate, we summarize or present pointers to the emerging
syntax. The ramification of the increased markup and CSS coverage
is simply the book doesnt have space left to do everything it did
before. Teaching nearly everything about HTML and CSS in prose form
and then presenting a complete syntax reference for the
technologies would have produced a book well over 2,000 pages. We
were well on the way to that when we adjusted our efforts to create
what you have in your hands, a solid reference book that may be
used for years to come. This isnt to say that learning material is
not present at all. There are very solid introductory chapters for
the markup and CSS sections, which should succinctly address
details and standards issues. There just isnt a step-by-step
cookbook for each element or property. Given the maturity of the
Web industry, we aimed not for the complete tutorial, but instead
for the complete reference. It should go without saying that more
markup changes to HTML and CSS are inevitable. HTML5, in
particular, is a complete moving target, and rather than punting on
it, we took the best shot at its first release version as it
settled in late 2009. Because of the inevitable changes given
HTML5s rapid evolution, the support Web site, http://htmlref.com,
should be considered an important bookmark for readers looking for
updates or the unavoidable correction. xxiiixxiii 24. This page
intentionally left blank 25. I Core Markup CHAPTER 1 Traditional
HTML and XHTML CHAPTER 2 Introducing HTML5 CHAPTER 3 HTML and XHTML
Element Reference PART 26. This page intentionally left blank 27. 1
Traditional HTML and XHTML M arkup languages are ubiquitous in
everyday computing. Although you may not realize it, word
processing documents are filled with markup directives indicating
the structure and often presentation of the document. In the case
of traditional word processing documents, these structural and
presentational markup codes are more often than not behind the
scenes. However, in the case of Web documents, markup in the form
of traditional Hypertext Markup Language (HTML) and its Extensible
Markup Language (XML)-focused variant, XHTML, is a little more
obvious. These not-so-behind-the-scenes markup languages are used
to inform Web browsers about page structure and, some might argue,
presentation as well. First Look at HTML and XHTML In the case of
HTML, markup instructions found within a Web page relay the
structure of the document to the browser software. For example, if
you want to emphasize a portion of text, you enclose it within the
tags and , as shown here: This is important text! 33 CHAPTER 28. 4
P a r t I : C o r e M a r k u p4 P a r t I : C o r e M a r k u p
When a Web browser reads a document that has HTML markup in it, it
determines how to render it onscreen by considering the HTML
elements embedded within the document: So, an HTML document is
simply a text file that contains the information you want to
publish and the appropriate markup instructions indicating how the
browser should structure or present the document. Markup elements
are made up of a start tag, such as , and typically, though not
always, an end tag, which is indicated by a slash within the tag,
such as . The tag pair should fully enclose any content to be
affected by the element, including text and other HTML markup. NOTE
There is a distinction between an element (for example, strong) and
the tags ( and ) that are used by the element. However, you will
likely often find the word tag used in place of element in many if
not most discussions about HTML markup. This observation even
includes historically relevant documents discussing HTML1 written
by Tim Berners-Lee, the founding father of the Web. Fortunately,
despite any imprecision of word choice that people may exhibit when
discussing markup, meaning is usually well understood and this
should not be a tremendous concern. Under traditional HTML (not
XHTML), the close tag for some elements is optional because their
closure can be inferred. For example, a
tag cannot enclose another
tag, and thus the closing
tag can be inferred when markup like this is encountered:
This is a paragraph.
This is also a paragraph. Such shortened notations that
depend on inference may be technically correct under the
specification, but stylistically they are not encouraged. It is
always preferable to be precise, so use markup like this
instead:
This is a paragraph.
This is also a paragraph.
1 Historic intro to HTML that clearly uses the term tag instead
of element www.w3.org/History/19921103-
hypertext/hypertext/WWW/MarkUp/Tags.html 29. C h a p t e r 1 : Tr a
d i t i o n a l H T M L a n d X H T M L 5C h a p t e r 1 : Tr a d i
t i o n a l H T M L a n d X H T M L 5 PARTI There are markup
elements, called empty elements, which do not enclose any content,
thus need no close tags at all, or in the case of XHTML use a
self-close identification scheme. For example, to insert a line
break, use a single
tag, which represents the empty br element, because it doesnt
enclose any content and thus has no corresponding close tag:
However, in XML markup variants, particularly XHTML, an unclosed
tag is not allowed, so you need to close the tag
or, more commonly, use a self-identification of closure like
so:
The start tag of an element might contain attributes that modify
the meaning of the tag. For example, in HTML, the simple inclusion
of the noshade attribute in an tag, as shown here: indicates that
there should be no shading applied to this horizontal rule. Under
XHTML, such style attributes are not allowed, because all
attributes must have a value, so instead you have to use syntax
like this: As the preceding example shows, attributes may require
values, which are specified with an equal sign; these values should
be enclosed within double or single quotes. For example, using
standard HTML syntax, specifies four attributes for this tag that
are used to provide more information about the use of the included
image. Under traditional HTML, in the case of simple alphanumeric
attribute values, the use of quotes is optional, as shown here:
Regardless of the flexibility provided under standard HTML,
you should always aim to use quotes on all attributes. You will
find that doing so makes markup more consistent, makes upgrading to
stricter markup versions far easier, and tends to help reduce
errors caused by inconsistency.
30. 6 P a r t I : C o r e M a r k u p6 P a r t I : C o r e M a r
k u p A graphical overview of the HTML markup syntax shown so far
is presented here: Hello HTML and XHTML World Given these basics of
HTML syntax, it is best now to look at an example document to see
its application. Our first complete example written in strict HTML
4 is shown here: Hello HTML 4 WorldWelcome to the World of HTML
HTML really isn't so hard!
Soon you will using HTML.
You can put lots of text here if you want. We could go on and
on with fake text for you to read, but let's get back to the
book.
ONLINE http://htmlref.com/ch1/html4helloworld.html A simple
modification of the initial line is really all that is necessary to
make this an HTML5 example, the comment and text is changed so you
can keep the examples straight: Hello HTML5 WorldWelcome to the
Future World of HTML5
HTML5 really isn't so hard!
Example Heading Tag Name Attribute Name Attribute Affected
ContentStart Tag HTML Element Attribute Value End Tag 31. C h a p t
e r 1 : Tr a d i t i o n a l H T M L a n d X H T M L 7C h a p t e r
1 : Tr a d i t i o n a l H T M L a n d X H T M L 7 PARTI
Soon you will using HTML.
You can put lots of text here if you want. We could go on and
on with fake text for you to read, but let's get back to the
book.
ONLINE http://htmlref.com/ch1/html5helloworld.html In the case
of XHTML, which is a form of HTML that is based upon the syntax
rules of XML, we really dont see many major changes yet in our
example: Hello XHTML WorldWelcome to the World of XHTML
XHTML really isn't so hard either!
Soon you will using XHTML too.
There are some differences between XHTML and HTML but with
some precise markup you'll see such differences are easily
addressed.