Rules for HTML in systems with theming
Theming guidelines — Part 2
Most content management systems allow you to use theming for style customizations. Plugins systems and portlets can add new functionality or customizations into to the mix.
Theming guidelines
This article is part of block of articles about theming guidlines.
- 1. Customize Bootstrap or other toolkits, ui-frameworks or ui-libraries
- 2. Rules for HTML in systems with theming
- 3. Rules for theming and Styling with CSS, SCSS
Portlet — an application used by a portal website to receive requests from clients and return information.
Purpose of the HTML is to create structured documents. Browsers do not display the HTML tags but use them to interpret the content of the page. Build in components can look and behave differently on some browsers. Styles and javascript can change default look or allow additional interactivity for the document.
Best practices
Leverage toolkit and theme for styling 💅
- use components and class names proved by supported the toolkit
- use minimal custom styles for the portlet
- for custom styles use variables from the theme
If you follow best practices, you will have less work porting portlets to other themes. Toolkit updates to new versions will cost you less as well.
Use semantically correct HTML5 elements
Provided semantic help screen readers and search engines to understand the content.
👍 SEO improvement just by following the standard.
<section>The HTML<section>element represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an HTML document.
<header>The HTML<header>element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, a search form, an author name, and so on.
<footer>The HTML<footer>element represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents.
<dl>The HTML<dl>element represents a description list. The element encloses a list of groups of terms (specified using the<dt>element) and descriptions (provided by<dd>elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
<dt>The HTML<dt>element specifies a term in a description or definition list, and as such must be used inside a<dl>element.
<dd>The HTML<dd>element provides the details about or the definition of the preceding term (<dt>) in a description list (<dl>).
ℹ ️Add metadata provided by http://schema.org/
Schema.org provides schemas for structured data on the internet.
- use microdata encoding
- Important information accessible by search engines (✉️addresses, 📞telephone numbers, ⏰opening hours, 🎤events or 📦products …) should have metadata.
👍 When you add structured data to your website search engines will be able to navigate users using this data directly to the desired content. Google can display location to your business or phone number to contact you directly in search.
🔍 Manage focus
- properly indicate focused elements
- allow keyboard navigation
Correct rules for links buttons and other tags, if an element can receive click it needs to handle keyboard events as well https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role
- manage focus for interactive elements
When dropdowns and any other element opens, you are required to change focus to opened content.
👓 Follow accessibility rules
- all the images should have alt attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
- other accessibility rules https://developer.mozilla.org/en-US/docs/Web/Accessibility
