Learn Web Coding Home Template Explained
1. Introduction
Learn Web Coding (LWC) consists of LWC Home (learnwebcoding.com), LWC Blog (blog.learnwebcoding.com), and LWC Forums (forums.learnwebcoding.com). LWC Home, LWC Blog, and LWC Forums (LWC Home/Blog/Forums) are treated as three distinct web sites with the LWC Home home page serving as the LWC home page.
With the exception of specialty web pages, the LWC Home Template (learnwebcoding.com) is the starting point for every web page at LWC Home. The LWC Home Template is mobile first, responsive, and passes the Google Mobile-Friendly Test (search.google.com). The LWC Home Template consists of an original object-oriented PHP template system for creating a flexible and easy to maintain web site and web pages, original HTML and CSS conventions for consistently structuring and styling web page content, original object-oriented JavaScripts for breadcrumbs navigation and tools icon dropdown, a modified Bootstrap grid system and navbar, CSS compiled from Sass, valid HTML5, and valid CSS Level 3.
This web page explains and demonstrates the LWC Home Template.
- To download the LWC Home Template, see Learn Web Coding Home Template Download (learnwebcoding.com).
- A common convention for writing style rules places the selector and opening left curly bracket ({) character on the first line, each style on its own line indented by two space ( ) characters (shown) or a tab, and the closing right curly bracket (}) character on the last line:
selector { property-one: value-one; property-two: value-two; property-three: value-three; }When the convention above results in too much vertical scrolling, the style rules are written as a single line:selector { property-one: value-one; property-two: value-two; property-three: value-three; }
1.1. LWC Home Template Goals
- Goal: To develop a PHP template system for creating a flexible and easy to maintain web site and web pages. This results in a web site whose content is easy to change, a web site whose content is easy to rearrange, and a web site that can accept any number of web page types.
Accomplished: The PHP template system: 1.) allows the definition of a web page type as a web page object (WPO) in a single file, with the WPO properties representing HTML markup and attributes, and the WPO property values representing HTML attribute values and content; 2.) allows the assignment of sitewide default WPO property values in a single file; 3.) allows the overriding of sitewide default WPO property values with web page specific WPO property values in a single file; 4.) allows the placement of sitewide blocks of code in separate files; 5.) allows that some WPO properties and that some sitewide blocks of code might not be used in all web pages; 6.) allows the creation of a web page HTML/PHP template in a single file, with HTML from<html>to</html>, and PHP that inserts WPO property values into the HTML; 7.) allows the definition of multiple different web page types as WPOs each in a separate file; 8.) allows the placement of multiple different sitewide blocks of code, and the creation of multiple different variations of the sitewide blocks of code, each in a separate file; and 9.) allows the creation of multiple different web page HTML/PHP templates each in a separate file. - Goal: To be responsive. This results in web pages that are functional on devices with various viewport dimensions, including devices with small viewport dimensions such as mobile phones, and devices with large viewport dimensions such as desktop computers with widescreen monitors. In particular, this results in web pages onto which the viewport width can be substantially decreased before inducing horizontal scrolling.
Accomplished: The LWC Home Template uses fluid design techniques (LWC code) and media queries (Bootstrap code) to automatically adjust the scale/layout of content as the viewport width changes. Because of this, in web pages based on the LWC Home Template, the only content that induces horizontal scrolling is; 1.) a long uninterrupted string of characters whose width exceeds the viewport width, and 2.) a row of table cells whose minimum content width (because of uninterrupted strings of characters) exceeds the viewport width. - Goal: To use the new HTML5 semantic elements where appropriate. This improves the readability/interpretability of the HTML code.
Accomplished: The LWC Home Template uses the new HTML5 semanticheader,footer,main,navandsectionelements where appropriate. - Goal: To minimize the use of the HTML
classattribute. This improved the semantics of the HTML code and results in HTML code that is much lighter, faster, and easier to write.
Accomplished: Instead of using CSS class selectors, the LWC Home Template uses CSS type selectors, descendant selectors, and child selectors where reasonable. As a result, if the LWC Home Template is being used as intended and the only thing being added to the LWC Home Template is content, then the only time the HTMLclassattribute needs to be used is for notes (below), list hyperlinks (below), buttons (below), and applying abox-shadowto images (below). - Goal: To use the Compass CSS authoring framework and the Sass CSS extension language. This makes it easier to generate and maintain the CSS code.
Accomplished: Compass/Sass was used to create the lwc.scss (learnwebcoding.com) Sass file and to compile it into the style sheet lwc.css (learnwebcoding.com) file, which is the style sheet for the LWC HTML code, not the Bootstrap HTML code, in the LWC Home Template. - Goal: To be valid HTML5 and valid CSS Level 3. This demonstrates that the HTML and CSS code are well formed and error free.
Accomplished: The LWC Home Template is valid HTML5 per the W3C Markup Validation Service (validator.w3.org) and valid CSS Level 3 per the W3C CSS Validation Service (jigsaw.w3.org). To confirm click the W3C Valid HTML5 button and the W3C Valid CSS button near the bottom of this web page.In order for the LWC Home Template to validate as CSS Level 3, Bootstrap was customized and then the Bootstrap style sheet had to be edited, and the Font Awesome style sheet had to be edited. For additional information, see customizing Bootstrap and then editing the Bootstrap style sheet (below) and editing the font awesome style sheet (below). - Goal: To score 100 out of 100 on the Google Mobile Website Speed Testing Tool Mobile Friendliness test. This demonstrates that the web page is well suited for devices with small viewport dimensions such as mobile phones.
Accomplished: The LWC Home Template scores 100 out of 100 on the Google Mobile Website Speed Testing Tool Mobile Friendliness test. To confirm, go to the Google Mobile Website Speed Testing Tool (testmysite.thinkwithgoogle.com), copy and paste the LWC Home Template (learnwebcoding.com) URI, and click Test Now. The Google Mobile Website Speed Testing Tool runs three tests; Mobile Friendliness test, Mobile Speed test, and Desktop Speed test. After the tests are run, the results are displayed.
1.2. Web Browser Support
Web browser support: IE10+, ED12+, FF6+, CH30+, OP17+.
1.3. PHP Support
PHP support: PHP 5.6.8+, 7+. PHP 5.6.7- not tested.
1.4. Abbreviations
The Abbreviations subsection is always the last subsection of section 1. Introduction, including; 1.) if there are other subsections in section 1. Introduction, and 2.) if the abbreviations are used prior to the Abbreviation subsection.
- Learn Web Coding Home = LWC Home = www.learnwebcoding.com.
- Learn Web Coding Blog = LWC Blog = blog.learnwebcoding.com.
- Learn Web Coding Forums = LWC Forums = forums.learnwebcoding.com.
- Learn Web Coding = LWC = LWC Home/Blog/Forums = *.learnwebcoding.com.
- IE = Internet Explorer.
- ED = Edge Legacy 12 - 18 (EdgeHTML based) and Edge 79+ (Chromium based).
- FF = Firefox.
- CH = Chrome.
- OP = Opera.
2. Bootstrap Usage
Bootstrap (getbootstrap.com) is a responsive/mobile first HTML, CSS, and JS framework. The LWC Home Template uses three Bootstrap 3.4.x components, all of which are used sitewide at LWC Home/Blog/Forums:
- Grid system (getbootstrap.com) for LWC content.
- Navbar (getbootstrap.com) for the LWC Bootstrap navbar (below).
- Responsive utilities (getbootstrap.com) for the LWC Bootstrap navbar (below).
2.1. Customizing Bootstrap And Then Editing The Bootstrap Style Sheet
Bootstrap styles can interfere with author styles, which leaves four options; 1.) use the Bootstrap styles, 2.) eliminate the Bootstrap styles, 3.) supplement/override the Bootstrap styles, or 4.) some combination of 1 through 3.
The Bootstrap 3.4.1 non-minified style sheet packaged with bootstrap-3.4.1-dist.zip is bootstrap.css (learnwebcoding.com), which is 145,933 bytes, 6,834 lines, and has 4 errors and 158 warnings (learnwebcoding.com) per the W3C CSS Validation Service (jigsaw.w3.org). The Bootstrap Customizer (getbootstrap.com) allows you to create a Bootstrap implementation that incorporates only the Bootstrap Less files and the Bootstrap jQuery plugins that you select. This lightens Bootstrap and can eliminate some troublesome/invalid Bootstrap styles. To lighten Bootstrap and to eliminate some troublesome/invalid Bootstrap styles, Bootstrap was customized with the following Less files and jQuery plugins selected:
- Less files:
- Click the Less files Toggle all button to uncheck all components.
- Under Common CSS, check:
- Grid system.
- Forms (auto checked by Navbar below).
- Responsive utilities (required for the Navbar show/hide content to work).
- Under Components, check:
- Navs (auto checked by Navbar below).
- Navbar.
- Under JavaScript components, check:
- Component animations (for JS) (includes Collapse) (required for the Navbar icon-bar button to work).
- Dropdown (required for the Navbar More dropdown to work).
- jQuery plugins:
- Click the jQuery plugins Toggle all button to uncheck all components.
- Under Linked to components, check:
- Dropdowns (required for the Navbar More dropdown to work).
- Under Magic, check:
- Collapse (required for the Navbar icon-bar button to work).
- Scroll to the bottom of the web page and click Compile and Download.
The customized bootstrap.css (learnwebcoding.com) is 52,174 bytes, 2,654 lines, and has 2 errors and 66 warnings (learnwebcoding.com) per the W3C CSS Validation Service. To further lighten Bootstrap and to further eliminate some troublesome/invalid Bootstrap styles, bootstrap.css was manually edited to remove the readily identifiable unnecessary Bootstrap style rules, not to change any Bootstrap style rules. The manually edited bootstrap.css (learnwebcoding.com) is 35,046 bytes, 1,711 lines, and has 1 error and 23 warnings (learnwebcoding.com) per the W3C CSS Validation Service. Then bootstrap.css was manually edited a second time to remove the unnecessary style rule reported in the error and the final bootstrap.css (learnwebcoding.com) is 34,873 bytes, 1,705 lines, and is valid CSS Level 3 with 23 warnings (learnwebcoding.com) per the W3C CSS Validation Service. As a result of customizing Bootstrap and then manually editing, the Bootstrap style sheet was reduced in size by over 75%, is valid CSS Level 3 (with warnings) per the W3C CSS Validation Service, and only 14 style rules were required to supplement/override the remaining troublesome Bootstrap styles.
2.2. Customizing Bootstrap And The Bootstrap JavaScript
The Bootstrap 3.4.1 non-minified JavaScript packaged with bootstrap-3.4.1-dist.zip is bootstrap.js (learnwebcoding.com), which is 70,484 bytes and 2,581 lines. The customized Bootstrap bootstrap.js (learnwebcoding.com) is 11,478 bytes and 400 lines. As a result of customizing Bootstrap, the Bootstrap JavaScript was reduced in size by over 80%.
3. Font Awesome Usage
Font Awesome (fontawesome.io) is a free set of scalable vector icons that are added to web pages using the HTML class attribute, not the HTML img element. The LWC Home Template uses two Font Awesome icons in the LWC Home tools icon dropdown (below); 1.) the cog (a.k.a., tools) () icon, and 2.) the check () icon. One of the LWC Home tools icon dropdown options is Display Web Page For Printing Without Images. When Display Web Page For Printing Without Images is selected, images on the web page are hidden by applying the CSS display: none style to HTML img elements. If Display Web Page For Printing Without Images is selected and the tools and check icon were images using the HTML img element, allowances would have to be made to stop the tools and check icon images, but not the other images on the web page, from being hidden, which is avoided by using the Font Awesome icons.
- The LWC home page (learnwebcoding.com) uses the Font Awesome pencil-square-o (), check-square-o (), and book () icons and the JavaScript Shopping Cart Single Page Application (learnwebcoding.com) and AngularJS Shopping Cart Single Page Application (learnwebcoding.com) use the Font Awesome shopping-cart () icon. Although these four icons are not used in the LWC Home Template, they are included in editing the font awesome style sheet (below).
- Bootstrap includes a free Glyphicons (getbootstrap.com) component that is similar to Font Awesome and would be easier to use because of the existing Bootstrap usage (above). Font Awesome, however, provides twice as many icons for free and I prefer the Font Awesome icons.
3.1. Editing The Font Awesome Style Sheet
The non-minified Font Awesome style sheet packaged with font-awesome-4.7.0.zip is font-awesome.css (learnwebcoding.com), which is 37,414 bytes, 2,338 lines, and has 1 error and 22 warnings (learnwebcoding.com) per the W3C CSS Validation Service (jigsaw.w3.org). Font Awesome v4.7.0 includes 675 icons and LWC Home uses six of them. That is a lot of overhead. To lighten Font Awesome and to eliminate some invalid Font Awesome styles, font-awesome.css was manually edited to remove the known unnecessary Font Awesome style rules, not to change any Font Awesome style rules. The manually edited font-awesome.css (learnwebcoding.com) was 2,367 bytes, 56 lines, and had 1 error and 2 warnings (learnwebcoding.com) per the W3C CSS Validation Service. Then font-awesome.css was manually edited a second time to determine if the line reported in the error could be commented out without any apparent adverse affect. The line was commented without any apparent adverse affect and the final non-minified font-awesome.css (learnwebcoding.com) is 2,470 bytes, 57 lines, and is valid CSS Level 3 with 2 warnings (learnwebcoding.com) per the W3C CSS Validation Service. As a result of manually editing, the Font Awesome style sheet was reduced in size by over 90% and is valid CSS Level 3 (with warnings) per the W3C CSS Validation Service.
4. PHP Template System
The LWC Home Template includes a PHP template system for creating a flexible and easy to maintain web site and web pages. This results in a web site whose content is easy to change, a web site whose content is easy to rearrange, and a web site that can accept any number of web page types. The PHP template system:
- Allows the definition of a web page type as a web page object (WPO) in a single file, with the WPO properties representing HTML markup and attributes, and the WPO property values representing HTML attribute values and content (Web_Page.class.php).
- Allows the assignment of sitewide default WPO property values in a single file (Web_Page.class.php).
- Allows the overriding of sitewide default WPO property values with web page specific WPO property values in a single file (web_page.php).
- Allows the placement of sitewide blocks of code in separate files (e.g., google_analytics.php, stylesheets.php, header.php, tools.php, footer.php, and javascripts.php).
- Allows that some WPO properties and that some sitewide blocks of code might not be used in all web pages (web_page.php).
- Allows the creation of a web page HTML/PHP template in a single file, with HTML from
<html>to</html>, and PHP that inserts WPO property values into the HTML (template.php). - Allows the definition of multiple different web page types as WPOs each in a separate file (Web_Page*.class.php).
- Allows the placement of multiple different sitewide blocks of code, and the creation of multiple different variations of the sitewide blocks of code, each in a separate file (myblockofcode*.php, google_analytics*.php, stylesheets*.php, header*.php, tools*.php, footer*.php, and javascripts*.php).
- Allows the creation of multiple different web page HTML/PHP templates each in a separate file (template*.php).
4.1. PHP Template System File Description
The minimum files for the PHP template system:
- footer.php: Web page
<footer></footer>section (below). - google_analytics.php: Web page Google Analytics code.
- header.php: Web page
<header></header>section (below). - javascripts.php: Web page JavaScripts.
- stylesheets.php: Web page style sheets.
- template.php: Web page HTML/PHP template.
- tools.php: Web page LWC Home tools icon dropdown (below).
- Web_Page.class.php: Web page object (WPO) definition.
- web_page.php: Web page file.
- web_page_sections.php: Web page
<section></section>sections (below). - web_page_toc.php: Web page table of contents (below).
4.2. How The PHP Template System Works
In brief, web_page.php; 1.) merges a web page object (WPO) definition (Web_Page.class.php) with a web page HTML/PHP template (template.php), and 2.) outputs a web page (web_page.php). More specifically:
- Web_Page.class.php: Defines a web page type as a WPO. Defines WPO properties and assigns sitewide default WPO property values.
include_oncegoogle_analytics.php, stylesheets.php, header.php, tools.php, footer.php, and javascripts.php. Similar to MVC model. - web_page.php:
include_onceWeb_Page.class.php and instantiates the WPO. Overrides sitewide default WPO property values with web page specific WPO property values.include_onceweb_page_toc.php and web_page_sections.php.include_oncetemplate.php. Outputs the web page, which has filename web_page.php. Similar to MVC controller. - template.php: Web page HTML/PHP template. Provides HTML from
<html>to</html>. PHP inserts the WPO property values into the HTML. Similar to MVC view.
┌────────────────────┐
│ │
│ │ - Defines a web page type as a WPO.
│ │ - Defines WPO properties and assigns
│ │ sitewide default WPO property values.
│ Web_Page.class.php │ - include_once google_analytics.php,
│ │ stylesheets.php, header.php, tools.php,
│ │ footer.php, and javascripts.php.
│ │ ──────────────────────>─────────────────────┐
│ │ │
└────────────────────┘ │
│
┌────────────────────┐ \│/
│ │ │
│ │ - include_once Web_Page.class.php and │
│ │ instantiates the WPO. <───────────────────┘
│ │ - Overrides sitewide default WPO
│ web_page.php │ property values with web page specific
│ (web page) │ WPO property values.
│ │ - include_once web_page_toc.php and
│ │ web_page_sections.php.
│ │ - include_once template.php. <──────────────┐
│ │ - Outputs the web page. │
│ │ │
└────────────────────┘ /│\
│
┌────────────────────┐ │
│ │ │
│ │ ──────────────────────>─────────────────────┘
│ │ - Web page HTML/PHP template.
│ template.php │ - Provides HTML from <html> to </html>.
│ │ - PHP inserts the WPO property values into
│ │ the HTML.
│ │
└────────────────────┘
5. Semantic HTML Structure, Content Type Reference, And The html And body Style Rules
The LWC Home Template is an HTML5 document that uses the new HTML5 semantic header, main, footer, nav, and section elements. The content types enclosed by the tags are indicated:
<!DOCTYPE html> <html lang='en'> <head>Assets loaded in the head section</head> <body> <header> <nav>LWC navbar</nav> <nav>LWC Bootstrap navbar</nav> <nav>LWC Home breadcrumbs navigation</nav> </header> <main> <h1>Web page title</h1> Last reviewed/updated | Published | Status Web browser support and LWC Home tools icon dropdown <nav>Table of contents</nav> <section>First web page section per the table of contents</section> <section>Second web page section per the table of contents</section> <section>Third web page section per the table of contents</section> </main> <footer> LWC logo as hyperlink to the LWC home page W3C Valid HTML5 and Valid CSS Level 3 buttons </footer> Assets loaded in the body section </body> </html>
The html and body type selectors are assigned author styles:
html {
overflow-y: scroll;
}
body {
font-family: arial, tahoma, sans-serif;
font-size: 14px;
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
6. Assets Loaded In The <head></head> and <body></body> Sections
The Font Awesome implementation requires loading the Font Awesome style sheet font-awesome.min.css file. The Bootstrap implementation requires the <meta name='viewport' content='width=device-width, initial-scale=1' /> tag and loading the Bootstrap style sheet bootstrap.min.css file, the jQuery JavaScript jquery-3.4.1.min.js file, and the Bootstrap JavaScript bootstrap.min.js file. The LWC code requires loading the LWC Home sitewide main style sheet lwc.min.css file, the LWC Home sitewide dynamically changeable LWC Home tools icon dropdown (below) style sheet print_default.min.css file, and the LWC Home sitewide JavaScript library_load_in_body.min.js file. The style sheets are loaded in the <head></head> section. So that the LWC Home styles may override the Bootstrap styles, the LWC Home style sheets are placed/loaded after the Bootstrap style sheet. The JavaScripts are not required for the rendering of the web page and, therefore, to speed up the initial rendering of the web page, are placed/loaded at the end of the <body></body> section:
<!DOCTYPE html> <html lang='en'> <head> <title>Learn Web Coding Home Template Explained</title><!-- No markup in title tags. --> <meta charset='UTF-8' /> <meta name='Author' content='Steve Taylor' /> <meta name='Keywords' content='Learn Web Coding Home, template, explained' /><!-- Cap words as if used in sentence. No markup in Keywords. --> <meta name='Description' content='An explanation of the Learn Web Coding Home Template.' /><!-- Sentence and/or structured data less than 160 char per Google. No markup in Description. --> <meta name='viewport' content='width=device-width, initial-scale=1' /> <link rel='stylesheet' type='text/css' media='all' href='/stylesheets/fontawesome/font-awesome.min.css' /> <link rel='stylesheet' type='text/css' media='all' href='/stylesheets/bootstrap/bootstrap.min.css' /> <link rel='stylesheet' type='text/css' media='all' href='/stylesheets/lwc/lwc.min.css' /> <link rel='stylesheet' type='text/css' media='all' href='/stylesheets/lwc/print_default.min.css' id='changeableExtSSLinkElementId' /> </head> <body> ... <script src='https://code.jquery.com/jquery-3.4.1.min.js'></script> <script src='/javascripts/bootstrap/bootstrap.min.js'></script> <script src='/javascripts/lwc/library_load_in_body.min.js'></script> </body> </html>
7. <header></header> Section
The <header></header> section (a.k.a., header) is located at the top of the web page and consists of four sections:
- LWC navbar (below).
- LWC Bootstrap navbar (below).
<noscript></noscript>section (below).- LWC Home breadcrumbs navigation (below).
The header uses the header element with the id='headerId' attribute:
<body> <header> <nav class='lwc-navbar'><!-- Open LWC navbar HTML. --> ... </nav><!-- Close LWC navbar HTML. --> <nav class='navbar navbar-inverse navbar-static-top'><!-- Open LWC Bootstrap navbar HTML. --> ... </nav><!-- Close LWC Bootstrap navbar HTML. --> <noscript class='noscript'> ... </noscript> <nav><!-- Open LWC Home breadcrumbs navigation HTML. --> ... </nav><!-- Close LWC Home breadcrumbs navigation HTML. --> <script>/* Open LWC Home breadcrumbs navigation JavaScript. */ ... </script><!-- Close LWC Home breadcrumbs navigation JavaScript. --> <script>BcrumbsNavUtil.bcrumbsNav("", "HTML");</script> </header> <main>
The #headerId ID selector is not assigned author styles. The header type selector is assigned author styles:
header { display: block; }
For an example of the header, go to the top of this web page.
7.1. LWC Navbar
The LWC navbar: 1.) is located at the top of the web page; 2.) has a blue background and provides hyperlinks to LWC Home, LWC Blog, and LWC Forums; and 3.) is used at LWC Home/Blog/Forums.
The LWC navbar uses the nav element with the class='lwc-navbar' attribute, the div element with the class='container-fluid' or class='lwc-navbar-content' attribute, and the a element with the href attribute:
<header> <nav class='lwc-navbar'><!-- Open LWC navbar HTML. --><!-- NOTE: Loading lwc.css in LWC Blog/Forums causes issues. Therefore, to avoid loading lwc.css in LWC Blog/Forums, place styles for LWC navbar at bottom of bootstrap.css, not in lwc.css. --> <div class='container-fluid'><!-- container-fluid from Bootstrap. --> <div class='lwc-navbar-content'><a href='http://blog.learnwebcoding.com/'>Blog</a> • <a href='http://forums.learnwebcoding.com/'>Forums</a> • Ad Free!</div> </div><!-- Close LWC navbar HTML div class='container-fluid'. --> </nav><!-- Close LWC navbar HTML. --> <nav class='navbar navbar-inverse navbar-static-top'><!-- Open LWC Bootstrap navbar HTML. --> ... </nav><!-- Close LWC Bootstrap navbar HTML. --> <noscript class='noscript'> ... </noscript> <nav><!-- Open LWC Home breadcrumbs navigation HTML. --> ... </nav><!-- Close LWC Home breadcrumbs navigation HTML. --> <script>/* Open LWC Home breadcrumbs navigation JavaScript. */ ... </script><!-- Close LWC Home breadcrumbs navigation JavaScript. --> <script>BcrumbsNavUtil.bcrumbsNav("", "HTML");</script> </header>
The nav and div type selectors are not assigned author styles. The a type selector, the .lwc-navbar a descendant selector, the .lwc-navbar, .container-fluid, and .lwc-navbar-content class selectors, and the a:hover, a:focus, .lwc-navbar a:hover, and .lwc-navbar a:focus pseudo-class selectors are assigned author styles. The Bootstrap .container-fluid class selector styles are defined in the Bootstrap style sheet bootstrap.css (learnwebcoding) file and are too numerous to show. The author style rules that supplement/override Bootstrap styles are indicated:
a { color: #005a9c; text-decoration: none; } /* From normal hyperlinks below. */
a:hover { color: #000; text-decoration: underline; } /* From normal hyperlinks below. */
a:focus { outline: thin dotted invert; } /* From normal hyperlinks below. */
.lwc-navbar { font-size: 14px; background-color: #005a9c; color: #ccc; text-align: right; padding: 4px 0; }
.lwc-navbar-content { font-size: 0.8em; }
.lwc-navbar a { color: #ccc; }
.lwc-navbar a:hover { color: #fff; text-decoration: none; }
.lwc-navbar a:focus { outline: 0; }
/* Supplement/override Bootstrap styles. */
.container-fluid { max-width: 1170px; } /* Content. */
For an example of the LWC navbar, go to the top of this web page.
7.2. LWC Bootstrap Navbar
The LWC Bootstrap navbar: 1.) is located near the top of the web page below the LWC navbar (above); 2.) has a black background and provides hyperlinks to HTML, CSS, JavaScript, PHP, etc; 3.) requires JavaScript; and 4.) is used at LWC Home and, with the right subsection removed, at LWC Blog/Forums.
The LWC Bootstrap navbar uses the Bootstrap navbar (getbootstrap.com) HTML and the Bootstrap responsive utilities (getbootstrap.com) HTML:
<header'> <nav class='lwc-navbar'><!-- Open LWC navbar HTML. --> ... </nav><!-- Close LWC navbar HTML. --> <nav class='navbar navbar-inverse navbar-static-top'><!-- Open LWC Bootstrap navbar HTML. --><!-- navbar-static-top aligns navbar-right content flush to right edge and removes border-top. --> <div class='container-fluid'><!-- container-fluid from Bootstrap. --> <div class='navbar-header'> <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#bs-example-navbar-collapse-1' aria-expanded='false'> <span class='sr-only'>Toggle navigation</span> <span class='icon-bar'></span> <span class='icon-bar'></span> <span class='icon-bar'></span> </button> <a href='http://www.learnwebcoding.com/' class='navbar-brand'><span class='hidden-xs hidden-sm'>Learn Web Coding Home</span><span class='visible-xs visible-sm'>LWC Home</span></a> </div> <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'> <ul class='nav navbar-nav'> <li><a href='/html/index.php'>HTML</a></li> <li><a href='/css/index.php'>CSS</a></li> <li><a href='/javascript/index.php'>JavaScript</a></li> <li><a href='/php/index.php'>PHP</a></li> <li><a href='/misc/index.php'>Misc</a></li> </ul> <ul class='nav navbar-nav navbar-right'> <li><a href='/misc/original_content.php'>Original Content</a></li> <li class='dropdown visible-sm visible-md'> <a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button' aria-haspopup='true' aria-expanded='false'>More <span class='caret'></span></a> <ul class='dropdown-menu'> <li><a href='/misc/glossary.php'>Glossary</a></li> <li><a href='/misc/whats_new.php'>What's New</a></li> </ul> </li> <li><a href='/misc/glossary.php' class='hidden-sm hidden-md'>Glossary</a></li> <li><a href='/misc/whats_new.php' class='hidden-sm hidden-md'>What's New</a></li> </ul> </div> </div><!-- Close LWC Bootstrap navbar HTML div class='container-fluid'. --> </nav><!-- Close LWC Bootstrap navbar HTML. --> <noscript class='noscript'> ... </noscript> <nav><!-- Open LWC Home breadcrumbs navigation HTML. --> ... </nav><!-- Close LWC Home breadcrumbs navigation HTML. --> <script>/* Open LWC Home breadcrumbs navigation JavaScript. */ ... </script><!-- Close LWC Home breadcrumbs navigation JavaScript. --> <script>BcrumbsNavUtil.bcrumbsNav("", "HTML");</script> </header>
The LWC Bootstrap navbar styles are defined in the Bootstrap style sheet bootstrap.css (learnwebcoding) file and are too numerous to show. The author style rules that supplement/override Bootstrap styles are indicated:
/* Supplement/override Bootstrap styles. */ .container-fluid { max-width: 1170px; } /* Content. */ .dropdown-menu { min-width: 0; border: 0; padding: 0; } /* Bootstrap navbar More dropdown. */ .dropdown-menu > li > a { line-height: 20px; background-color: #000; color: #fff; padding: 10px 15px; } /* Bootstrap navbar More dropdown hyperlinks. */ .dropdown-menu > li > a:hover { background-color: #333; color: #fff; } /* Bootstrap navbar More dropdown hyperlinks. */ .dropdown-menu > li > a:focus { outline: 0; } /* Bootstrap navbar More dropdown hyperlinks. */ .navbar { min-height: 0; border: 0; margin-bottom: 0; } /* Bootstrap navbar. */ .navbar-brand { font-family: "courier new", courier, monospace; font-size: 1.5em; font-weight: bold; } /* LWC logo in Bootstrap navbar. */ .navbar-inverse { background-color: #000; } /* Bootstrap navbar. */ .navbar-inverse .navbar-brand { color: #fff; } /* LWC logo in Bootstrap navbar. */ .navbar-inverse .navbar-brand:focus { outline: 0; } /* LWC logo in Bootstrap navbar. */ .navbar-inverse .navbar-nav > li > a { color: #fff; } /* Bootstrap navbar hyperlinks. */ .navbar-inverse .navbar-nav > li > a:hover { background-color: #333; } /* Bootstrap navbar hyperlinks. */ .navbar-inverse .navbar-nav > li > a:focus { outline: 0; } /* Bootstrap navbar hyperlinks. */ .navbar-inverse .navbar-nav > .open > a:hover { background-color: #333; } /* Bootstrap navbar More dropdown. More itself, not the dropdown. */
For an example of the LWC Bootstrap navbar, go to the top of this web page.
7.3. <noscript></noscript> Section
If the web browser does not support JavaScript or has JavaScript support disabled, the <noscript></noscript> section is displayed near the top of the web page below the LWC Bootstrap navbar in the place of the LWC Home breadcrumbs navigation (below). The <noscript></noscript> section reports that parts of this web site require JavaScript and are nonfunctional. The <noscript></noscript> section is used at LWC Home, not LWC Blog/Forums.
The <noscript></noscript> section uses the noscript element with the class='noscript' attribute and the div element with the class='container-fluid' attribute:
<header'> <nav class='lwc-navbar'><!-- Open LWC navbar HTML. --> ... </nav><!-- Close LWC navbar HTML. --> <nav class='navbar navbar-inverse navbar-static-top'><!-- Open LWC Bootstrap navbar HTML. --> ... </nav><!-- Close LWC Bootstrap navbar HTML. --> <noscript class='noscript'> <div class='container-fluid'><!-- container-fluid from Bootstrap. --> NOTE: Parts of this web site require JavaScript and are nonfunctional because your web browser does not support JavaScript or has JavaScript support disabled. </div><!-- Close noscript section div class='container-fluid'. --> </noscript> <nav><!-- Open LWC Home breadcrumbs navigation HTML. --> ... </nav><!-- Close LWC Home breadcrumbs navigation HTML. --> <script>/* Open LWC Home breadcrumbs navigation JavaScript. */ ... </script><!-- Close LWC Home breadcrumbs navigation JavaScript. --> <script>BcrumbsNavUtil.bcrumbsNav("", "HTML");</script> </header>
The div type selector is not assigned author styles. The noscript type selector and the .noscript and .container-fluid class selectors are assigned author styles. The Bootstrap .container-fluid class selector styles are defined in the Bootstrap style sheet bootstrap.css (learnwebcoding) file and are too numerous to show. The author style rules that supplement/override Bootstrap styles are indicated:
noscript { display: block; }
.noscript { color: #c41e3a; } /* IE6+ no support noscript type selector for styling content. Hence, class selector. */
/* Supplement/override Bootstrap styles. */
.container-fluid { max-width: 1170px; } /* Content. */
For an example of the <noscript></noscript> section content, disable JavaScript in the web browser, reload this web page, and then go to the top of this web page.
7.4. LWC Home Breadcrumbs Navigation
The LWC Home breadcrumbs navigation: 1.) is located near the top of the web page below the LWC Bootstrap navbar (above); 2.) has a white background and provides hyperlinks to directory landing pages up the directory tree to the web site home page; 3.) requires JavaScript; 4.) is used at LWC Home, not LWC Blog/Forums; and 5.) consists of three sections:
- LWC Home breadcrumbs navigation HTML. The LWC Home breadcrumbs navigation HTML provides the target element for the JavaScript
innerHTMLproperty. - LWC Home breadcrumbs navigation JavaScript. The LWC Home breadcrumbs navigation JavaScript is the
BcrumbsNavUtil.bcrumbsNav()method. - Call to the
BcrumbsNavUtil.bcrumbsNav()method. The call to theBcrumbsNavUtil.bcrumbsNav()method causes theBcrumbsNavUtil.bcrumbsNav()method to execute.
The LWC Home breadcrumbs navigation uses the nav element, the div element with the class='container-fluid' or id='bcrumbsNavId' and class='bcrumbs-nav' attributes, and the script element with the type='text/javascript' attribute:
<header> <nav class='lwc-navbar'><!-- Open LWC navbar HTML. --> ... </nav><!-- Close LWC navbar HTML. --> <nav class='navbar navbar-inverse navbar-static-top'><!-- Open LWC Bootstrap navbar HTML. --> ... </nav><!-- Close LWC Bootstrap navbar HTML. --> <noscript class='noscript'> ... </noscript> <nav><!-- Open LWC Home breadcrumbs navigation HTML. --> <div class='container-fluid'><!-- container-fluid from Bootstrap. --> <div id='bcrumbsNavId' class='bcrumbs-nav'> </div><!-- Content provided by BcrumbsNavUtil.bcrumbsNav(), which is defined immediately below. --> </div><!-- Close LWC Home breadcrumbs navigation HTML div class='container-fluid'. --> </nav><!-- Close LWC Home breadcrumbs navigation HTML. --> <script>/* Open LWC Home breadcrumbs navigation JavaScript. */ var BcrumbsNavUtil = { bcrumbsNav: function(){ var bcrumbsNav = document.getElementById("bcrumbsNavId"); var bcrumbsNavHtmlString = "<a href='/index.php'>Home</a>"; if (arguments.length > 0){ for (var i = 0; i < arguments.length; i = i + 2){ bcrumbsNavHtmlString += " → <a href='" + arguments[i] + "index.php'>" + arguments[i + 1] + "</a>"; } } bcrumbsNav.innerHTML = bcrumbsNavHtmlString; } }; </script><!-- Close LWC Home breadcrumbs navigation JavaScript. --> <script>BcrumbsNavUtil.bcrumbsNav("", "HTML");</script> </header>
The BcrumbsNavUtil.bcrumbsNav() method generates a breadcrumbs navigation HTML string and assigns it to the JavaScript innerHTML property of the HTML element with the id='bcrumbsNavId' attribute, which inserts the breadcrumbs navigation HTML string on the DOM and displays the breadcrumbs navigation:
<header> <nav class='lwc-navbar'><!-- Open LWC navbar HTML. --> ... </nav><!-- Close LWC navbar HTML. --> <nav class='navbar navbar-inverse navbar-static-top'><!-- Open LWC Bootstrap navbar HTML. --> ... </nav><!-- Close LWC Bootstrap navbar HTML. --> <noscript class='noscript'> ... </noscript> <nav><!-- Open LWC Home breadcrumbs navigation HTML. --> <div class='container-fluid'><!-- container-fluid from Bootstrap. --> <div id='bcrumbsNavId' class='bcrumbs-nav'><a href='/index.html'>Home</a> → <a href='index.html'>HTML</a></div> </div> </nav><!-- Close LWC Home breadcrumbs navigation HTML. --> <script>/* Open LWC Home breadcrumbs navigation JavaScript. */ var BcrumbsNavUtil = { bcrumbsNav: function(){ var bcrumbsNav = document.getElementById("bcrumbsNavId"); var bcrumbsNavHtmlString = "<a href='/index.php'>Home</a>"; if (arguments.length > 0){ for (var i = 0; i < arguments.length; i = i + 2){ bcrumbsNavHtmlString += " → <a href='" + arguments[i] + "index.php'>" + arguments[i + 1] + "</a>"; } } bcrumbsNav.innerHTML = bcrumbsNavHtmlString; } }; </script><!-- Close LWC Home breadcrumbs navigation JavaScript. --> <script>BcrumbsNavUtil.bcrumbsNav("", "HTML");</script> </header>
The nav and div type selectors and the #bcrumbsNavId ID selector are not assigned author styles. The a type selector, the .bcrumbs-nav a descendant selector, the .container-fluid and .bcrumbs-nav class selectors, and the a:hover, a:focus, .bcrumbs-nav a:hover, and .bcrumbs-nav a:focus pseudo-class selectors are assigned author styles. The Bootstrap .container-fluid class selector styles are defined in the Bootstrap style sheet bootstrap.css (learnwebcoding) file and are too numerous to show. The author style rules that supplement/override Bootstrap styles are indicated:
a { color: #005a9c; text-decoration: none; } /* From normal hyperlinks below. */
a:hover { color: #000; text-decoration: underline; } /* From normal hyperlinks below. */
a:focus { outline: thin dotted invert; } /* From normal hyperlinks below. */
.bcrumbs-nav { font-size: 0.9em; color: #888; margin-top: 9px; }
.bcrumbs-nav a { color: #888; }
.bcrumbs-nav a:hover { color: #000; text-decoration: none; }
.bcrumbs-nav a:focus { outline: 0; }
/* Supplement/override Bootstrap styles. */
.container-fluid { max-width: 1170px; } /* Content. */
Some notes on the LWC Home breadcrumbs navigation:
- LWC Home breadcrumbs navigation is intended for, but does not require, the following directory/file tree structure:
/web_server_root_directory (root directory of web server) (might be named htdocs, public_html, www, wwwroot, etc.) ├─ index.php (web site home page) (no breadcrumbs) ├─ another-web-page-in-web-server-root-directory.php (breadcrumb: Home) └─ /subdirectory ├─ index.php (subdirectory landing page) (breadcrumb: Home) ├─ another-web-page-in-subdirectory.php (breadcrumbs: Home | Subdirectory) └─ /subsubdirectory ├─ index.php (subsubdirectory landing page) (breadcrumbs: Home | Subdirectory) └─ another-web-page-in-subsubdirectory.php (breadcrumbs: Home | Subdirectory | Subsubdirectory) - The Home breadcrumb is a hyperlink to the web site home page. The Home breadcrumb is hard coded into the
BcrumbsNavUtil.bcrumbsNav()method. Therefore, to display the Home breadcrumb, call theBcrumbsNavUtil.bcrumbsNav()method with no arguments. - The path for the Home breadcrumb is /index.php, which is a root relative path.
- Subsequent breadcrumbs are hyperlinks to directory landing pages up the directory tree to the web site home page. For each subsequent breadcrumb after the Home breadcrumb, call the
BcrumbsNavUtil.bcrumbsNav()method with two arguments in the following order:- The relative path from the current web page to the directory landing web page as a string, without the directory landing page filename, which is assumed to be index.php and, therefore, is hard coded into the
BcrumbsNavUtil.bcrumbsNav()method. For example,"", not"index.php", and"../", not"../index.php". - The name of the directory landing web page as a string. This becomes the name of the breadcrumb. For example,
"Subdirectory".
- To display the Home breadcrumb with one subsequent breadcrumb, call the
BcrumbsNavUtil.bcrumbsNav()method with two arguments. - To display the Home breadcrumb with two subsequent breadcrumbs, call the
BcrumbsNavUtil.bcrumbsNav()method with four arguments. - To display the Home breadcrumb with three subsequent breadcrumbs, call the
BcrumbsNavUtil.bcrumbsNav()method with six arguments. - Syntax to display the Home breadcrumb with three subsequent breadcrumbs:
BcrumbsNavUtil.bcrumbsNav("relativePathToDirectoryLandingPage1", "nameDirectoryLandingPage1", "relativePathToDirectoryLandingPage2", "nameDirectoryLandingPage2", "relativePathToDirectoryLandingPage3", "nameDirectoryLandingPage3"). - For example, to generate the breadcrumbs for the another-web-page-in-subsubdirectory.php web page in the file/directory tree above, the call to
BcrumbsNavUtil.bcrumbsNav()isBcrumbsNavUtil.bcrumbsNav ("../", "Subdirectory", "", "Subsubdirectory").
- The relative path from the current web page to the directory landing web page as a string, without the directory landing page filename, which is assumed to be index.php and, therefore, is hard coded into the
- To not display the LWC Home breadcrumbs navigation, comment out or remove the call to the
BcrumbsNavUtil.bcrumbsNav()method.
The BcrumbsNavUtil.bcrumbsNav() method source code:
var BcrumbsNavUtil = {
bcrumbsNav: function(){
var bcrumbsNav = document.getElementById("bcrumbsNavId");
var bcrumbsNavHtmlString = "<a href='/index.php'>Home</a>";
if (arguments.length > 0){
for (var i = 0; i < arguments.length; i = i + 2){
bcrumbsNavHtmlString += " → <a href='" + arguments[i] + "index.php'>" + arguments[i + 1] + "</a>";
}
}
bcrumbsNav.innerHTML = bcrumbsNavHtmlString;
}
};
BcrumbsNavUtil.bcrumbsNav() method source code notes:
- Line 1: Defines
BcrumbsNavUtilas an object literal. - Line 2: Defines the
bcrumbsNav()function as a method of theBcrumbsNavUtilobject. - Line 3: Gets a reference to the element with the
id='bcrumbsNavId'attribute, and assigns the reference tobcrumbsNav.bcrumbsNavis a local variable. - Line 4: Initializes the
bcrumbsNavHtmlStringvariable with a hard coded HTML string for the Home breadcrumb. The path for the Home breadcrumb is /index.php, which is a root relative path. - Line 5: Determines if the call to
BcrumbsNavUtil.bcrumbsNav()included arguments. If yes, run theforloop. If no, go to line 10. - Lines 6 - 8: The built-in JavaScript
argumentsobject stores all of the arguments passed into a function. Theargumentsobject is similar to an array in that zero based bracket notation is used to get the argument values. For example,arguments[0]gets the value of the first argument passed into a function. Each iteration of theforloop processes the next two arguments passed into theBcrumbsNavUtil.bcrumbsNav()method into an HTML string for one breadcrumb, which is appended to the end of thebcrumbsNavHtmlStringvariable. - Line 10: Assigns the
bcrumbsNavHtmlStringvariable to the JavaScriptinnerHTMLproperty of the HTML element with theid='bcrumbsNavId'attribute. This inserts thebcrumbsNavHtmlStringvariable value as the child node of<div id='bcrumbsNavId'></div>on the DOM, which displays the breadcrumbs navigation.
For an example of the LWC Home breadcrumbs navigation, go to the top of this web page.
8. <main></main> Section
The <main></main> section (a.k.a., main) is located between the <header></header> section (above) and the <footer></footer> section (below) and consists of five sections:
- Web page title (below) .
- Last reviewed/updated, published, and status information (below) .
- Web browser and LWC Home tools icon dropdown (below) .
- Table of contents (below) .
- Sections (below) .
The main uses the main element and the div element with the class='container-fluid' attribute:
</header> <main> <div class='container-fluid'><!-- container-fluid from Bootstrap. --> <h1>...</h1> <div class='lastReviewed'>...</div> <div class='web-browser-support-and-tools-icon-dropdown-container'>...</div> <nav id='tocId' class='toc'>...</nav> <hr /> <section>...</section> <hr /> <section>...</section> </div><!-- Close main section div class='container-fluid'. --> </main> <footer>
The div type selector is not assigned author styles. The main type selector and the .container-fluid class selector are assigned author styles. The Bootstrap .container-fluid class selector styles are defined in the Bootstrap style sheet bootstrap.css (learnwebcoding) file and are too numerous to show. The author style rules that supplement/override Bootstrap styles are indicated:
main { display: block; }
/* Supplement/override Bootstrap styles. */
.container-fluid { max-width: 1170px; } /* Content. */
For an example of the main, scroll up and down this web page between the header and the footer. This content is an example of the main.
8.1. Web Page Title
The web page title is located near the top of the web page below the LWC Home breadcrumbs navigation (above).
The web page title uses the h1 element:
<main> <div class='container-fluid'><!-- container-fluid from Bootstrap. --> <h1>Web Page Title</h1> <div class='lastReviewed'>...</div> <div class='web-browser-support-and-tools-icon-dropdown-container'>...</div> <nav id='tocId' class='toc'>...</nav> <hr /> <section>...</section> <hr /> <section>...</section> </div><!-- Close main section div class='container-fluid'. --> </main>
The h1 type selector is assigned author styles:
h1 {
font-size: 2.4em;
font-weight: normal;
color: #005a9c;
margin: 14px 0;
}
For an example of a web page title, go to the top of this web page.
8.2. Last Reviewed/Updated, Published, And Status Information
The last reviewed/updated, published, and status information is located near the top of the web page below the web page title (above).
The last reviewed/updated, published, and status information uses the div element with the class='last-reviewed' attribute:
<main> <div class='container-fluid'><!-- container-fluid from Bootstrap. --> <h1>...</h1> <div class='lastReviewed'>Last reviewed/updated: 07 Oct 2016 | Published: 08 Jan 2014 | Status: Active</div> <div class='web-browser-support-and-tools-icon-dropdown-container'>...</div> <nav id='tocId' class='toc'>...</nav> <hr /> <section>...</section> <hr /> <section>...</section> </div><!-- Close main section div class='container-fluid'. --> </main>
The div type selector is not assigned author styles. The .lastReviewed class selector is assigned author styles:
.last-reviewed {
font-size: 0.9em;
color: #888;
}
Example of the last reviewed/updated, published, status information:
8.3. Web Browser Support And LWC Home Tools Icon Dropdown
The web browser support and LWC Home tools icon dropdown is located near the top of the web page below the last reviewed/updated, published, and status information (above) and consists of two sections:
The web browser support and LWC Home tools icon dropdown use the div element with the class='web-browser-support-and-tools-icon-dropdown-container' attribute.
<main> <div class='container-fluid'><!-- container-fluid from Bootstrap. --> <h1>...</h1> <div class='lastReviewed'>...</div> <div class='web-browser-support-and-tools-icon-dropdown-container'> <div class='web-browser-support'>...</div> <div id='toolsIconDropdownContainerId' class='tools-icon-dropdown-container'>...</div> <div class='clear-both'></div> </div> <nav id='tocId' class='toc'>...</nav> <hr /> <section>...</section> <hr /> <section>...</section> </div><!-- Close main section div class='container-fluid'. --> </main>
The div type selector is not assigned author styles. The .web-browser-support-and-tools-icon-dropdown-container class selector is assigned author styles:
.web-browser-support-and-tools-icon-dropdown-container {
margin: 2px 0 21px;
}
8.3.1. Web Browser Support
The web browser support provides a list of web browsers that the web page supports.
The web browser support uses the div element with the class='web-browser-support' attribute.
<div class='web-browser-support-and-tools-icon-dropdown-container'> <div class='web-browser-support'>Web browser support: Internet Explorer 10+, Edge 12+, Firefox 6+, Chrome 30+, Opera 17+</div> <div id='toolsIconDropdownContainerId' class='tools-icon-dropdown-container'>...</div> <div class='clear-both'></div> </div>
The div type selector is not assigned author styles. The .web-browser-support class selector is assigned author styles:
.web-browser-support {
float: left;
font-size: 0.9em;
color: #888;
margin-right: 20px;
padding-top: 2px;
}
Example of the web browser support:
8.3.2. LWC Home Tools Icon Dropdown
The LWC Home tools icon dropdown uses a clickable Font Awesome (fontawesome.io) cog (a.k.a., tools) () icon to display a dropdown from which the user can select to: 1.) display the table of contents expanded, collapsed, or hidden; and 2.) display the web page for screen, printing with images, or printing without images.
The LWC Home tools icon dropdown uses the div element with the id='toolsIconDropdownContainerId' and class='tools-icon-dropdown-container', class='fa fa-cog fa-lg cursor-pointer', id='toolsIconDropdownId' and class='tools-icon-dropdown display-none', class='tools-icon-dropdown-header', and id='toolsIconDropdownOption#Id' and class='tools-icon-dropdown-option' attributes, and the span element with the id='toolsIconDropdownOption#MarkerId' attribute and the class='fa fa-check' attribute with or without display-none:
<div class='web-browser-support-and-tools-icon-dropdown-container'> <div class='web-browser-support'>...</div> <div id='toolsIconDropdownContainerId' class='tools-icon-dropdown-container'> <div class='fa fa-cog fa-lg cursor-pointer'></div> <div id='toolsIconDropdownId' class='tools-icon-dropdown display-none'> <div class='tools-icon-dropdown-header'>Table Of Contents</div> <div id='toolsIconDropdownOption1Id' class='tools-icon-dropdown-option'>Show Expanded (F5) <span id='toolsIconDropdownOption1MarkerId' class='fa fa-check'></span></div> <div id='toolsIconDropdownOption2Id' class='tools-icon-dropdown-option'>Show Collapsed <span id='toolsIconDropdownOption2MarkerId' class='fa fa-check display-none'></span></div> <div id='toolsIconDropdownOption3Id' class='tools-icon-dropdown-option'>Hide <span id='toolsIconDropdownOption3MarkerId' class='fa fa-check display-none'></span></div> <div class='tools-icon-dropdown-header'>Display Web Page For</div> <div id='toolsIconDropdownOption4Id' class='tools-icon-dropdown-option'>Screen (F5) <span id='toolsIconDropdownOption4MarkerId' class='fa fa-check'></span></div> <div id='toolsIconDropdownOption5Id' class='tools-icon-dropdown-option'>Printing With Images <span id='toolsIconDropdownOption5MarkerId' class='fa fa-check display-none'></span></div> <div id='toolsIconDropdownOption6Id' class='tools-icon-dropdown-option'>Printing Without Images <span id='toolsIconDropdownOption6MarkerId' class='fa fa-check display-none'></span></div> </div> </div> <div class='clear-both'></div> </div>
Clicking the Font Awesome tools icon displays the LWC Home tools icon dropdown. The LWC Home tools icon dropdown has six options under two headings:
- Table Of Contents
- Show Expanded (F5)
- Show Collapsed
- Hide
- Display Web Page For
- Screen (F5)
- Printing With Images
- Printing Without Images
For the id='toolsIconDropdownOption#Id' and id='toolsIconDropdownOption#MarkerId' attributes, replace the number (#) character with the option's position (1 - 6 from top to bottom, excluding dropdown headings) in the LWC Home tools icon dropdown. The Font Awesome check () icon markers indicate the currently displayed versions of the web page. By default, the Table Of Contents Show Expanded (F5) and Display Web Page For Screen (F5) versions are displayed. To indicate this, the span elements corresponding to the Show Expanded (F5) option and the Screen (F5) option do not include the class='display-none' attribute, which allows their check icon markers to be shown, and the span elements corresponding to the other options include the class='display-none' attribute, which causes their check icon markers to be hidden.
The div and span type selectors and the #toolsIconDropdownContainerId, #toolsIconDropdownId, #toolsIconDropdownOption#Id, and #toolsIconDropdownOption#MarkerId ID selectors are not assigned author styles. The .tools-icon-dropdown-container, .cursor-pointer, .tools-icon-dropdown, .tools-icon-dropdown-header, .tools-icon-dropdown-option, and .display-none class selectors and the .tools-icon-dropdown > div:first-child, .tools-icon-dropdown > div:last-child, and .tools-icon-dropdown-option:hover pseudo-class selectors are assigned author styles. The .fa, .fa-cog, .fa-lg, and .fa-check class selectors are Font Awesome class selectors and are not shown:
.tools-icon-dropdown-container { display: inline-block; position: relative; margin-top: 0.5em; }
.tools-icon-dropdown { position: absolute; background-color: #fff; white-space: nowrap; border: 1px solid #c2c2c2; border-radius: 3px; box-shadow: 0 1px 6px 3px #c2c2c2; list-style-type: none; margin-top: 6px; padding-left: 0px; }
.tools-icon-dropdown-header { font-weight: bold; padding: 4px 12px 4px 9px; }
.tools-icon-dropdown-option { cursor: pointer; padding: 4px 12px 4px 18px; }
.tools-icon-dropdown-option:hover { background-color: #f2f2f2; }
.tools-icon-dropdown > div:first-child { padding-top: 8px; }
.tools-icon-dropdown > div:last-child { padding-bottom: 8px; }
.cursor-pointer { cursor: pointer; }
.display-none { display: none; }
@media (min-width: 816px) { .tools-icon-dropdown-container { margin-top: 0; } .web-browser-support, .tools-icon-dropdown-container { float: left; } .tools-icon-dropdown { border: 1px solid #d7d7d7; box-shadow: 0 1px 6px 0 #ccc; margin-top: 3px; } }
If the viewport width is greater than or equal to 816 pixels, the LWC Home tools icon dropdown appears on the same line as the web browser support after the web browser support. If the viewport width is less than 816 pixels, the LWC Home tools icon dropdown appears on a new line underneath the web browser support. Changing the location of the LWC Home tools icon dropdown in the web page ensures that the dropdown remains visible as the viewport width decreases.
The LWC Home tools icon dropdown uses two LWC Home JavaScript objects. These objects are defined in the LWC Home sitewide JavaScript library_load_in_body.js (learnwebcoding.com) file, which is loaded into the web browser in the <body></body> section (above):
EventUtilobject:- Method:
EventUtil.registerEventHandler(). Purpose: to register event handlers cross browser.
- Method:
ToolsIconDropdownUtilobject:- Method:
ToolsIconDropdownUtil.showHideToolsIconDropdown(). Purpose: To show/hide the LWC Home tools icon dropdown. - Method:
ToolsIconDropdownUtil.changeDisplayOfWebPage(). Purpose: To change the display of the web page per the selected option. For options 1 - 3, expand, collapse, or hide the table of contents (below) and show/hide the option check icon markers. For options 4 - 6, show/hide the<header></header>section (above) content, change an external style sheet, and show/hide the option check icon markers.
- Method:
Selecting the Display Web Page For options 4 - 6 triggers the ToolsIconDropdownUtil.changeDisplayOfWebPage() method to change the display of the web page for screen or printing. The ToolsIconDropdownUtil.changeDisplayOfWebPage() method accomplishes this by showing/hiding the <header></header> section content and by setting an external style sheet file on the JavaScript href property of the link element with the id='changeableExtSSLinkElementId' attribute. So that the styles of this dynamically changeable external style sheet may supplement/override the styles of the LWC Home sitewide main style sheet, the changeable external style sheet is placed/loaded after the LWC Home sitewide main style sheet:
<head> <title>Learn Web Coding Home Template Explained</title><!-- No markup in title tags. --> <meta charset='UTF-8' /> <meta name='Author' content='Steve Taylor' /> <meta name='Keywords' content='Learn Web Coding Home, template, explained' /><!-- Cap words as if used in sentence. No markup in Keywords. --> <meta name='Description' content='An explanation of the Learn Web Coding Home Template.' /><!-- Sentence and/or structured data less than 160 char per Google. No markup in Description. --> <meta name='viewport' content='width=device-width, initial-scale=1' /> <link rel='stylesheet' type='text/css' media='all' href='/stylesheets/fontawesome/font-awesome.min.css' /> <link rel='stylesheet' type='text/css' media='all' href='/stylesheets/bootstrap/bootstrap.min.css' /> <link rel='stylesheet' type='text/css' media='all' href='/stylesheets/lwc/lwc.min.css' /> <link rel='stylesheet' type='text/css' media='all' href='/stylesheets/lwc/print_default.min.css' id='changeableExtSSLinkElementId' /> </head>
The effect of selecting the LWC Home tools icon dropdown Display Web Page For options on the <header></header> section content and the changeable external style sheet:
| Display Web Page For Option | <header></header> Section Content |
Sets Changeable External Style Sheet To |
|---|---|---|
| Screen (F5) | Shown | print_default.min.css |
| Printing With Images | Hidden | print_with_images.min.css |
| Printing Without Images | Hidden | print_without_images.min.css |
If the Display Web Page For Screen (F5) option is selected, ToolsIconDropdownUtil.changeDisplayOfWebPage() sets the changeable external style sheet to print_default.min.css, which is a dummy style sheet that contains no styles and, therefore, does not supplement/override any of the LWC Home sitewide main style sheet styles.
href='' attribute, allows the LWC Home Template to be valid CSS Level 3 per the W3C CSS Validation Service.If the Display Web Page For Printing With Images option is selected, ToolsIconDropdownUtil.changeDisplayOfWebPage() sets the changeable external style sheet to print_with_images.min.css, which stops content from exceeding the width of the page and reduces black ink usage:
/* Supplement/Override Bootstrap Styles (/stylesheets/bootstrap/bootstrap.css) */ .container-fluid { max-width: 100%; } /* Supplement/Override LWC Home Main Style Sheet Styles (/stylesheets/lwc/lwc.css) */ body { color: #333; } pre, caption, .note, code { background-color: #fff; } .note code, .note pre { background-color: #fff; } .toc a { color: #333; } .link-list > li > a { color: #333; }
If the Display Web Page For Printing Without Images option is selected, ToolsIconDropdownUtil.changeDisplayOfWebPage() sets the changeable external style sheet to print_without_images.min.css, which stops content from exceeding the width of the page, reduces black ink usage, and stops images from being shown and printed:
/* Supplement/Override Bootstrap Styles (/stylesheets/bootstrap/bootstrap.css) */ .container-fluid { max-width: 100%; } /* Supplement/Override LWC Home Styles (/stylesheets/lwc/lwc.css) */ body { color: #333; } pre, caption, .note, code { background-color: #fff; } .note code, .note pre { background-color: #fff; } .toc a { color: #333; } .link-list > li > a { color: #333; } img, footer img, .img-rt-pnt-tri { display: none; }
For an example of the LWC Home tools icon dropdown, go to the top of this web page and click the tools () icon.
8.4. Table Of Contents
The table of contents is located near the top of the web page below the web browser support and LWC Home tools icon dropdown (above) and lists, and links to, sections (below). There are three levels of section titles. Correspondingly, there are three levels of table of contents section titles:
- Table of contents section titles.
- Table of contents subsection titles.
- Table of contents subsubsection titles.
- Table of contents subsubsubsection titles.
The table of contents uses the nav element with the id='tocId' and class='toc' attributes:
<main> <div class='container-fluid'><!-- container-fluid from Bootstrap. --> <h1>...</h1> <div class='lastReviewed'>...</div> <div class='web-browser-support-and-tools-icon-dropdown-container'>...</div> <nav id='tocId' class='toc'> <div class='toc-sec'><div class='toc-num'>99.</div><div class='toc-sec-title'><a href='#sectionTitle'>Section Title</a></div></div> <div class='toc-sub1sec'><div class='toc-num'>99.1.</div><div class='toc-sub1sec-title'><a href='#subsectionTitle'>Subsection Title</a></div></div> <div class='toc-sub2sec'><div class='toc-num'>99.1.1.</div><div class='toc-sub2sec-title'><a href='#subsubsectionTitle'>Subsubsection Title</a></div></div> <div class='toc-sub3sec'><div class='toc-num'>99.1.1.1.</div><div class='toc-sub3sec-title'><a href='#subsubsubsectionTitle'>Subsubsubsection Title</a></div></div> </nav> <hr /> <section>...</section> <hr /> <section>...</section> </div><!-- Close main section div class='container-fluid'. --> </main>
The nav type selector, the #tocId ID selector, and the .toc class selector are not assigned author styles.
8.4.1. Table Of Contents Section Titles
The table of contents section titles use the div element with the class='toc-sec', class='toc-num', or class='toc-sec-title' attribute and the a element with the href attribute:
<nav id='tocId' class='toc'> <div class='toc-sec'><div class='toc-num'>99.</div><div class='toc-sec-title'><a href='#sectionTitle'>Section Title</a></div></div> <div class='toc-sub1sec'><div class='toc-num'>99.1.</div><div class='toc-sub1sec-title'><a href='#subsectionTitle'>Subsection Title</a></div></div> <div class='toc-sub2sec'><div class='toc-num'>99.1.1.</div><div class='toc-sub2sec-title'><a href='#subsubsectionTitle'>Subsubsection Title</a></div></div> <div class='toc-sub3sec'><div class='toc-num'>99.1.1.1.</div><div class='toc-sub3sec-title'><a href='#subsubsubsectionTitle'>Subsubsubsection Title</a></div></div> </nav>
The div type selector is not assigned author styles. The a type selector, the .toc a descendant selector, the .toc > div child selector, the .toc-sec, .toc-num, and .toc-sec-title class selectors, and the a:hover pseudo-class selector are assigned author styles:
a { color: #005a9c; text-decoration: none; } /* From normal hyperlinks below. */
a:hover { color: #000; text-decoration: underline; } /* From normal hyperlinks below. */
a:focus { outline: thin dotted invert; } /* From normal hyperlinks below. */ /* Focus does not work on intra-page hyperlinks; hence, strike-through. */
.toc a { color: #000; }
.toc-sec { font-weight: bold; line-height: 1.75; }
.toc-num { float: left; }
.toc-sec-title { margin-left: 5em; }
.toc > div { clear: both; }
Example of a table of contents section title:
8.4.2. Table Of Contents Subsection Titles
The table of contents subsection titles use the div element with the class='toc-sub1sec', class='toc-num', or class='toc-sub1sec-title' attribute and the a element with the href attribute:
<nav id='tocId' class='toc'> <div class='toc-sec'><div class='toc-num'>99.</div><div class='toc-sec-title'><a href='#sectionTitle'>Section Title</a></div></div> <div class='toc-sub1sec'><div class='toc-num'>99.1.</div><div class='toc-sub1sec-title'><a href='#subsectionTitle'>Subsection Title</a></div></div> <div class='toc-sub2sec'><div class='toc-num'>99.1.1.</div><div class='toc-sub2sec-title'><a href='#subsubsectionTitle'>Subsubsection Title</a></div></div> <div class='toc-sub3sec'><div class='toc-num'>99.1.1.1.</div><div class='toc-sub3sec-title'><a href='#subsubsubsectionTitle'>Subsubsubsection Title</a></div></div> </nav>
The div type selector is not assigned author styles. The a type selector, the .toc a descendant selector, the .toc > div child selector, the .toc-sub1sec, .toc-num, and .toc-sub1sec-title class selectors, and the a:hover pseudo-class selector are assigned author styles:
a { color: #005a9c; text-decoration: none; } /* From normal hyperlinks below. */
a:hover { color: #000; text-decoration: underline; } /* From normal hyperlinks below. */
a:focus { outline: thin dotted invert; } /* From normal hyperlinks below. */ /* Focus does not work on intra-page hyperlinks; hence, strike-through. */
.toc a { color: #000; }
.toc-sub1sec { line-height: 1.75; }
.toc-num { float: left; }
.toc-sub1sec-title { margin-left: 5.75em; }
.toc > div { clear: both; }
Example of a table of contents subsection title:
8.4.3. Table Of Contents Subsubsection Titles
Table of contents subsubsection titles use the div element with the class='toc-sub2sec', class='toc-num', or class='toc-sub2sec-title' attribute and the a element with the href attribute:
<nav id='tocId' class='toc'> <div class='toc-sec'><div class='toc-num'>99.</div><div class='toc-sec-title'><a href='#sectionTitle'>Section Title</a></div></div> <div class='toc-sub1sec'><div class='toc-num'>99.1.</div><div class='toc-sub1sec-title'><a href='#subsectionTitle'>Subsection Title</a></div></div> <div class='toc-sub2sec'><div class='toc-num'>99.1.1.</div><div class='toc-sub2sec-title'><a href='#subsubsectionTitle'>Subsubsection Title</a></div></div> <div class='toc-sub3sec'><div class='toc-num'>99.1.1.1.</div><div class='toc-sub3sec-title'><a href='#subsubsubsectionTitle'>Subsubsubsection Title</a></div></div> </nav>
The div type selector is not assigned author styles. The a type selector, the .toc a descendant selector, the .toc > div child selector, the .toc-sub2sec, .toc-num, and .toc-sub2sec-title class selectors, and the a:hover pseudo-class selector are assigned author styles:
a { color: #005a9c; text-decoration: none; } /* From normal hyperlinks below. */
a:hover { color: #000; text-decoration: underline; } /* From normal hyperlinks below. */
a:focus { outline: thin dotted invert; } /* From normal hyperlinks below. */ /* Focus does not work on intra-page hyperlinks; hence, strike-through. */
.toc a { color: #000; }
.toc-sub2sec { line-height: 1.75; }
.toc-num { float: left; }
.toc-sub2sec-title { margin-left: 6.5em; }
.toc > div { clear: both; }
Example of a table of contents subsubsection title:
8.4.4. Table Of Contents Subsubsubsection Titles
Table of contents subsubsubsection titles use the div element with the class='toc-sub3sec', class='toc-num', or class='toc-sub3sec-title' attribute and the a element with the href attribute:
<nav id='tocId' class='toc'> <div class='toc-sec'><div class='toc-num'>99.</div><div class='toc-sec-title'><a href='#sectionTitle'>Section Title</a></div></div> <div class='toc-sub1sec'><div class='toc-num'>99.1.</div><div class='toc-sub1sec-title'><a href='#subsectionTitle'>Subsection Title</a></div></div> <div class='toc-sub2sec'><div class='toc-num'>99.1.1.</div><div class='toc-sub2sec-title'><a href='#subsubsectionTitle'>Subsubsection Title</a></div></div> <div class='toc-sub3sec'><div class='toc-num'>99.1.1.1.</div><div class='toc-sub3sec-title'><a href='#subsubsubsectionTitle'>Subsubsubsection Title</a></div></div> </nav>
The div type selector is not assigned author styles. The a type selector, the .toc a descendant selector, the .toc > div child selector, the .toc-sub3sec, .toc-num, and .toc-sub3sec-title class selectors, and the a:hover pseudo-class selector are assigned author styles:
a { color: #005a9c; text-decoration: none; } /* From normal hyperlinks below. */
a:hover { color: #000; text-decoration: underline; } /* From normal hyperlinks below. */
a:focus { outline: thin dotted invert; } /* From normal hyperlinks below. */ /* Focus does not work on intra-page hyperlinks; hence, strike-through. */
.toc a { color: #000; }
.toc-sub3sec { line-height: 1.75; }
.toc-num { float: left; }
.toc-sub3sec-title { margin-left: 7.25em; }
.toc > div { clear: both; }
Example of a table of contents subsubsubsection title:
8.5. <section></section> Sections
One or more <section></section> sections typically constitute the majority of the web page content and are located between the table of contents (above) and the <footer></footer> section (below). There are three levels of section titles:
- Section titles.
- Subsection titles.
- Subsubsection titles.
- Subsubsubsection titles.
A section consists of a section title and all of its subsection titles and subsubsection titles. Sections use the section element. Each section is preceded by an <hr /> tag. There is no <hr /> tag after the last closing </section> tag:
<main> <div class='container-fluid'><!-- container-fluid from Bootstrap. --> <h1>...</h1> <div class='lastReviewed'>...</div> <div class='web-browser-support-and-tools-icon-dropdown-container'>...</div> <nav id='tocId' class='toc'>...</nav> <hr /> <section> <h2><a id='sectionTitle'></a>99. Section Title</h2> <p>Content.</p> <h3><a id='subsectionTitle'></a>99.1. Subsection Title</h3> <p>Content.</p> <h4><a id='subsubsectionTitle'></a>99.1.1. Subsubsection Title</h4> <p>Content.</p> <h5><a id='subsubsubsectionTitle'></a>99.1.1.1. Subsubsubsection Title</h5> <p>Content.</p> </section> <hr /> <section> <h2><a id='sectionTitle'></a>100. Section Title</h2> <p>Content.</p> <h3><a id='subsectionTitle'></a>100.1. Subsection Title</h3> <p>Content.</p> <h4><a id='subsubsectionTitle'></a>100.1.1. Subsubsection Title</h4> <p>Content.</p> <h5><a id='subsubsubsectionTitle'></a>100.1.1.1. Subsubsubsection Title</h5> <p>Content.</p> </section> </div><!-- Close main section div class='container-fluid'. --> </main>
8.5.1. Section Titles
Section titles use the h2 element and the a element with the id='sectionTitle' attribute. The <a id='sectionTitle'></a> tag has no content:
<h2><a id='sectionTitle'></a>99. Section Title</h2>
The h2 type selector is assigned author styles:
h2 {
font-size: 1.8em;
font-weight: normal;
color: #005a9c;
margin: 28px 0 14px;
}
Example of a section title:
99. Section Title First Letter Each Word Cap
8.5.2. Subsection Titles
Subsection titles use the h3 element and the a element with the id='subsectionTitle' attribute. The <a id='subsectionTitle'></a> tag has no content:
<h3><a id='subsectionTitle'></a>99.1. Subsection Title</h3>
The h3 type selector is assigned author styles:
h3 {
font-size: 1.5em;
font-weight: normal;
color: #005a9c;
margin: 21px 0 14px;
}
Example of a subsection title:
99.1. Subsection Title First Letter Each Word Cap
8.5.3. Subsubsection Titles
Subsubsection titles use the h4 element and the a element with the id='subsubsectionTitle' attribute. The <a id='subsubsectionTitle'></a> tag has no content:
<h4><a id='subsubsectionTitle'></a>99.1.1. Subsubsection Title</h4>
The h4 type selector is assigned author styles:
h4 {
font-size: 1.2em;
font-weight: normal;
color: #005a9c;
margin: 21px 0 14px;
}
Example of a subsubsection title:
99.1.1. Subsubsection Title First Letter Each Word Cap
8.5.4. Subsubsubsection Titles
Subsubsubsection titles use the h5 element and the a element with the id='subsubsubsectionTitle' attribute. The <a id='subsubsubsectionTitle'></a> tag has no content:
<h5><a id='subsubsubsectionTitle'></a>99.1.1. Subsubsubsection Title</h5>
The h5 type selector is assigned author styles:
h5 {
font-size: 1.1em;
font-weight: normal;
color: #005a9c;
margin: 21px 0 14px;
}
Example of a subsubsubsection title:
99.1.1.1. Subsubsubsection Title First Letter Each Word Cap
9. <footer></footer> Section
The <footer></footer> section (a.k.a., footer) is located at the bottom of the web page and consists of two sections:
- LWC logo. The LWC logo is a hyperlink to the LWC home page.
- W3C Valid HTML5 and Valid CSS Level 3 buttons. The W3C Valid HTML5 and Valid CSS Level 3 buttons are for validating the web page HTML and CSS code, respectively. To validate, click the buttons.
The footer uses the footer element and the div element with the class='container-fluid' attribute:
</main> <footer> <div class='container-fluid'><!-- container-fluid from Bootstrap. --> ... </div><!-- Close footer section div class='container-fluid'. --> </footer> Assets loaded in the body section </body>
The div type selector is not assigned author styles. The footer type selector and the .container-fluid class selector are assigned author styles. The Bootstrap .container-fluid class selector styles are defined in the Bootstrap style sheet bootstrap.css (learnwebcoding) file and are too numerous to show. The author style rules that supplement/override Bootstrap styles are indicated:
footer { display: block; margin: 1em 0; }
/* Supplement/override Bootstrap styles. */
.container-fluid { max-width: 1170px; } /* Content. */
The LWC logo uses the div element and the a element with the href and class='link-lwc-logo'attributes. The W3C Valid HTML5 and Valid CSS Level 3 buttons use the div element, the a element with the href attribute, and the img element with the src and alt attributes:
<footer> <div class='container-fluid'><!-- container-fluid from Bootstrap. --> <div><a href='http://www.learnwebcoding.com/' class='link-lwc-logo'>Learn Web Coding</a></div> <div><a href='https://validator.w3.org/check?uri=referer'><img src='/images/HTML5_Logo_48.gif' alt='Valid HTML5' /></a> <a href='http://jigsaw.w3.org/css-validator/check?uri=referer&profile=css3'><img src='/images/valid-css.gif' alt='Valid CSS Level 3' /></a></div> </div><!-- Close footer section div class='container-fluid'. --> </footer>
The div type selector is not assigned author styles. The a type selector, the footer a and footer img descendant selectors, the .link-lwc-logo class selector, and the a:hover, a:focus, footer a:focus, .link-lwc-logo:hover, and .link-lwc-logo:focus pseudo-class selectors are assigned author styles:
a { color: #005a9c; text-decoration: none; } /* From normal hyperlinks below. */
a:hover { color: #000; text-decoration: underline; } /* From normal hyperlinks below. */
a:focus { outline: thin dotted invert; } /* From normal hyperlinks below. */
footer a { color: #888; }
footer a:focus { outline: 0; }
.link-lwc-logo { font-family: "courier new", courier, monospace; font-size: 1.5em; font-weight: bold; color: #000; }
.link-lwc-logo:hover { text-decoration: none; }
.link-lwc-logo:focus { outline: 0; }
footer img { display: inline; }
For an example of the footer, go to the bottom of this web page.
10. Paragraphs
Paragraphs use the p element:
<p>Paragraph.</p>
The p type selector is assigned author styles:
p {
line-height: 1.75;
margin: 1em 0;
}
Examples of paragraphs:
Paragraph.
Paragraph.
11. Lists
Lists use the ol, ul, and li elements:
<ol> <li>Ordered list | list item.</li> <li>List item.</li> </ol>
<ul> <li>Unordered list | list item.</li> <li>List item.</li> </ul>
The ol, ul, and li type selectors are assigned author styles:
li {
line-height: 1.75;
}
ol, ul {
margin: 1em 0;
}
ul {
list-style-type: disc;
}
Examples of lists:
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
12. Lists With Introductory Text
Lists with introductory text are lists preceded by introductory text for the list.
Lists use the ol, ul, and li elements. The introductory text for the list uses the p element and ends with a period (.) or colon (:):
<p>Paragraph.</p> <ol> <li>Ordered list | list item.</li> <li>List item.</li> </ol>
<p>Paragraph:</p> <ul> <li>Unordered list | list item.</li> <li>List item.</li> </ul>
The p, ol, ul, and li type selectors are assigned author styles:
p, li {
line-height: 1.75;
}
p, ol, ul {
margin: 1em 0;
}
ul {
list-style-type: disc;
}
Examples of lists with introductory text:
Paragraph ending with a period as introductory text for an ordered list.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
Paragraph ending with a colon as introductory text for an ordered list:
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
Paragraph ending with a period as introductory text for an unordered list.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
Paragraph ending with a colon as introductory text for an unordered list:
- unordered list is for list items that do not occur in order.
- list item, if completing sentence started by introductory text, first letter first word no cap end with period. Otherwise, first letter first word cap end with period.
13. Lists In Lists
Lists in lists are lists nested in lists.
Lists, and the lists nested in the lists, use the ol, ul, and li elements. The list nested in the list is placed in <li></li> tags, typically after the content and before the closing </li> tag:
<ol> <li>Ordered list | list item.</li> <li>List item. <ul> <li>Unordered list | list item.</li> <li>List item.</li> </ul> </li> <li>List item.</li> </ol>
<ul> <li>Unordered list | list item.</li> <li>List item. <ol> <li>Ordered list | list item.</li> <li>List item.</li> </ol> </li> <li>List item.</li> </ul>
The ol, ul, and li type selectors and the ol ol, ol ul, ul ol, and ul ul descendant selectors are assigned author styles:
li {
line-height: 1.75;
}
ol, ul {
margin: 1em 0;
}
ol ol, ol ul, ul ol, ul ul {
margin: 0.5em 0;
}
ul {
list-style-type: disc;
}
Examples of lists in lists:
- Ordered list is for list items that occur in order.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- Ordered list is for list items that occur in order.
- Ordered list is for list items that occur in order.
- Ordered list is for list items that occur in order.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- Unordered list is for list items that do not occur in order.
- Ordered list is for list items that occur in order.
- Unordered list is for list items that do not occur in order.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- Unordered list is for list items that do not occur in order.
- Unordered list is for list items that do not occur in order.
- Unordered list is for list items that do not occur in order.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- Ordered list is for list items that occur in order.
- Unordered list is for list items that do not occur in order.
- Ordered list is for list items that occur in order.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
14. Lists With Introductory Text In Lists
Lists with introductory text in lists are lists with introductory text (above) nested in lists (above). Lists with introductory text are lists preceded by introductory text for the list.
Lists, and the lists nested in the lists, use the ol, ul, and li elements. The list with introductory text nested in the list is placed in <li></li> tags, typically after the content and before the closing </li> tag. The introductory text for the list nested in the list uses the li element and ends with a period (.) or colon (:):
<ol> <li>Ordered list | list item.</li> <li>List item. <ul> <li>Unordered list | list item.</li> <li>List item.</li> </ul> </li> <li>List item.</li> </ol>
<ul> <li>Unordered list | list item.</li> <li>List item: <ol> <li>Ordered list | list item.</li> <li>List item.</li> </ol> </li> <li>List item.</li> </ul>
The ol, ul, and li type selectors and the ol ol, ol ul, ul ol, and ul ul descendant selectors are assigned author styles:
li {
line-height: 1.75;
}
ol, ul {
margin: 1em 0;
}
ol ol, ol ul, ul ol, ul ul {
margin: 0.5em 0;
}
ul {
list-style-type: disc;
}
Examples of lists with introductory text in lists:
- Ordered list is for list items that occur in order.
- List item ending with a period as introductory text for an ordered list.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- List item ending with a colon as introductory text for an ordered list:
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item ending with a period as introductory text for an unordered list.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item ending with a colon as introductory text for an unordered list:
- unordered list is for list items that do not occur in order.
- list item, if completing sentence started by introductory text, first letter first word no cap end with period. Otherwise, first letter first word cap end with period.
- List item first letter first word cap end with period.
15. Notes
Notes are text separated and demarcated from the normal flow of content. There are two types of notes; 1.) normal notes (tips/asides/etc.), and 2.) important notes (cautions/warnings/etc.).
Normal notes use the div element with the class='note normal' attribute. Important notes use the div element with the class='note important' attribute:
<div class='note normal'>Normal note.</div>
<div class='note important'>Important note.</div>
The div type selector is not assigned author styles. The .note, .normal, and .important class selectors are assigned author styles:
.note {
line-height: 1.75;
background-color: #efefef;
border: 1px solid #efefef;
border-left-width: 5px;
border-radius: 3px;
margin: 1em 0;
padding: 0.5em;
}
.normal {
border-left-color: #8ccbf2;
}
.important {
border-left-color: #e05252;
}
Examples of normal notes and important notes:
16. Lists In Notes
Lists in notes are lists (above) nested in notes (above). Notes are text separated and demarcated from the normal flow of content. There are two types of notes; 1.) normal notes (tips/asides/etc.), and 2.) important notes (cautions/warnings/etc.).
Normal notes use the div element with the class='note normal' attribute. Important notes use the div element with the class='note important' attribute. Lists use the ol, ul, and li elements:
<div class='note normal'> <ol> <li>Ordered list | list item.</li> <li>List item.</li> </ol> </div>
<div class='note important'> <ul> <li>Unordered list | list item.</li> <li>List item.</li> </ul> </div>
The div type selector is not assigned author styles. The ol, ul, and li type selectors, the .note > ol, .note > ul, .note > ol:first-child and .note > ul:first-child child selectors, and the .note, .normal, and .important class selectors are assigned author styles:
li, .note { line-height: 1.75; }
ol, ul, .note { margin: 1em 0; }
.note > ol, .note > ul { margin: 0; }
.note > ol:first-child, .note > ul:first-child { padding-left: 20px; }
.note { background-color: #efefef; border: 1px solid #efefef; border-left-width: 5px; border-radius: 3px; padding: 0.5em; }
.normal { border-left-color: #8ccbf2; }
.important { border-left-color: #e05252; }
ul { list-style-type: disc; }
Examples of lists in notes:
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
17. Lists With Introductory Text In Notes
Lists with introductory text in notes are lists with introductory text (above) nested in notes (above). Notes are text separated and demarcated from the normal flow of content. There are two types of notes; 1.) normal notes (tips/asides/etc.), and 2.) important notes (cautions/warnings/etc.). Lists with introductory text are lists preceded by introductory text for the list.
Normal notes use the div element with the class='note normal' attribute. Important notes use the div element with the class='note important' attribute. Lists use the ol, ul, and li elements. The introductory text for the list uses the p element and ends with a period (.) or colon (:):
<div class='note normal'> <p>Paragraph.</p> <ol> <li>Ordered list | list item.</li> <li>List item.</li> </ol> </div>
<div class='note important'> <p>Paragraph:</p> <ul> <li>Unordered list | list item.</li> <li>List item.</li> </ul> </div>
The div type selector is not assigned author styles. The p, ol, ul, and li type selectors, the .note > p, .note > ol, and .note > ul child selectors, and the .note, .normal, and .important class selectors are assigned author styles:
p, li, .note { line-height: 1.75; }
p, ol, ul, .note { margin: 1em 0; }
.note > p { margin-top: 0; }
.note > ol, .note > ul { margin: 0; }
.note { background-color: #efefef; border: 1px solid #efefef; border-left-width: 5px; border-radius: 3px; padding: 0.5em; }
.normal { border-left-color: #8ccbf2; }
.important { border-left-color: #e05252; }
ul { list-style-type: disc; }
Examples of lists with introductory text in notes:
Paragraph ending with a period as introductory text for an ordered list.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
Paragraph ending with a colon as introductory text for an ordered list:
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
Paragraph ending with a period as introductory text for an unordered list.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
Paragraph ending with a colon as introductory text for an unordered list:
- unordered list is for list items that do not occur in order.
- list item, if completing sentence started by introductory text, first letter first word no cap end with period. Otherwise, first letter first word cap end with period.
18. Lists In Lists In Notes
Lists in lists in notes are lists in lists (above) nested in notes (above). Notes are text separated and demarcated from the normal flow of content. There are two types of notes; 1.) normal notes (tips/asides/etc.), and 2.) important notes (cautions/warnings/etc.). Lists in lists are lists nested in lists.
Normal notes use the div element with the class='note normal' attribute. Important notes use the div element with the class='note important' attribute. Lists, and the lists nested in the lists, use the ol, ul, and li elements. The list nested in the list is placed in <li></li> tags, typically after the content and before the closing </li> tag:
<div class='note normal'>
<ol>
<li>Ordered list | list item.</li>
<li>List item.
<ul>
<li>Unordered list | list item.</li>
<li>List item.</li>
</ul>
</li>
<li>List item.</li>
</ol>
</div>
<div class='note important'>
<ul>
<li>Unordered list | list item.</li>
<li>List item.
<ol>
<li>Ordered list | list item.</li>
<li>List item.</li>
</ol>
</li>
<li>List item.</li>
</ul>
</div>
The div type selector is not assigned author styles. The ol, ul, and li type selectors, the ol ol, ol ul, ul ol, and ul ul descendant selectors, the .note > ol, .note > ul, .note > ol:first-child, .note > ul:first-child, li:last-child > ol, and li:last-child > ul child selectors, and the .note, .normal, and .important class selectors are assigned author styles:
li, .note { line-height: 1.75; }
ol, ul, .note { margin: 1em 0; }
ol ol, ol ul, ul ol, ul ul { margin: 0.5em 0; }
.note > ol, .note > ul { margin: 0; }
.note > ol:first-child, .note > ul:first-child { padding-left: 20px; }
li:last-child > ol, li:last-child > ul { margin-bottom: 0; }
.note { background-color: #efefef; border: 1px solid #efefef; border-left-width: 5px; border-radius: 3px; padding: 0.5em; }
.normal { border-left-color: #8ccbf2; }
.important { border-left-color: #e05252; }
ul { list-style-type: disc; }
Examples of lists in lists in notes:
- Ordered list is for list items that occur in order.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
19. Lists With Introductory Text In Lists In Notes
Lists with introductory text in lists in notes are lists with introductory text in lists (above) nested in notes (above). Notes are text separated and demarcated from the normal flow of content. There are two types of notes; 1.) normal notes (tips/asides/etc.), and 2.) important notes (cautions/warnings/etc.). Lists with introductory text in lists are lists with introductory text nested in lists. Lists with introductory text are lists preceded by introductory text for the list.
Normal notes use the div element with the class='note normal' attribute. Important notes use the div element with the class='note important' attribute. Lists, and the lists nested in the lists, use the ol, ul, and li elements. The list with introductory text nested in the list is placed in <li></li> tags, typically after the content and before the closing </li> tag. The introductory text for the list nested in the list uses the li element and ends with a period (.) or colon (:):
<div class='note normal'>
<ol>
<li>Ordered list | list item.</li>
<li>List item.
<ul>
<li>Unordered list | list item.</li>
<li>List item.</li>
</ul>
</li>
<li>List item.</li>
</ol>
</div>
<div class='note important'>
<ul>
<li>Unordered list | list item.</li>
<li>List item:
<ol>
<li>Ordered list | list item.</li>
<li>List item.</li>
</ol>
</li>
<li>List item.</li>
</ul>
</div>
The div type selector is not assigned author styles. The ol, ul, and li type selectors, the ol ol, ol ul, ul ol, and ul ul descendant selectors, the .note > ol, .note > ul, .note > ol:first-child, .note > ul:first-child, li:last-child > ol, and li:last-child > ul child selectors, and the .note, .normal, and .important class selectors are assigned author styles:
li, .note { line-height: 1.75; }
ol, ul, .note { margin: 1em 0; }
ol ol, ol ul, ul ol, ul ul { margin: 0.5em 0; }
.note > ol, .note > ul { margin: 0; }
.note > ol:first-child, .note > ul:first-child { padding-left: 20px; }
li:last-child > ol, li:last-child > ul { margin-bottom: 0; }
.note { background-color: #efefef; border: 1px solid #efefef; border-left-width: 5px; border-radius: 3px; padding: 0.5em; }
.normal { border-left-color: #8ccbf2; }
.important { border-left-color: #e05252; }
ul { list-style-type: disc; }
Examples of lists with introductory text in lists in notes:
- Ordered list is for list items that occur in order.
- List item ending with a period as introductory text for an ordered list.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- List item ending with a colon as introductory text for an ordered list:
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item ending with a period as introductory text for an unordered list.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item ending with a colon as introductory text for an unordered list:
- unordered list is for list items that do not occur in order.
- list item, if completing sentence started by introductory text, first letter first word no cap end with period. Otherwise, first letter first word cap end with period.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- List item ending with a period as introductory text for an ordered list.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- List item ending with a colon as introductory text for an ordered list:
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item ending with a period as introductory text for an unordered list.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item ending with a colon as introductory text for an unordered list:
- unordered list is for list items that do not occur in order.
- list item, if completing sentence started by introductory text, first letter first word no cap end with period. Otherwise, first letter first word cap end with period.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- List item ending with a period as introductory text for an ordered list.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item ending with a period as introductory text for an unordered list.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
20. Notes In Lists
Notes in lists are notes (above) nested in lists (above). Notes are text separated and demarcated from the normal flow of content. There are two types of notes; 1.) normal notes (tips/asides/etc.), and 2.) important notes (cautions/warnings/etc.).
Lists use the ol, ul, and li elements. Normal notes use the div element with the class='note normal' attribute. Important notes use the div element with the class='note important' attribute. The note is placed in <li></li> tags, typically after the content and before the closing </li> tag:
<ol> <li>Ordered list | list item.</li> <li>List item. <div class='note normal'>Note normal.</div> </li> <li>List item.</li> </ol>
<ul> <li>Unordered list | list item.</li> <li>List item. <div class='note important'>Note important.</div> </li> <li>List item.</li> </ul>
The div type selector is not assigned author styles. The ol, ul, and li type selectors, the ol .note and ul .note descendant selectors, and the .note, .normal, and .important class selectors are assigned author styles:
li, .note { line-height: 1.75; }
ol, ul, .note { margin: 1em 0; }
ol .note, ul .note { margin: 0.5em 0; }
.note { background-color: #efefef; border: 1px solid #efefef; border-left-width: 5px; border-radius: 3px; padding: 0.5em; }
.normal { border-left-color: #8ccbf2; }
.important { border-left-color: #e05252; }
ul { list-style-type: disc; }
Examples of notes in lists:
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
Normal note in an ordered list.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
Normal note in an unordered list.
- List item first letter first word cap end with period.
- Ordered list is for list items that occur in order.
- List item first letter first word cap end with period.
Important note in an ordered list.
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item first letter first word cap end with period.
Important note in an unordered list.
- List item first letter first word cap end with period.
21. Tables
Tables use the table, caption (optional), thead (optional), tbody, tfoot (optional), tr, th (optional), and td elements:
<table> <caption>Table | Caption</caption> <thead> <tr> <th>Table Head | Table Row | Table Header Cell</th> <th>Table Header Cell</th> </tr> </thead> <tbody> <tr> <td>Table body | table row | table cell.</td> <td>Table cell.</td> </tr> </tbody> <tfoot> <tr> <td colspan='2'>Table foot | table row | table cell.</td> </tr> </tfoot> </table>
The thead, tbody, tfoot and tr type selectors are not assigned author styles. The table, caption, th, and td type selectors are assigned author styles:
th, td {
line-height: 1.75;
}
caption, th, td {
padding: 0.5em;
}
table {
border-collapse: collapse;
box-sizing: border-box;
margin: 1em 0;
}
table, caption, th, td {
border: 1px solid #d7d7d7;
}
caption {
font-weight: bold;
background-color: #efefef;
border-bottom: 0;
}
Examples of tables:
| Optional Table Header Cell First Letter Each Word Cap | Optional Table Header Cell First Letter Each Word Cap |
|---|---|
| Table body cell first letter first word typically cap. | |
| If table body cell text is a sentence, end with period. | If table body cell text is not a sentence, end without period. |
| Tables and table cells typically not assigned a width. | If assign a width, whenever possible use %, not fixed. Fixed widths can induce horizontal scrollbar. |
| Optional table foot cell that spans all columns. | |
| Optional Table Header Cell First Letter Each Word Cap | Optional Table Header Cell First Letter Each Word Cap |
|---|---|
| Table body cell first letter first word typically cap. | |
| If table body cell text is a sentence, end with period. | If table body cell text is not a sentence, end without period. |
| Tables and table cells typically not assigned a width. | If assign a width, whenever possible use %, not fixed. Fixed widths can induce horizontal scrollbar. |
| Optional table foot cell that spans all columns. | |
22. Lists In Tables
Lists in tables are lists (above) nested in tables (above).
Tables use the table, caption (optional), thead (optional), tbody, tfoot (optional), tr, th (optional), and td elements. Lists use the ol, ul, and li elements. The list is placed in <td></td> tags, which means lists are nested in the <tbody></tbody> and <tfoot></tfoot> sections, not the <thead></thead> section, of a table:
<table>
<caption>Table | Caption</caption>
<thead>
<tr>
<th>Table Head | Table Row | Table Header Cell</th>
<th>Table Header Cell</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ol>
<li>Table body | table row | table cell | ordered list | list item.</li>
<li>List item.</li>
</ol>
</td>
<td>Table cell.</td>
</tr>
<tr>
<td>
<ul>
<li>Table cell | unordered list | list item.</li>
<li>List item.</li>
</ul>
</td>
<td>Table cell.</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='2'>
<ul>
<li>Table foot | table row | table cell | unordered list | list item.</li>
<li>List item.</li>
</ul>
</td>
</tr>
</tfoot>
</table>
The thead, tbody, tfoot, and tr type selectors are not assigned author styles. The table, caption, th, td, ol, ul, and li type selectors and the td > ol, td > ul, td > ol:first-child, and td > ul:first-child child selectors are assigned author styles:
li, th, td { line-height: 1.75; }
ol, ul, table { margin: 1em 0; }
td > ol, td > ul { margin: 0; }
td > ol:first-child, td > ul:first-child { padding-left: 20px; }
caption, th, td { padding: 0.5em; }
table { border-collapse: collapse; box-sizing: border-box; }
table, caption, th, td { border: 1px solid #d7d7d7; }
caption { font-weight: bold; background-color: #efefef; border-bottom: 0; }
ul { list-style-type: disc; }
Examples of lists in tables:
| Optional Table Header Cell First Letter Each Word Cap | Optional Table Header Cell First Letter Each Word Cap |
|---|---|
|
|
|
|
| Optional Table Header Cell First Letter Each Word Cap | Optional Table Header Cell First Letter Each Word Cap |
|---|---|
|
|
|
|
23. Lists With Introductory Text In Tables
Lists with introductory text in tables are lists with introductory text (above) nested in tables (above). Lists with introductory text are lists preceded by introductory text for the list.
Tables use the table, caption (optional), thead (optional), tbody, tfoot (optional), tr, th (optional), and td elements. Lists use the ol, ul, and li elements. The list with introductory text is placed in <td></td> tags, which means lists with introductory text are nested in the <tbody></tbody> and <tfoot></tfoot> sections, not the <thead></thead> section of a table. The introductory text for the list uses the p element and ends with a period (.) or colon (:):
<table>
<caption>Table | Caption</caption>
<thead>
<tr>
<th>Table Head | Table Row | Table Header Cell</th>
<th>Table Header Cell</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>Table body | table row | table cell | paragraph.</p>
<ol>
<li>Ordered list | list item.</li>
<li>List item.</li>
</ol>
</td>
<td>Table cell.</td>
</tr>
<tr>
<td>
<p>Table cell | paragraph:</p>
<ul>
<li>Unordered list | list item.</li>
<li>List item.</li>
</ul>
</td>
<td>Table cell.</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='2'>
<p>Table foot | table row | table cell | paragraph:</p>
<ul>
<li>Unordered list | list item.</li>
<li>List item.</li>
</ul>
</td>
</tr>
</tfoot>
</table>
The thead, tbody, tfoot, and tr type selectors are not assigned author styles. The table, caption, th, td, p, ol, ul, and li type selectors and the td > p, td > ol, and td > ul child selectors are assigned author styles:
p, li, th, td { line-height: 1.75; }
p, ol, ul, table { margin: 1em 0; }
td > p { margin-top: 0; }
td > ol, td > ul { margin: 0; }
caption, th, td { padding: 0.5em; }
table { border-collapse: collapse; box-sizing: border-box; }
table, caption, th, td { border: 1px solid #d7d7d7; }
caption { font-weight: bold; background-color: #efefef; border-bottom: 0; }
ul { list-style-type: disc; }
Examples of lists with introductory text in tables:
| Optional Table Header Cell First Letter Each Word Cap | Optional Table Header Cell First Letter Each Word Cap |
|---|---|
|
Table body cell paragraph ending with a period as introductory text for an ordered list.
|
Table body cell paragraph ending with a colon as introductory text for an ordered list:
|
|
Table body cell paragraph ending with a period as introductory text for an unordered list.
|
Table body cell paragraph ending with a colon as introductory text for an unordered list:
|
|
Table foot cell paragraph ending with a period as introductory text for an ordered list.
|
|
| Optional Table Header Cell First Letter Each Word Cap | Optional Table Header Cell First Letter Each Word Cap |
|---|---|
|
Table body cell paragraph ending with a period as introductory text for an ordered list.
|
Table body cell paragraph ending with a colon as introductory text for an ordered list:
|
|
Table body cell paragraph ending with a period as introductory text for an unordered list.
|
Table body cell paragraph ending with a colon as introductory text for an unordered list:
|
|
Table foot cell paragraph ending with a colon as introductory text for an unordered list:
|
|
24. Hyperlinks
There are two types of hyperlinks; 1.) normal hyperlinks, and 2.) list hyperlinks.
24.1. Normal Hyperlinks
Normal hyperlinks are hyperlinks in normal content, which is content in paragraphs, lists, notes, tables, etc.
Normal hyperlinks use the a element with the href attribute:
<a href='abc.html'>normal hyperlink (domain.com)</a>
The a type selector and the a:hover and a:focus pseudo-class selectors are assigned author styles:
a {
color: #005a9c;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
a:focus {
outline: thin dotted invert;
}
Examples of normal hyperlinks:
Normal hyperlink (learnwebcoding.com) in a paragraph. Normal hyperlink (learnwebcoding.com) in a paragraph.
- Normal hyperlink (learnwebcoding.com) in a list.
- Normal hyperlink (learnwebcoding.com) in a list.
| Normal hyperlink (learnwebcoding.com) in a table cell. | Normal hyperlink (learnwebcoding.com) in a table cell. |
24.2. List Hyperlinks
List hyperlinks are hyperlinks in a list of one or more hyperlinks where most of the list items are hyperlinks.
List hyperlinks use the ul element with the class='link-list' attribute, the li element, and the a element with the href attribute:
<ul class='link-list'> <li><a href='abc.html'>List Hyperlink (domain.com)</a></li> </ul>
<ul class='link-list'> <li><a href='abc.html'>List Hyperlink (domain.com)</a> <ul class='link-list'> <li><a href='def.html'>List Hyperlink (domain.com)</a></li> </ul> </li> </ul>
The .link-list class selector is not assigned author styles. The ul and li type selectors, the .link-list > li > a child selector, and the a:focus, .link-list > li > a:visited, and .link-list > li > a:hover pseudo-class selectors are assigned author styles:
li { line-height: 1.75; }
ul { list-style-type: disc; margin: 1em 0; }
a { color: #005a9c; text-decoration: none; } /* From normal hyperlinks above. */
a:hover { color: #000; text-decoration: underline; } /* From normal hyperlinks above. */
a:focus { outline: thin dotted invert; } /* From normal hyperlinks above. */
.link-list > li > a { color: #000; text-decoration: underline; }
.link-list > li > a:visited { color: #888; }
.link-list > li > a:hover { color: #888; text-decoration: none; }
Examples of list hyperlinks:
- List Hyperlink In A List Of One Or More Hyperlinks Where Most Of The List Items Are Hyperlinks (learnwebcoding.com)
- List Hyperlink Content Is Title Of Linked Web Page Or List Item First Letter Each Word Cap End Without Period (learnwebcoding.com)
- List Hyperlink (learnwebcoding.com)
- List item
- List item
- List Hyperlink (learnwebcoding.com)
- List Hyperlink (learnwebcoding.com)
- List Hyperlink (learnwebcoding.com)
24.3. Table Endnote Hyperlinks
Table endnotes are text separated and demarcated from the normal flow of table content. Table endnotes are notes (tips/asides/cautions/warnings/etc.) on table content. The table content provides a normal hyperlink (above) to the table endnote. The table endnote provides a return normal hyperlink (above) to the table content. These hyperlinks are table endnote hyperlinks. Table endnotes are placed in a table foot cell that spans all columns.
Tables use the table, caption (optional), thead (optional), tbody, tfoot (optional), tr, th (optional), and td elements. Normal hyperlinks use the a element with the href attribute.
If the web page has only one table with table endnote hyperlinks:
<table>
<caption>Table | Caption | If The Web Page Has Only One Table With Table Endnote Hyperlinks <a id='1_return'></a><a href='#1'>(1)</a></caption>
<thead>
<tr>
<th>Table Head | Table Row | Table Header Cell <a id='2_return'></a><a href='#2'>(2)</a></th>
<th>Table Header Cell</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table body | table row | table cell <a id='3_return'></a><a href='#3'>(3)</a>.</td>
<td>Table cell.</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='2'>
<a id='1'></a><a href='#1_return'>(1)</a> Table foot | table row | table cell. Table caption endnote.<br />
<a id='2'></a><a href='#2_return'>(2)</a> Table header cell endnote.<br />
<a id='3'></a><a href='#3_return'>(3)</a> Table body cell endnote.
</td>
</tr>
</tfoot>
</table>
If the web page has multiple tables with table endnote hyperlinks:
<table>
<caption>Table | Caption | If The Web Page Has Multiple Tables With Table Endnote Hyperlinks <a id='1_tableTitle_return'></a><a href='#1_tableTitle'>(1)</a></caption>
<thead>
<tr>
<th>Table Head | Table Row | Table Header Cell <a id='2_tableTitle_return'></a><a href='#2_tableTitle'>(2)</a></th>
<th>Table Header Cell</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table body | table row | table cell <a id='3_tableTitle_return'></a><a href='#3_tableTitle'>(3)</a>.</td>
<td>Table cell.</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='2'>
<a id='1_tableTitle'></a><a href='#1_tableTitle_return'>(1)</a> Table foot | table row | table cell. Table caption endnote.<br />
<a id='2_tableTitle'></a><a href='#2_tableTitle_return'>(2)</a> Table header cell endnote.<br />
<a id='3_tableTitle'></a><a href='#3_tableTitle_return'>(3)</a> Table body cell endnote.
</td>
</tr>
</tfoot>
</table>
The thead, tbody, tfoot and tr type selectors are not assigned author styles. The table, caption, th, td, and a type selectors and the a:hover and a:focus pseudo-class selectors are assigned author styles:
th, td { line-height: 1.75; }
caption, th, td { padding: 0.5em; }
table { border-collapse: collapse; box-sizing: border-box; margin: 1em 0; }
table, caption, th, td { border: 1px solid #d7d7d7; }
caption { font-weight: bold; background-color: #efefef; border-bottom: 0; }
a { color: #005a9c; text-decoration: none; } /* From normal hyperlinks above. */
a:hover { color: #000; text-decoration: underline; } /* From normal hyperlinks above. */
a:focus { outline: thin dotted invert; } /* From normal hyperlinks above. */
Example of table endnote hyperlinks if the web page has only one table with table endnote hyperlinks:
| Optional Table Header Cell (2) | Optional Table Header Cell |
|---|---|
| Table body cell (3). | Table body cell. |
|
(1) Table foot cell that spans all columns. Table caption endnote. (2) Table header cell endnote. (3) Table body cell endnote. |
|
Example of table endnote hyperlinks if the web page has multiple tables with table endnote hyperlinks:
| Optional Table Header Cell (2) | Optional Table Header Cell |
|---|---|
| Table body cell (3). | Table body cell. |
|
(1) Table foot cell that spans all columns. Table caption endnote. (2) Table header cell endnote. (3) Table body cell endnote. |
|
25. Form Controls
Form controls, also known as form elements, are interactive objects typically found in forms (i.e., in <form></form> tags).
25.1. Buttons
25.1.1. Bootstrap 3.3.5 - 3.4.x Button Colors
For those interested in adding color to the buttons below, the following are the Bootstrap 3.3.5 - 3.4.x button style rules for the color, background-color, and border-color properties in the default, hover, focus, active hover, and active focus states. For an example of the Bootstrap 3.4.x buttons, see Bootstrap 3.4 Buttons Options (getbootstrap.com):
| Button Type (color) |
Default State | Hover State | Focus State | Active Hover And Active Focus States |
|---|---|---|---|---|
| Default (white) |
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
|
.btn-default:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
|
.btn-default:focus {
color: #333;
background-color: #e6e6e6;
border-color: #8c8c8c;
}
|
.btn-default:active:hover,
.btn-default:active:focus {
color: #333;
background-color: #d4d4d4;
border-color: #8c8c8c;
}
|
| Primary (blue) |
.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
|
.btn-primary:hover {
color: #fff;
background-color: #286090;
border-color: #204d74;
}
|
.btn-primary:focus {
color: #fff;
background-color: #286090;
border-color: #122b40;
}
|
.btn-primary:active:hover,
.btn-primary:active:focus {
color: #fff;
background-color: #204d74;
border-color: #122b40;
}
|
| Success (green) |
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
|
.btn-success:hover {
color: #fff;
background-color: #449d44;
border-color: #398439;
}
|
.btn-success:focus {
color: #fff;
background-color: #449d44;
border-color: #255625;
}
|
.btn-success:active:hover,
.btn-success:active:focus {
color: #fff;
background-color: #398439;
border-color: #255625;
}
|
| Info (light blue) |
.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;
}
|
.btn-info:hover {
color: #fff;
background-color: #31b0d5;
border-color: #269abc;
}
|
.btn-info:focus {
color: #fff;
background-color: #31b0d5;
border-color: #1b6d85;
}
|
.btn-info:active:hover,
.btn-info:active:focus {
color: #fff;
background-color: #269abc;
border-color: #1b6d85;
}
|
| Warning (orange) |
.btn-warning {
color: #fff;
background-color: #f0ad4e;
border-color: #eea236;
}
|
.btn-warning:hover {
color: #fff;
background-color: #ec971f;
border-color: #d58512;
}
|
.btn-warning:focus {
color: #fff;
background-color: #ec971f;
border-color: #985f0d;
}
|
.btn-warning:active:hover,
.btn-warning:active:focus {
color: #fff;
background-color: #d58512;
border-color: #985f0d;
}
|
| Danger (red) |
.btn-danger {
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;
}
|
.btn-danger:hover {
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
}
|
.btn-danger:focus {
color: #fff;
background-color: #c9302c;
border-color: #761c19;
}
|
.btn-danger:active:hover,
.btn-danger:active:focus {
color: #fff;
background-color: #ac2925;
border-color: #761c19;
}
|
25.1.2. Buttons Using The input Element
Buttons using the input element use the input element with the type='button', type='reset', or type='submit' attribute and the class attribute with the btn-xs, btn-sm, btn-md, btn-lg, or btn-xl value:
<p><input type='button' value='input type button' class='btn-md' /></p> <p><input type='reset' value='input type reset' class='btn-md' /></p> <p><input type='submit' value='input type submit' class='btn-md' /></p>
The input type selector is not assigned author styles. The .btn-xs, .btn-sm, .btn-md, .btn-lg, and .btn-xl class selectors, the input[type="button"], input[type="reset"], and input[type="submit"] attribute selectors, and the input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active, input[type="button"]:focus, input[type="reset"]:focus, and input[type="submit"]:focus pseudo-class selectors are assigned author styles:
input[type="button"], input[type="reset"], input[type="submit"] { background-color: #fff; color: #000; border: 2px solid #999; border-radius: 9px; }
input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background-color: #efefef; border-color: #666; cursor: pointer; }
input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus { background-color: #efefef; outline: 0; border-color: #666; }
input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { background-color: #d7d7d7; border-color: #333; cursor: pointer; }
.btn-xs { font-size: 0.7em; padding: 4px 8px; }
.btn-sm { font-size: 0.85em; padding: 5px 10px; }
.btn-md { font-size: 1.0em; padding: 6px 12px; }
.btn-lg { font-size: 1.15em; padding: 7px 14px; }
.btn-xl { font-size: 1.3em; padding: 8px 16px; }
When buttons using the input element are in the active state:
- IE11 moves the button text down and right 1px.
- FF39 and CH43 do not move the button text.
Examples of buttons using the input element:
With the type='button' attribute:
With the type='reset' attribute:
With the type='submit' attribute:
25.1.3. Buttons Using The button Element
Buttons using the button element use the button element with or without the type='button', type='reset', or type='submit' attribute and they use the class attribute with the btn-xs, btn-sm, btn-md, btn-lg, or btn-xl value:
button element is used without the type attribute, the HTML5: A Vocabulary And Associated APIs For HTML And XHTML: W3C Recommendation 28 October 2014 (w3.org) recommends that user agents treat the button as a submit button.<p><button class='btn-md'>button submit</button></p> <p><button type='button' class='btn-md'>button type button</button></p> <p><button type='reset' class='btn-md'>button type reset</button></p> <p><button type='submit' class='btn-md'>button type submit</button></p>
The button type selector, the .btn-xs, .btn-sm, .btn-md, .btn-lg, and .btn-xl class selectors, and the button:hover, button:active, and button:focus pseudo-class selectors are assigned author styles:
button { background-color: #fff; color: #000; border: 2px solid #999; border-radius: 9px; }
button:hover { background-color: #efefef; border-color: #666; cursor: pointer; }
button:focus { background-color: #efefef; outline: 0; border-color: #666; }
button:active { background-color: #d7d7d7; border-color: #333; cursor: pointer; }
.btn-xs { font-size: 0.7em; padding: 4px 8px; }
.btn-sm { font-size: 0.85em; padding: 5px 10px; }
.btn-md { font-size: 1.0em; padding: 6px 12px; }
.btn-lg { font-size: 1.15em; padding: 7px 14px; }
.btn-xl { font-size: 1.3em; padding: 8px 16px; }
When buttons using the button element are in the active state:
- IE11 moves the button text down and right 1px.
- FF39 and CH43 do not move the button text.
Examples of buttons using the button element:
Without the type attribute:
With the type='button' attribute:
With the type='reset' attribute:
With the type='submit' attribute:
25.1.4. Buttons Using The a Element
Buttons using the a element use the a element with or without the href attribute and they use the class attribute with the btn btn-xs, btn btn-sm, btn btn-md, btn btn-lg, or btn btn-xl value. If the href attribute is used, the button also functions as a hyperlink:
<p><a class='btn btn-md'>button</a></p> <p><a href='abc.html' class='btn btn-md'>hyperlink button</a></p>
The a type selector, the .btn, .btn-xs, .btn-sm, .btn-md, .btn-lg, and .btn-xl class selectors, and the a:hover, a:focus, .btn:hover, btn:active, and btn:focus pseudo-class selectors are assigned author styles:
a { color: #005a9c; text-decoration: none; } /* From normal hyperlinks above. */
a:hover { color: #000; text-decoration: underline; } /* From normal hyperlinks above. */
a:focus { outline: thin dotted invert; } /* From normal hyperlinks above. */
.btn { background-color: #fff; color: #000; border: 2px solid #999; border-radius: 9px; }
.btn:hover { background-color: #efefef; border-color: #666; cursor: pointer; }
.btn:hover { text-decoration: none; } /* For the a element. */
.btn:focus { background-color: #efefef; outline: 0; border-color: #666; } /* For the a element with the href attribute. */
.btn:active { background-color: #d7d7d7; border-color: #333; cursor: pointer; }
.btn-xs { font-size: 0.7em; padding: 4px 8px; }
.btn-sm { font-size: 0.85em; padding: 5px 10px; }
.btn-md { font-size: 1.0em; padding: 6px 12px; }
.btn-lg { font-size: 1.15em; padding: 7px 14px; }
.btn-xl { font-size: 1.3em; padding: 8px 16px; }
a element with, not without, the href attribute. Therefore, when creating buttons using the a element without the href attribute, the .btn class selector needs to consider overriding styles assigned to the a type selector and the a:hover and a:active pseudo-class selectors, not the a:focus pseudo-class selector. When creating buttons using the a element with the href attribute, the .btn class selector needs to consider overriding styles assigned to the a type selector and the a:hover, a:active, and a:focus pseudo-class selectors.Examples of buttons using the a element:
Without the href attribute: btn-xs btn-sm btn-md btn-lg btn-xl
With the href attribute: btn-xs btn-sm btn-md btn-lg btn-xl
25.1.5. Buttons Using An Element Other Than The input, button, Or a Elements
Buttons using the input or button elements do not behave consistently cross-browser. For example, web browsers differ in how they style the corners and the :hover, :active, and :focus pseudo-class selectors. For consistent button style cross-browser, create buttons using an element other than the input or button elements. For an example using the a element, see buttons using the a element (above). However, when creating buttons using the a element, you might have to override styles assigned to the a type selector and the a:hover, a:active, and a:focus pseudo-class selectors. To avoid this, and if the button does not need to function as a hyperlink, it is recommended to use an element other than the a element. In this example, the buttons use the span element.
Buttons using the span element use the span element with the class attribute with the btn btn-xs, btn btn-sm, btn btn-md, btn btn-lg, or btn btn-xl value:
<p><span class='btn btn-md'>button</span></p>
The span type selector is not assigned author styles. The .btn, .btn-xs, .btn-sm, .btn-md, .btn-lg, and .btn-xl class selectors and the .btn:hover and btn:active pseudo-class selectors are assigned author styles:
.btn { background-color: #fff; color: #000; border: 2px solid #999; border-radius: 9px; }
.btn:hover { background-color: #efefef; border-color: #666; cursor: pointer; }
.btn:active { background-color: #d7d7d7; border-color: #333; cursor: pointer; }
.btn-xs { font-size: 0.7em; padding: 4px 8px; }
.btn-sm { font-size: 0.85em; padding: 5px 10px; }
.btn-md { font-size: 1.0em; padding: 6px 12px; }
.btn-lg { font-size: 1.15em; padding: 7px 14px; }
.btn-xl { font-size: 1.3em; padding: 8px 16px; }
:focus) exists on objects using the input, button, and select elements and on objects using the a element with the href attribute. Focus does not exist on objects using the a element without the href attribute, nor on objects using other elements, including with the href attribute.Examples of buttons using the span element:
btn-xs btn-sm btn-md btn-lg btn-xl
25.2. Textboxes
Textboxes use the input element with the type='text' attribute. The label element is a commonly used optional element and the size, maxlength, and placeholder attributes are commonly used optional attributes. If the textbox data is to be sent when a form is submitted, use the name attribute and assign it a unique value. To specify default/pre-entered text (i.e., a default value), use the value attribute and assign it the default/pre-entered text:
<p>Textbox without label: <input type='text' name='unique to indicate textbox1 when form submitted' size='30' maxlength='30' /></p> <p><label>Textbox with label: <input type='text' name='unique to indicate textbox2 when form submitted' size='30' maxlength='30' /></label></p> <p><label>Textbox with label and placeholder text: <input type='text' name='unique to indicate textbox3 when form submitted' size='30' maxlength='30' placeholder='placeholder text' /></label></p> <p><label>Textbox with label and default/pre-entered text: <input type='text' name='unique to indicate textbox4 when form submitted' size='30' maxlength='30' value='default/pre-entered text' /></label></p> <p><label><input type='text' name='unique to indicate textbox5 when form submitted' size='30' maxlength='30' /> Textbox with label.</label></p>
The input and label type selectors are not assigned author styles. The input[type="text"] attribute selector, the input[type="text"]:hover, input[type="text"]:focus, input[type="text"]:-ms-input-placeholder, and input[type="text"]:-moz-placeholder pseudo-class selectors, and the input[type="text"]::-moz-placeholder and input[type="text"]::-webkit-input-placeholder pseudo-element selectors are assigned author styles:
input[type="text"] { font-family: arial, tahoma, sans-serif; font-size: 13.33px; background-color: #fff; color: #000; border: 2px solid #999; border-radius: 3px; padding: 4px 6px; }
input[type="text"]:hover { border-color: #666; }
input[type="text"]:focus { outline: 0; border-color: #666; }
input[type="text"]:-ms-input-placeholder { color: #888; }
input[type="text"]:-moz-placeholder { color: #888; }
input[type="text"]::-moz-placeholder { color: #888; opacity: 1; }
input[type="text"]::-webkit-input-placeholder { color: #888; }
Examples of textboxes:
Textbox without label:
25.3. Textareas
Textareas use the textarea element. The label element is a commonly used optional element and the cols, rows, and placeholder attributes are commonly used optional attributes. If the textarea data is to be sent when a form is submitted, use the name attribute and assign it a unique value. To specify default/pre-entered text (i.e., a default value), place the default/pre-entered text between the opening and closing <textarea></textarea> tags:
<p>Textarea without label: <textarea name='unique to indicate textarea1 when form submitted' cols='30' rows='2'></textarea></p> <p><label>Textarea with label: <textarea name='unique to indicate textarea2 when form submitted' cols='30' rows='2'></textarea></label></p> <p><label>Textarea with label and placeholder text: <textarea name='unique to indicate textarea3 when form submitted' cols='30' rows='2' placeholder='placeholder text'></textarea></label></p> <p><label>Textarea with label and default/pre-entered text: <textarea name='unique to indicate textarea4 when form submitted' cols='30' rows='2'>default/pre-entered text</textarea></label></p> <p><label><textarea name='unique to indicate textarea5 when form submitted' cols='30' rows='2'></textarea> Textarea with label.</label></p>
The label type selector is not assigned author styles. The textarea type selector, the textarea:hover, textarea:focus, textarea:-ms-input-placeholder, and textarea:-moz-placeholder pseudo-class selectors, and the textarea::-moz-placeholder and textarea::-webkit-input-placeholder pseudo-element selectors are assigned author styles:
textarea { vertical-align: middle; font-family: arial, tahoma, sans-serif; font-size: 13.33px; background-color: #fff; color: #000; border: 2px solid #999; border-radius: 3px; padding: 4px 6px; }
textarea:hover { border-color: #666; }
textarea:focus { outline: 0; border-color: #666; }
textarea:-ms-input-placeholder { color: #888; }
textarea:-moz-placeholder { color: #888; }
textarea::-moz-placeholder { color: #888; opacity: 1; }
textarea::-webkit-input-placeholder { color: #888; }
Examples of textareas:
Textarea without label:
25.4. Selectboxes (Dropdowns)
Selectboxes (a.k.a., dropdowns) use the select and option elements. The label element is a commonly used optional element. Only the data of the selected option(s), not the data of the unselected option(s), is including when a form is submitted. If the selectbox data is to be sent when a form is submitted, use the select element with the name attribute, assign the name attribute a unique value, and use the option element with or without the value attribute. The value attribute can be used to send data other than that which appears on the screen as the <option></option> tag content. If the nameattribute is used without the value attribute, then the <option></option> tag content is sent, and, therefore, assign the <option></option> tag content a unique string of text. If the name attribute is used with the value attribute, the value attribute value is sent, and, therefore, assign the value attribute a unique value. To increase the number of options visible in the selectbox, use the select element with the size attribute and assign it a number value greater than one. If the size attribute is absent, user agents are to default to size='1'. To allow multiple options to be selected, use the select element with the multiple='multiple' attribute. To create an empty/blank option, use <option label=' '> </option> (note the two spaces). To default select/pre-select an option, use the option element with the selected='selected' attribute:
<p> Selectbox without label: <select name='unique to indicate selectbox1 when form submitted'> <option>option one</option> <option>option two</option> <option>option three</option> </select> </p> <p> <label>Selectbox with label: <select name='unique to indicate selectbox2 when form submitted'> <option>option one</option> <option>option two</option> <option>option three</option> </select> </label> </p> <p> <label>Selectbox with label and option three default selected/pre-selected: <select name='unique to indicate selectbox3 when form submitted'> <option>option one</option> <option>option two</option> <option selected='selected'>option three</option> </select> </label> </p> <p> <label> <select name='unique to indicate selectbox4 when form submitted'> <option>option one</option> <option>option two</option> <option>option three</option> </select> Selectbox with label.</label> </p>
The label type selector is not assigned author styles. The select type selector and the select:hover and select:focus pseudo-class selectors are assigned author styles:
select {
background-color: #fff;
color: #000;
border: 2px solid #999;
border-radius: 3px;
padding: 4px 6px;
}
select:hover {
border-color: #666;
}
select:focus {
outline: 0;
border-color: #666;
}
Examples of selectboxes:
Selectbox without label:
25.5. Checkboxes
Checkboxes use the input element with the type='checkbox' attribute, the label element, and <span></span> tags containing the HTML character numeric entity (✓) for the check mark (✓) character. The checkbox HTML is nested in <label></label> tags. The label extends the clickable area of the checkbox to include the <label></label> tag content. To place the checkbox before and/or after the <label></label> tag content, nest <span>✓</span> in <label></label> before and/or after the <label></label> tag content. Nesting <span>✓</span> in <label></label> includes the checkbox as part of the clickable <label></label> tag content. Only the data of checked checkboxes, not the data of unchecked checkboxes, is including when a form is submitted. If the checkbox data is to be sent when a form is submitted, use the name attribute with or without the value attribute. If the name attribute is used without the value attribute, assign the name attribute a unique value. If the name attribute is used with the value attribute, assign the name and value attributes a unique pair of values. In other words, if the name attribute is used without the value attribute, then each name attribute value must be unique. And if the name attribute is used with the value attribute, then multiple checkboxes can have the same name attribute value, but each name and value pair of attribute values must be unique, which means checkboxes with the same name attribute value must have unique value attribute values. To default check/pre-check a checkbox, use the checked='checked' attribute:
<p> <label><input type='checkbox' name='unique to indicate checkbox1, if checked, when form submitted' /><span>✓</span> Checkbox</label><br /> <label><input type='checkbox' name='unique to indicate checkbox2, if checked, when form submitted' checked='checked' /><span>✓</span> Checkbox default checked/pre-checked</label><br /> <label><input type='checkbox' name='unique to indicate checkbox3, if checked, when form submitted' />Checkbox <span>✓</span></label> </p>
<p>Select spices without the <code>value</code> attribute:<br /> <label><input type='checkbox' name='salt' /><span>✓</span> Salt (if checked, sends salt=on)</label><br /> <label><input type='checkbox' name='pepper' /><span>✓</span> Pepper (if checked, sends pepper=on)</label> </p>
<p>Select spices with the <code>value</code> attribute:<br /> <label><input type='checkbox' name='spice' value='salt' /><span>✓</span> Salt (if checked, sends spice=salt)</label><br /> <label><input type='checkbox' name='spice' value='pepper' /><span>✓</span> Pepper (if checked, sends spice=pepper)</label> </p>
The input, label, and span type selectors are not assigned author styles. The input[type="checkbox"] attribute selector, the label input[type="checkbox"] ~ span descendant/general sibling selector, and the label input[type="checkbox"]:checked ~ span and label:hover input[type="checkbox"] ~ span pseudo-class selectors are assigned author styles:
input[type="checkbox"] { display: none; }
label input[type="checkbox"] ~ span { display: inline-block; width: 12px; height: 12px; vertical-align: middle; font-size: 12px; font-weight: bold; line-height: 12px; color: transparent; text-align: center; border: 2px solid #999; border-radius: 2px; box-sizing: content-box; -moz-box-sizing: content-box; margin-bottom: 3px; }
label input[type="checkbox"]:checked ~ span { color: inherit; }
label:hover input[type="checkbox"] ~ span { border-color: #666; cursor: default; }
Examples of checkboxes:
25.6. Radio Buttons
Radio buttons use the input element with the type='radio' and name attributes, the label element, and <span></span> tags containing the HTML character numeric entity (●) for the black circle (●) character. Radio buttons with the same name attribute value form a radio button group. The radio button HTML is nested in <label></label> tags. The label extends the clickable area of the radio button to include the <label></label> tag content. To place the radio button before and/or after the <label></label> tag content, nest <span>●</span> in <label></label> before and/or after the <label></label> tag content. Nesting <span>●</span> in <label></label> includes the radio button as part of the clickable <label></label> tag content. Only the data of the checked radio button, not the data of the unchecked radio buttons, is including when a form is submitted. If the radio button group data is to be sent when a form is submitted, use the value attribute and assign the name and value attributes a unique pair of values. In other words, multiple radio buttons can have the same name attribute value, but each name and value pair of attribute values must be unique, which means radio buttons with the same name attribute value must have unique value attribute values. To default check/pre-check a radio button, use the checked='checked' attribute:
color property as shown (●).<p> <label><input type='radio' name='creates radio button group and indicates radio button group1 when form submitted' value='unique to indicate value1, if checked, when form submitted' /><span>●</span> Radio button</label><br /> <label><input type='radio' name='creates radio button group and indicates radio button group1 when form submitted' value='unique to indicate value2, if checked, when form submitted' checked='checked' /><span>●</span> Radio button default checked/pre-checked</label><br /> <label><input type='radio' name='creates radio button group and indicates radio button group1 when form submitted' value='unique to indicate value3, if checked, when form submitted' />Radio button <span>●</span></label> </p>
<p>Select credit card:<br /> <label><input type='radio' name='creditcard' value='mastercard' /><span>●</span> Master Card (if checked, sends creditcard=mastercard)</label><br /> <label><input type='radio' name='creditcard' value='visa' /><span>●</span> Visa (if checked, sends creditcard=visa)</label> </p>
The input, label, and span type selectors are not assigned author styles. The input[type="radio"] attribute selector, the label input[type="radio"] ~ span descendant/general sibling selector, and the label input[type="radio"]:checked ~ span and label:hover input[type="radio"] ~ span pseudo-class selectors are assigned author styles:
input[type="radio"] { display: none; }
label input[type="radio"] ~ span { display: inline-block; width: 12px; height: 12px; vertical-align: middle; font-size: 12px; font-weight: bold; line-height: 12px; color: transparent; text-align: center; border: 2px solid #999; border-radius: 12px; box-sizing: content-box; -moz-box-sizing: content-box; margin-bottom: 3px; }
label input[type="radio"]:checked ~ span { color: inherit; }
label:hover input[type="radio"] ~ span { border-color: #666; cursor: default; }
Example of a radio button group:
26. Images
Images use the img element with the src and alt attributes. If the image is suitable for the CSS box-shadow property, use the class='box-shadow' attribute. Images are placed in either; 1.) the baseline content level (i.e., sibling to paragraphs, lists, notes, tables, etc.) or 2.) <li></li> tags, typically after the content and before the closing </li> tag. The introductory text for the image ends with a colon (:):
<p>Paragraph:</p> <img src='image.ext' alt='Why include image and/or what is image purpose.' /> <p>Paragraph:</p> <img src='image.ext' alt='Why include image and/or what is image purpose.' class='box-shadow' /> <p>Paragraph.</p>
<ol> <li>Ordered list | list item.</li> <li>List item: <img src='image.ext' alt='Why include image and/or what is image purpose.' /> </li> <li>List item: <img src='image.ext' alt='Why include image and/or what is image purpose.' class='box-shadow' /> </li> <li>List item.</li> </ol>
The img type selector and the .box-shadow class selector are assigned author styles:
img {
display: block;
max-width: 100%;
border: 0;
margin: 1em 0;
}
.box-shadow {
box-shadow: 0 1px 6px 0 #ccc;
}
Examples of images:
Paragraph ending with a colon as introductory text for an image without the class='box-shadow' attribute:
Paragraph ending with a colon as introductory text for an image with the class='box-shadow' attribute:
Paragraph.
- Ordered list is for list items that occur in order.
- List item ending with a colon as introductory text for an image without the
class='box-shadow'attribute:
Paragraph.
- Unordered list is for list items that do not occur in order.
- List item ending with a colon as introductory text for an image with the
class='box-shadow'attribute:
Paragraph.
- Ordered list is for list items that occur in order.
- List item ending with a colon as introductory text for an image without the
class='box-shadow'attribute:
- List item first letter first word cap end with period.
- Unordered list is for list items that do not occur in order.
- List item ending with a colon as introductory text for an image with the
class='box-shadow'attribute:
- List item first letter first word cap end with period.
27. Text Conventions
27.1. Code
Code includes web language keywords, identifiers, literals, operators, source code text, source code comments, etc.
27.1.1. Code In Sentences
Code in sentences is snippets of code in sentences.
Code in sentences uses the code element:
<p>Sentence with a <code>snippet of code</code> in the sentence.</p>
In order for the code in the <code></code> tags to be presented as code, it is necessary to replace/escape the quotation mark ("), ampersand (&), less-than sign (<), and greater-than sign (>) characters with their named entities per HTML character named entity usage (below):
<p>Sentence with multiple snippets of code including the <code>input</code> element, the <code>type='radio'</code> attribute, the <code><span></span></code> tags, and the HTML character numeric entity (&#9679;) for the black circle (●) character. Sentence with multiple snippets of code including the <code>input</code> type selector, the <code>input[type="radio"]</code> attribute selector, and the <code>font-size: 16px</code> style without the trailing semicolon (;) character to avoid possible consecutive punctuation characters with text content punctuation.</p>
The code type selector is assigned author styles:
code {
font-family: "courier new", courier, monospace;
line-height: normal;
background-color: #efefef;
border-radius: 3px;
margin: 1em 0;
padding: 1px 4px 0;
}
Examples of sentences with code:
Sentence with multiple snippets of code including the input element, the type='radio' attribute, the <span></span> tags, and the HTML character numeric entity (●) for the black circle (●) character. Sentence with multiple snippets of code including the input type selector, the input[type="radio"] attribute selector, and the font-size: 16px style without the trailing semicolon (;) character to avoid possible consecutive punctuation characters with text content punctuation.
27.1.2. Code In Sentences In Notes
Code in sentences in notes are code in sentences (above) in notes (above). Notes are text separated and demarcated from the normal flow of content. There are two types of notes; 1.) normal notes (tips/asides/etc.), and 2.) important notes (cautions/warnings/etc.). Code in sentences is snippets of code in sentences.
Normal notes use the div element with the class='note normal' attribute. Important notes use the div element with the class='note important' attribute. Code in sentences uses the code element:
<div class='note normal'>Sentence in a normal note with a <code>snippet of code</code> in the sentence.</div>
<div class='note important'>Sentence in an important note with a <code>snippet of code</code> in the sentence.</div>
In order for the code in the <code></code> tags to be presented as code, it is necessary to replace/escape the quotation mark ("), ampersand (&), less-than sign (<), and greater-than sign (>) characters with their named entities per HTML character named entity usage (below):
<div class='note normal'>Sentence in a normal note with multiple snippets of code including the <code>input</code> element, the <code>type='radio'</code> attribute, the <code><span></span></code> tags, and the HTML character numeric entity (&#9679;) for the black circle (●) character.</div>
<div class='note important'>Sentence in an important note with multiple snippets of code including the <code>input</code> type selector, the <code>input[type="radio"]</code> attribute selector, and the <code>font-size: 16px</code> style without the trailing semicolon (;) character to avoid possible consecutive punctuation characters with text content punctuation.</div>
The div type selector is not assigned author styles. The code type selector, the .note code descendant selector, and the .note, .normal, and .important class selectors are assigned author styles:
code { font-family: "courier new", courier, monospace; line-height: normal; background-color: #efefef; border-radius: 3px; margin: 1em 0; padding: 1px 4px 0; }
.note { line-height: 1.75; background-color: #efefef; border: 1px solid #efefef; border-left-width: 5px; border-radius: 3px; margin: 1em 0; padding: 0.5em; }
.normal { border-left-color: #8ccbf2; }
.important { border-left-color: #e05252; }
.note code { background-color: #d7d7d7; }
Examples of code in sentences in notes:
input element, the type='radio' attribute, the <span></span> tags, and the HTML character numeric entity (●) for the black circle (●) character.input type selector, the input[type="radio"] attribute selector, and the font-size: 16px style without the trailing semicolon (;) character to avoid possible consecutive punctuation characters with text content punctuation.27.1.3. Code In Web Page Title
Code in web page title is snippets of code in the web page title (above). The web page title is located near the top of the web page below the LWC Home breadcrumbs navigation (above).
The web page title uses the h1 element. Code in web page title uses the code element:
<h1>Web Page Title With A <code>snippet of code</code> In The Web Page Title</h1>
In order for the code in the <code></code> tags to be presented as code, it is necessary to replace/escape the quotation mark ("), ampersand (&), less-than sign (<), and greater-than sign (>) characters with their named entities per HTML character named entity usage (below). For an example of HTML character named entity usage, see code in sentences (above).
The h1 and code type selectors and the h1 code descendant selector are assigned author styles:
h1 {
font-size: 2.4em;
font-weight: normal;
color: #005a9c;
margin: 14px 0; /* Applied to web page title, not to code in web page title; hence, strike-through. */
}
code {
font-family: "courier new", courier, monospace;
line-height: normal;
background-color: #efefef;
border-radius: 3px;
margin: 1em 0;
padding: 1px 4px 0;
}
h1 code {
line-height: 1;
}
For an example of code in a web page title, go to the top of Introduction To The CSS font-size Property (learnwebcoding.com).
27.1.4. Lines And Blocks Of Code
Lines and blocks of code uses the pre element:
<pre> line of code </pre>
<pre> block of code </pre>
To add line numbers to a block of code having 1 - 9 lines of code, use the span element with the class='line-number-all' attribute:
<pre> <span class='line-number-all'></span>block <span class='line-number-all'></span>of <span class='line-number-all'></span>code <span class='line-number-all'></span>with <span class='line-number-all'></span>line <span class='line-number-all'></span>numbers </pre>
To add line numbers to a block of code having 10 - 99 lines of code: 1.) for lines 1 - 9, to justify right the line numbers, use the span element with the class='line-number-all line-number-justify-right-one' attribute; and 2.) for lines 10 - 99, use the span element with the class='line-number-all' attribute:
<pre> <span class='line-number-all line-number-justify-right-one'></span>code line 1 <span class='line-number-all line-number-justify-right-one'></span>code line 2 <span class='line-number-all line-number-justify-right-one'></span>code line 3 <span class='line-number-all line-number-justify-right-one'></span>code line 4 <span class='line-number-all line-number-justify-right-one'></span>code line 5 <span class='line-number-all line-number-justify-right-one'></span>code line 6 <span class='line-number-all line-number-justify-right-one'></span>code line 7 <span class='line-number-all line-number-justify-right-one'></span>code line 8 <span class='line-number-all line-number-justify-right-one'></span>code line 9 <span class='line-number-all'></span>code line 10 <span class='line-number-all'></span>code line 11 <span class='line-number-all'></span>code line 12 <span class='line-number-all'></span>code line 13 <span class='line-number-all'></span>code line 14 <span class='line-number-all'></span>code lines 15 - 94 <span class='line-number-all'></span>code line 95 <span class='line-number-all'></span>code line 96 <span class='line-number-all'></span>code line 97 <span class='line-number-all'></span>code line 98 <span class='line-number-all'></span>code line 99 </pre>
To add line numbers to a block of code having 100 - 999 lines of code: 1.) for lines 1 - 9, to justify right the line numbers, use the span element with the class='line-number-all line-number-justify-right-two' attribute; 2.) for lines 10 - 99, to justify right the line numbers, use the span element or class='line-number-all line-number-justify-right-one' attribute; and 3.) for lines 100 - 999, use the span element with the class='line-number-all' attribute:
<pre> <span class='line-number-all line-number-justify-right-two'></span>code line 1 <span class='line-number-all line-number-justify-right-two'></span>code line 2 <span class='line-number-all line-number-justify-right-two'></span>code line 3 <span class='line-number-all line-number-justify-right-two'></span>code line 4 <span class='line-number-all line-number-justify-right-two'></span>code line 5 <span class='line-number-all line-number-justify-right-two'></span>code line 6 <span class='line-number-all line-number-justify-right-two'></span>code line 7 <span class='line-number-all line-number-justify-right-two'></span>code line 8 <span class='line-number-all line-number-justify-right-two'></span>code line 9 <span class='line-number-all line-number-justify-right-one'></span>code line 10 <span class='line-number-all line-number-justify-right-one'></span>code line 11 <span class='line-number-all line-number-justify-right-one'></span>code line 12 <span class='line-number-all line-number-justify-right-one'></span>code line 13 <span class='line-number-all line-number-justify-right-one'></span>code line 14 <span class='line-number-all line-number-justify-right-one'></span>code lines 15 - 94 <span class='line-number-all line-number-justify-right-one'></span>code line 95 <span class='line-number-all line-number-justify-right-one'></span>code line 96 <span class='line-number-all line-number-justify-right-one'></span>code line 97 <span class='line-number-all line-number-justify-right-one'></span>code line 98 <span class='line-number-all line-number-justify-right-one'></span>code line 99 <span class='line-number-all'></span>code line 100 <span class='line-number-all'></span>code line 101 <span class='line-number-all'></span>code line 102 <span class='line-number-all'></span>code line 103 <span class='line-number-all'></span>code line 104 <span class='line-number-all'></span>code lines 105 - 994 <span class='line-number-all'></span>code line 995 <span class='line-number-all'></span>code line 996 <span class='line-number-all'></span>code line 997 <span class='line-number-all'></span>code line 998 <span class='line-number-all'></span>code line 999 </pre>
To draw attention to a snippet, line, or sub-block of code within a line or block of code, use the b element:
<pre> boring boring <b>attention</b> boring boring <b>attention</b> boring <b>attention attention</b> boring </pre>
If there are line numbers, do not nest the line numbers within the <b></b> tags:
<pre> <span class='line-number-all'></span>boring <span class='line-number-all'></span>boring <b>attention</b> boring <span class='line-number-all'></span>boring <span class='line-number-all'></span><b>attention</b> <span class='line-number-all'></span>boring <span class='line-number-all'></span><b>attention</b> <span class='line-number-all'></span><b>attention</b> <span class='line-number-all'></span>boring </pre>
To add a comment to a line or block of code, use the span element with the class='comment' attribute:
<pre> code code <span class='comment'>comment</span> code code <span class='comment'>comment</span> code <span class='comment'>comment comment</span> code </pre>
If there are line numbers, do not nest the line numbers within the <span class='comment'></span> tags:
<pre> <span class='line-number-all'></span>code <span class='line-number-all'></span>code <span class='comment'>comment</span> code <span class='line-number-all'></span>code <span class='line-number-all'></span><span class='comment'>comment</span> <span class='line-number-all'></span>code <span class='line-number-all'></span><span class='comment'>comment</span> <span class='line-number-all'></span><span class='comment'>comment</span> <span class='line-number-all'></span>code </pre>
In order for the code in the <pre></pre> tags to be presented as code, it is necessary to replace/escape the quotation mark ("), ampersand (&), less-than sign (<), and greater-than sign (>) characters with their named entities per HTML character named entity usage (below):
<pre>
if (arguments.length > 0){
for (var i = 0; i < arguments.length; i = i + 2){
bcrumbsNavHtmlString += " &rarr; <a href='" + arguments[i] + "index.html'>" + arguments[i + 1] + "</a>";
}
}
</pre>
The span and b type selectors are not assigned author styles. The pre type selector, the pre .comment descendant selector, and the pre > span.line-number-all::before, pre > span.line-number-justify-right-one::before, pre > span.line-number-justify-right-two::before, and pre > span::after pseudo-element selectors are assigned author styles:
pre { counter-reset: line-number; line-height: 1.5; font-family: "courier new", courier, monospace; background-color: #efefef; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; border: 1px solid #efefef; border-left-width: 5px; border-radius: 3px; border-left-color: #aaa; margin: 1em 0; padding: 0.5em; }
pre .comment { color: #008000; }
pre > span.line-number-all::before { content: counter(line-number); counter-increment: line-number; display: inline-block; color: #777; border-right: 1px solid #ccc; padding-right: 0.5em; } /* No space before line number. Allow border-right to span entire line-height. */
pre > span.line-number-justify-right-one::before { content: " " counter(line-number); counter-increment: line-number; } /* One space before line number (hence, justify right one). */
pre > span.line-number-justify-right-two::before { content: " " counter(line-number); counter-increment: line-number; } /* Two spaces before line number (hence, justify right two). */
pre > span::after { content: ""; padding-right: 0.25em; } /* Small space between line number border-right and code. */
Examples of lines and blocks of code:
if (arguments.length > 0){
for (var i = 0; i < arguments.length; i = i + 2){
bcrumbsNavHtmlString += " → <a href='" + arguments[i] + "index.html'>" + arguments[i + 1] + "</a>";
}
}
var BcrumbsNavUtil = {
bcrumbsNav: function(){
var bcrumbsNavElementReference = document.getElementById("bcrumbsNavElement");
var bcrumbsNavHtmlString = "<a href='/index2.html'>Web Site Home Page</a>";
if (arguments.length > 0){
for (var i = 0; i < arguments.length; i = i + 2){
bcrumbsNavHtmlString += " → <a href='" + arguments[i] + "index.html'>" + arguments[i + 1] + "</a>";
}
}
bcrumbsNavElementReference.innerHTML = bcrumbsNavHtmlString;
}
};
var BcrumbsNavUtil = {
bcrumbsNav: function(){
var bcrumbsNavElementReference = document.getElementById("bcrumbsNavElement");
var bcrumbsNavHtmlString = "<a href='/index2.html'>Web Site Home Page</a>";
if (arguments.length > 0){
for (var i = 0; i < arguments.length; i = i + 2){
bcrumbsNavHtmlString += " → <a href='" + arguments[i] + "index.html'>" + arguments[i + 1] + "</a>";
}
}
bcrumbsNavElementReference.innerHTML = bcrumbsNavHtmlString;
}
};
<!DOCTYPE html> <html lang='en'> <head> <title>Learn Web Coding Home Template Explained</title> <meta charset='UTF-8' /> <meta name='Author' content='Steve Taylor' /> <meta name='Keywords' content='Learn Web Coding Home, template, explained' /> <meta name='Description' content='An explanation of the Learn Web Coding Home Template.' /> <meta name='viewport' content='width=device-width, initial-scale=1' /> <style> ... /* CSS single line comment. */ ... /* CSS multiple line comment. */ ... </style> </head> <body> ... <-- HTML single line comment. --> ... <-- HTML multiple line comment. --> ... <script> ... // JavaScript single line comment. ... /* JavaScript single line comment. */ ... /* JavaScript multiple line comment. */ ... </script> </body> </html>
::before and ::after pseudo-elements prohibits inclusion of the line numbers (except IE10+) when use mouse click and drag to highlight the code for copy and paste.<!DOCTYPE html> <html lang='en'> <head> <title>Learn Web Coding Home Template Explained</title> <meta charset='UTF-8' /> <meta name='Author' content='Steve Taylor' /> <meta name='Keywords' content='Learn Web Coding Home, template, explained' /> <meta name='Description' content='An explanation of the Learn Web Coding Home Template.' /> <meta name='viewport' content='width=device-width, initial-scale=1' /> <style> ... /* CSS single line comment. */ ... /* CSS multiple line comment. */ ... </style> </head> <body> ... <-- HTML single line comment. --> ... <-- HTML multiple line comment. --> ... <script> ... // JavaScript single line comment. ... /* JavaScript single line comment. */ ... /* JavaScript multiple line comment. */ ... </script> </body> </html>
27.1.5. Overridden Code
Overridden code denotes code that is overridden by overriding code.
Overridden code uses the s element:
<pre> code <s>overridden code</s> overriding code </pre>
The s type selector is not assigned author styles.
Examples of overridden code:
a { color: #005a9c; text-decoration: none; }
a:hover { color: #000; text-decoration: underline; }
a:focus { outline: thin dotted invert; }
a { color: #ccc; }
a:hover { color: #fff; text-decoration: none; }
a:focus { outline: 0; }
27.1.6. HTML Character Named Entity Usage
Some characters have a special purpose/meaning in HTML and, therefore, in certain contexts, should be replaced (a.k.a., escaped) with their named or numeric entity. In HTML, the following characters are to be replaced with their named or numeric entities as specified:
| Character | Named Entity | Numeric Entity | Character Special Purpose/Meaning In HTML | Replace Character With Named Entity |
|---|---|---|---|---|
| quotation mark (") (1) | " |
" |
To denote the start/end of an HTML element attribute value. | Always, except when being used to denote the start/end of an HTML element attribute value. |
| ampersand (&) | & |
& |
To denote the start of an HTML character named or numeric entity. | Always, except when being used to denote the start of an HTML character named or numeric entity. |
| less-than sign (<) | < |
< |
To denote the start of an HTML tag. | Always, except when being used to denote the start of an HTML tag. |
| greater-than sign (>) | > |
> |
To denote the end of an HTML tag. | Always, except when being used to denote the end of an HTML tag. |
| (1) Quotation mark is also known as double quotation mark. | ||||
27.2. User Input
All user input types use the kbd element. Use the kbd element on user inputs to perform, or on user inputs that were performed, not on user inputs mentioned casually, nor on user inputs not to perform. For example:
- Enter is a key on the keyboard.
- Press Enter.
- In the Abc password field, enter the password or check No password. In this example, abc_psswrd was entered.
- In the Xyz password field, enter the password or check No password. In this example, No password was checked.
27.2.1. Objects To Click
Objects to click include buttons, tabs, etc. Objects are clicked. In general, use the button/tab name, not the word button/tab.
For example, click OK and General, not click the OK button and the General tab. Multiple objects to click in succession are separated by a vertical line (|) character. In general, do not include tabs that are selected by default. Use the same spelling and capitalization as the button/tab name.
Objects to click use the kbd element. The vertical line (|) character is included in the <kbd></kbd> tags. There is one space character before and after the vertical line (|) character:
<p><kbd>object</kbd></p>
<p><kbd>object1 | object2 | object3</kbd></p>
The kbd type selector is assigned author styles:
kbd {
font-family: arial, tahoma, sans-serif;
font-weight: bold;
}
Examples of objects to click:
Click OK.
Click Start | Control Panel | Internet Options | Advanced | Reset | Reset.
Either accept the default and click Next, or click New, create one or more drives, select a drive for the installation of Windows 8.1, and click Next.
27.2.2. Keyboard Keys To Press
Keyboard keys are pressed. In general, use the keyboard key name, not the word key.
For example, press Enter, not press the Enter key. Multiple keyboard keys to press simultaneously are separated by a plus sign (+) character. Use the same spelling and capitalization as the keyboard key.
Keyboard keys to press use the kbd element. The plus sign (+) character is not included in the <kbd></kbd> tags. There is no space character before or after the plus sign (+) character:
<p><kbd>key</kbd></p>
<p><kbd>key</kbd>+<kbd>key</kbd></p>
The kbd type selector is assigned author styles:
kbd {
font-family: arial, tahoma, sans-serif;
font-weight: bold;
}
Examples of keyboard keys to press:
Press Enter.
Press Ctrl+Alt+Del.
27.2.3. Text To Enter Or Type
Text is entered or typed. In general, text is entered into forms and typed at the terminal/command prompt.
Text to enter or type uses the kbd element:
<p><kbd>text to enter or type</kbd></p>
The kbd type selector is assigned author styles:
kbd {
font-family: arial, tahoma, sans-serif;
font-weight: bold;
}
Examples of text to enter or type:
In the username field, enter yourUsername.
Type fdisk /mbr and press Enter.
27.2.4. Fieldsets
In the Abc fieldset. Go to the Abc fieldset. Use the same spelling and capitalization as the fieldset name.
Fieldsets do not use an HTML element:
<p>the Abc fieldset</p>
Fieldsets are not assigned author styles.
Examples of fieldsets:
In the Database fieldset.
Go to the Database fieldset.
27.2.5. Textboxes And Textareas (Fields)
Textboxes and textareas are referred to as fields. Text is entered into fields. In the Abc field, enter text. In general, use field,
not textbox
or textarea.
For example, in the Abc field, not in the Abc textbox, not in the Abc textarea. Use the same spelling and capitalization as the field name.
Fields do not use an HTML element. As described in text to enter or type (above), the text entered into a field uses the kbd element:
<p>In the Abc field, enter <kbd>text</kbd>.</p>
Fields are not assigned author styles.
Examples of fields:
In the Profile field, enter profile1.
In the Profile field, enter a profile name. In this example, profile1 was entered.
In the Profile field, use the default (profile) or enter a different profile name. In this example, profile was entered.
In the Profile field, use the default (profile) or enter a different profile name. In this example, profile1 was entered.
In the Xyz field, enter a password. In this example, the field was empty/blank.
27.2.6. Selectboxes (Dropdowns)
Selectboxes are also known as dropdowns. Dropdown options are selected. In the Abc dropdown, select option name. In general, use dropdown,
not selectbox.
For example, in the Abc dropdown, not in the Abc selectbox. Use the same spelling and capitalization as the selectbox name and the option name.
Selectbox names do not use an HTML element. The selected option uses the kbd element:
<p>In the Abc selectbox, select <kbd>option name</kbd>.</p> <p>In the Abc dropdown, select <kbd>option name</kbd>.</p>
The kbd type selector is assigned author styles:
kbd {
font-family: arial, tahoma, sans-serif;
font-weight: bold;
}
Examples of selectboxes:
In the Year dropdown, select 2016.
In the Year dropdown, select a year. In this example, 2016 was selected.
In the Year dropdown, select the default (2016) or select a different year. In this example, 2016 was selected.
27.2.7. Checkboxes
Checkboxes are checked or unchecked, not selected or unselected. Use the same spelling and capitalization as the checkbox name.
The checked and unchecked checkboxes use the kbd element:
<p>Check <kbd>checkbox name</kbd>.</p>
<p>Uncheck <kbd>checkbox name</kbd>.</p>
The kbd type selector is assigned author styles:
kbd {
font-family: arial, tahoma, sans-serif;
font-weight: bold;
}
Examples of checkboxes:
Under Server, check Apache and MySQL. Under Program Languages, uncheck phpMyAdmin.
Under Server, check/uncheck the servers. In this example, Apache and MySQL were checked. Under Program Languages, check/uncheck the program languages. In this example, phpMyAdmin was unchecked.
Under Server, check the defaults (Apache and MySQL) or check/uncheck different servers. In this example, Apache and MySQL were checked. Under Program Languages, uncheck the default (phpMyAdmin) or check/uncheck different program languages. In this example, phpMyAdmin was unchecked.
27.2.8. Radio Button Groups
A radio button group consists of one or more radio buttons. Radio buttons are checked, not selected. Use the same spelling capitalization as the radio button group name and the radio button name.
Radio button group names do not use an HTML element. The checked radio button uses the kbd element:
<p>In the Abc radio button group, check <kbd>radio button name</kbd>.</p>
The kbd type selector is assigned author styles:
kbd {
font-family: arial, tahoma, sans-serif;
font-weight: bold;
}
Examples of radio button groups:
In the Delivery Method radio button group, check Next Business Day.
In the Delivery Method radio button group, check a delivery method. In this example, Next Business Day was checked.
In the Delivery Method radio button group, check the default (Next Business Day) or check a different delivery method. In this example, Next Business Day was checked.
27.3. Email Addresses And URIs
27.3.1. Email Addresses As Hyperlinks
Email addresses as hyperlinks open the computer's default email client and insert the recipient's email address into the email client's To field.
Email addresses as hyperlinks are treated as hyperlinks (above). In other words, email addresses as hyperlinks are treated either as normal hyperlinks (above) or as list hyperlinks (above). The only difference between URIs as hyperlinks and email addresses as hyperlinks is that with email addresses as hyperlinks the <a> element href attribute value is the recipient's email address prepended with mailto:, not a URI.
Email addresses as hyperlinks: normal hyperlinks:
<p><a href='mailto:user@company.com'>email address</a></p>
Email addresses as hyperlinks: list hyperlinks:
<ul class='link-list'> <li><a href='mailto:user@company.com'>Email Address</a></li> </ul>
Examples of email addresses as hyperlinks: normal hyperlinks:
An email address as hyperlink (normal hyperlink) is email address.
An email address as hyperlink (normal hyperlink) is contact.
An email address as hyperlink (normal hyperlink) is user@company.com.
Examples of email addresses as hyperlinks: list hyperlinks:
27.3.2. Email Addresses And URIs As Text
Email addresses and URIs as text do not use an HTML element:
<p>An email address as text is user@company.com.</p>
<p>A URI as text is http://www.learnwebcoding.com/.</p>
Email addresses and URIs as text are not assigned author styles.
Examples of email addresses and URIs as text:
An email address as text is user@company.com.
A URI as text is http://www.learnwebcoding.com/.
27.4. Filenames, Folder/Directory Names, File System Paths, And Terminal/Command Prompt Output
Filenames, folder/directory names, file system paths, and terminal/command prompt output use the span element with the class='filename' attribute:
<span class='filename'>filename.ext</span>
The span type selector is not assigned author styles. The .filename class selector is assigned author styles:
.filename {
font-family: "courier new", courier, monospace;
}
Examples of filenames, folder/directory names, file system paths, and terminal/command prompt output:
The Bootstrap implementation requires loading the Bootstrap style sheet bootstrap.min.css file, the jQuery JavaScript jquery-3.4.1.min.js file, and the Bootstrap JavaScript bootstrap.min.js file.
The wscript.exe file is located in the System32 folder. Therefore, the file system path to the wscript.exe file is C:\Windows\System32\wscript.exe.
The root of the web server is C:\xampp\htdocs.
Copy the quickinstall QuickInstall software folder to the root of the web server. In this example, the quickinstall QuickInstall software folder was copied to the root of XAMPP Apache as C:\xampp\htdocs\quickinstall.
Subsequent phpBB board software to install is copied to the QuickInstall software sources\phpBB3_alt directory.
The command prompt at A:\> appears.
27.4.1. Filenames As Hyperlinks
Filenames as hyperlinks either open the file in the web browser, or prompt the user to open or save the file.
Filenames as hyperlinks are treated as hyperlinks (above). In other words, filenames as hyperlinks are treated either as normal hyperlinks (above) or as list hyperlinks (above). The only difference between URIs as hyperlinks and filenames as hyperlinks is that with filenames as hyperlinks the <a> element href attribute value is the path to a file, not to a web page.
Filenames as hyperlinks: normal hyperlinks:
<p><a href='/rootrelativepath/filename.ext'><span class='filename'>filename.ext</span> (domain.com)</a></p>
Filenames as hyperlinks: list hyperlinks:
<ul class='link-list'> <li><a href='/rootrelativepath/filename.ext'><span class='filename'>filename.ext</span> (domain.com)</a></li> </ul>
Examples of filenames as hyperlinks: normal hyperlinks:
A filename as hyperlink (normal hyperlink) is filename.ext (learnwebcoding.com).
A filename as hyperlink (normal hyperlink) is filename.txt (learnwebcoding.com).
Examples of filenames as hyperlinks: list hyperlinks:
- collapse_expand_all.html (learnwebcoding.com)
- collapse_expand_all.css (learnwebcoding.com)
- collapse_expand_all.js (learnwebcoding.com)
27.5. Database Names, Table Names, Column Names, Field Data, And User Accounts
Database names, table names, column names, field data, and user accounts use the span element with the class='filename' attribute:
<span class='filename'>database_name</span>
The span type selector is not assigned author styles. The .filename class selector is assigned author styles:
.filename {
font-family: "courier new", courier, monospace;
}
Examples of database names, table names, column names, field data, and user accounts:
Update database server support. Primary changes: 1.) add support for MySQL 5.7 stores MySQL user account password in mysql.user table authentication_string column, not password column (in MySQL 5.7, mysql.user table password column does not exit); 2.) add support for MySQL 5.7 'mysql.session'@'localhost' and 'mysql.sys'@'localhost' reserved user accounts, and MariaDB 10.0 - 10.2 'root'@'computername-pc' reserved user account; 3.) add support for MySQL 5.7 sys reserved database; and 4.) change MySQL to store Simple MySQL Admin | User Accounts | create user account | host name/IP address field empty/blank in mysql.user table host column as any host name ('%' string), not empty string (''), and change Simple MySQL Admin | User Accounts | create user account reports to display host name/IP address field empty/blank as any host name ('%' string), not empty string ('').
27.6. Dialog Titles And Web Page Titles
In a dialog, the dialog title appears in the dialog title bar, and the dialog text appears in the body of the dialog. In general, use dialog
, not dialog box.
For example, the Setup dialog appears, not the Setup dialog box appears. Always use the dialog title. The dialog text is optional. The dialog title and the dialog text are separated by a colon (:) character. Use the same spelling, capitalization, and punctuation, including any ending punctuation, as the dialog title and the dialog text.
In a web page, the web page title typically appears in at least two place; 1.) in the <head></head> section <title></title> tags, and 2.) in the <body></body> section <h1></h1> tags as discussed in web page title (above). Traditionally, the <head></head> section <title></title> tag content is displayed in the web browser title bar, and the <body></body> section <h1></h1> tag content is the first prominent text near the top of the web page. In general, use the <title></title> tag content or the <h1></h1> tag content, which ever is present and most descriptive of the web page. If the web page is a tabbed web page, use the tab title, the <title></title> tag content, or the <h1></h1> tag content, which ever is most descriptive of the web page. Use the same spelling, capitalization. and punctuation, including any ending punctuation, as the tab title, the <title></title> tag content, or the <title></title> tag content.
Dialog titles and web page titles use the b element. For dialog titles with dialog text, there is no space character before, and there is one space character after, the colon (:) character:
<p><b>Dialog Title</b></p>
<p><b>Dialog Title: Dialog text.</b></p>
<p><b>Web Page Title Using Title Tag Content</b></p>
<p><b>Web Page Title Using H1 Tag Content</b></p>
<p><b>Web Page Title Using Tab Title</b></p>
The b type selector is not assigned author styles.
Examples of dialog titles and web page titles:
The Windows Setup dialog appears.
The Windows Setup: Which type of installation do you want? dialog appears.
The Learn Web Coding Home Template web page appears
The Security web page appears.
The General tab is selected.
27.7. Computer Status Reports
Computer status reports are text that convey the error, warning, success, or miscellaneous status of a computer related operation. Use the same spelling, capitalization, and punctuation, including any ending punctuation, as the computer status report.
Computer status reports use the q element:
<p><q>Computer status report.<q></p>
Examples of computer status reports:
The Please enter a value less than or equal to 0.
validation error message appears.
The Information: Configuration updated successfully.
report appears.
If the Ready on port 80
report appears, Node.js is properly installed and nodetest.js is running and listening on port 80.
The W3C CSS Validation Service throws a warning: :-ms-input-placeholder is an unknown vendor extended pseudo-class.
In Compatibility View, the Internet Explorer 11.0 for Windows 10 Version 1507 32-bit user-agent string value reports trident/8.0
, not trident/7.0
.
27.8. Emphasized Text
Emphasized text is text of importance that stands out compared to the surrounding text.
Emphasized text uses the em element:
<p><em>Emphasized text.</em></p>
The em type selector is not assigned author styles.
Examples of emphasized text:
Paragraph ending with a period as introductory text for an ordered list.
Paragraph ending with a colon as introductory text for an ordered list:
27.9. Quoted Text
27.9.1. Quoted Words
Quoted words are one or more words in quotes. The quotes can indicate that the words are a quote, that they are to be taken literally, or that they are being used in a special way, such as when a person makes quote marks in the air with their fingers when speaking.
Quoted words uses the q element:
<p><q>Quoted words.</q></p>
The q type selector is not assigned author styles:
Examples of quoted words:
The silent
battle in the web browser war.
Consider, for example, the following two sentences describing one of the Cascade's rules for resolving style conflicts, where reader
means user, and UA's default values
and the default style sheet
mean user agent styles:
If left empty/blank, default
is automatically assigned.
The phpBB board database name, prefixed with qi_
.
27.9.2. Quoted Text With Source
Quoted text with source is quoted text with the source of the quote. If the quoted text with source is presented as a block, the source may follow the quoted text and may be separated from the quoted text by a hyphen (-) character.
The quoted text uses the q and i elements and the source uses the cite element. The hyphen (-) character is not included in the <q><i></i></q> or <cite></cite> tags. There is a single space character before and after the hyphen (-) character:
<p>The <cite>Source</cite> said, <q><i>Quoted text.</i></q></p>
<p><q><i>Quoted text.</i></q> - <cite>Source</cite>.</p>
The q and i type selectors are not assigned author styles. The cite type selector is assigned author styles:
cite {
font-style: normal;
}
Examples of quoted text:
The W3C's mission is, To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.
Sort by origin: the author's style sheets override the reader's style sheet which override the UA's default values.
- W3C CSS1 Recommendation.
28. Resources And Additional Information
- Learn Web Coding Home Template (learnwebcoding.com)
- Learn Web Coding Home Template Download (learnwebcoding.com)
- Google Mobile-Friendly Test (search.google.com)
- Google Mobile Website Speed Testing Tool (testmysite.thinkwithgoogle.com)
- Google Developers PageSpeed Insights (developers.google.com)
- Bootstrap (getbootstrap.com)
- Font Awesome (fontawesome.io)
- jQuery (jquery.com)
- W3C Markup Validation Service (validator.w3.org)
- WHATWG Validator.nu (X)HTML5 Validator (html5.validator.nu)
- W3C CSS Validation Service (jigsaw.w3.org)
- Google Developers PageSpeed Insights (developers.google.com)
- HTML5: A Vocabulary And Associated APIs For HTML And XHTML: W3C Recommendation 28 October 2014
- Page Title First Letter Each Word Capital End Without Period (domain.com)
- Page Title First Letter Each Word Capital End Without Period (.pdf) (.doc) (video) (domain.com)
- microATX First Letter Each Word Unless Convention Is Not Capital microATX (domain.com)
- Some Organization Name (SON) (domain.com) (Post list hyperlink parentheses order shown here.) (Jim Taylor) (Formerly Web Site Name) (Formerly at domain.com) (Mandrakesoft plus Conectiva) (Formerly Caldera) (Windows XP/Vista/7/8/8.1) (Windows/Mac OS X/Linux) (Includes a forum) (Data: Apr11) (Published: 14Feb12) (Infineon and Kingston) (The Webmaster) (Link description unless it is large and/or better suited in a note, which should rarely be the case.) (Thanks name) (End without period unless a sentence, sentence fragment, or ending without period seems odd/wrong.)
Use note in list hyperlink for:
- Instructions for the linked web page/site.
- Information from the linked web page/site.
- Anything else about the linked web page/site better suited in a note than in post list hyperlink parentheses, which should rarely be the case. For notable exceptions see Network Resources, Anti-Malware Resources, and Memory Resources.
- End without period unless a sentence, sentence fragment, or ending without period seems odd/wrong.
- Microsoft Knowledge Base Article Title (923737) (support.microsoft.com)