Article de reference

HTML editor

( Learn how and when to remove this message ) An HTML editor is a program used for editing HTML, the markup of a web page. Although the HTML markup in a web page can be controll...

(Learn how and when to remove this message)

An HTML editor is a program used for editing HTML, the markup of a web page. Although the HTML markup in a web page can be controlled with any text editor, specialized HTML editors can offer convenience, added functionality, and organisation. For example, many HTML editors handle not only HTML, but also related technologies such as CSS, JavaScript, or ECMAScript. In some cases, they also manage communication with remote web servers via FTP and WebDAV, and version control systems such as Subversion or Git. Many word processing, graphic design, and page layout programs that are not dedicated to web design, such as Microsoft Word or QuarkXPress, also have the ability to edit & export HTML documents.

Text editors

Text editors intended for use with HTML usually provide at least syntax highlighting. Some editors additionally feature templates, toolbars, and keyboard shortcuts to quickly insert common HTML elements and structures. Wizards, tooltip prompts, and autocompletion may help with common tasks.

Text editors commonly used for HTML typically include either built-in functions or integration with external tools for such tasks as version control, link-checking and validation, code cleanup and formatting, spell-checking, uploading by FTP or WebDAV, and structuring as a project. Some functions, such as link checking or validation, may use online tools, requiring a network connection.

Text editors require user understanding of HTML and any other web technologies the designer wishes to use, like CSS, JavaScript and server-side scripting languages.

To ease this requirement, some editors allow editing of the markup in more visually organized modes than simple color highlighting, but in modes not considered WYSIWYG. These editors typically include the option of using palette windows or dialog boxes to edit the text-based parameters of selected objects. These palettes allow editing parameters in individual fields, or inserting new tags by filling out an onscreen form, and may include additional widgets to present and select options when editing parameters (such as previewing an image or text styles) or an outline editor to expand and collapse HTML objects and properties.

WYSIWYG HTML editors

Amaya 10 HTML editor

WYSIWYG HTML editors provide an editing interface that resembles how the page will be displayed in a web browser. Because using a WYSIWYG editor may not require any HTML knowledge, they are often easier for an inexperienced computer user to get started with.

The WYSIWYG view is achieved by embedding a layout engine. This may be custom-written or based on one used in a web browser. The goal is that, at all times during editing, the rendered result should represent what will be seen later in a typical web browser.

WYSIWYM (what you see is what you mean) is an alternative paradigm to WYSIWYG editors. Instead of focusing on the format or presentation of the document, it preserves the intended meaning of each element. For example, page headers, sections, paragraphs, etc., are labeled as such in the editing program and displayed appropriately in the browser.

Difficulties in achieving WYSIWYG

Un document HTML donné aura un aspect incohérent sur différentes plateformes et ordinateurs pour plusieurs raisons :

Les différents navigateurs et applications interpréteront différemment le même balisage.
Une même page peut s'afficher légèrement différemment, par exemple, dans Chrome , Safari , Edge , Internet Explorer et Firefox sur un écran haute résolution, mais son apparence sera très différente dans le navigateur Lynx, parfaitement fonctionnel et limité au mode texte . Elle devra être rendue différemment sur un assistant personnel , une télévision connectée et un téléphone mobile . L'ergonomie dans un navigateur vocal ou braille , ou via un lecteur d'écran fonctionnant avec un navigateur classique, exigera des aspects totalement différents du code HTML sous-jacent. L'auteur ne peut que suggérer une apparence.
Les navigateurs Web, comme tous les logiciels informatiques, contiennent des bogues .
Il se peut qu'elles ne soient pas conformes aux normes actuelles . Concevoir des pages Web en tenant compte de tous les bugs des navigateurs courants est illusoire : à chaque nouvelle version d'un navigateur, une part importante du Web devrait être réécrite pour corriger les nouveaux bugs et les correctifs. Il est généralement considéré comme plus judicieux de concevoir en respectant les normes, en évitant les fonctionnalités de pointe jusqu'à ce qu'elles soient stabilisées, puis d'attendre que les développeurs de navigateurs intègrent les nouvelles fonctionnalités à vos pages, plutôt que l'inverse. Par exemple, personne ne peut affirmer que le CSS soit encore une technologie de pointe, car toutes ses principales fonctionnalités sont désormais largement prises en charge par les navigateurs courants, même si de nombreux éditeurs WYSIWYG et autres ne sont pas encore totalement compatibles.
Un seul style visuel peut représenter plusieurs significations sémantiques.
Le sens sémantique, qui découle de la structure sous-jacente du document HTML, est essentiel pour les moteurs de recherche et les outils d'accessibilité. Sur papier, le contexte et l'expérience nous permettent de comprendre si un texte en gras représente un titre, une mise en valeur ou autre chose. Or, il est très difficile de restituer cette distinction dans un éditeur WYSIWYG. Mettre un texte en gras ne suffit pas à expliquer au lecteur *pourquoi* ce texte est en gras, c'est-à-dire ce que le gras représente sémantiquement.
Les sites web modernes sont rarement conçus de manière à rendre le WYSIWYG utile.
Les sites web modernes utilisent généralement un système de gestion de contenu ou un autre système de traitement de modèles pour générer les pages dynamiquement à partir de données stockées dans une base de données. Les pages individuelles ne sont jamais enregistrées dans un système de fichiers, car elles sont conçues et modifiées dans un éditeur WYSIWYG. De ce fait, une mise en page abstraite basée sur des modèles est inévitable, ce qui remet en cause l'un des principaux avantages de l'utilisation d'un éditeur WYSIWYG.

Balisage HTML valide

HTML est un langage de balisage structuré . Il existe des règles précises sur la manière d'écrire du HTML pour être conforme aux normes du W3C pour le Web. Le respect de ces règles garantit l'accessibilité des sites web sur tous les types d'ordinateurs, aux personnes valides comme aux personnes en situation de handicap, ainsi que sur les appareils sans fil tels que les téléphones mobiles et les assistants numériques personnels (PDA), malgré leurs limitations de bande passante et de taille d'écran. Cependant, la plupart des documents HTML sur le web ne répondent pas aux exigences des normes du W3C. Une étude menée en 2011 sur les 350 sites web les plus populaires (sélectionnés par l'indice Alexa) a révélé que 94 % d'entre eux échouaient aux tests de validation des normes web concernant le balisage et les feuilles de style, ou utilisaient un encodage de caractères incorrect. Même les documents syntaxiquement corrects peuvent s'avérer inefficaces en raison d'une utilisation excessive de répétitions, ou être basés sur des règles obsolètes depuis plusieurs années. Les recommandations actuelles du W3C concernant l'utilisation de CSS avec HTML ont été formalisées pour la première fois par le W3C en 1996 et ont été révisées et affinées depuis.

Ces recommandations insistent sur la séparation du contenu (HTML ou XHTML) et du style (CSS). L'avantage est de fournir les informations de style une seule fois pour l'ensemble du site, sans les répéter sur chaque page ou élément HTML. Cela représente un défi pour les concepteurs d'éditeurs WYSIWYG, qui cherchent depuis longtemps la meilleure façon de présenter ces concepts à leurs utilisateurs sans leur dévoiler les contraintes techniques.

Valid markup is more likely to be rendered consistently and accessibly across different browsers and devices. Validation tools such as the W3C HTML Validator and W3C CSS Validator allow authors to check for syntactical and other errors in their HTML markup.

In some countries, accessibility of web pages by those with physical, eyesight or other disabilities is mandated by law. The United States's Americans with Disabilities Act and the United Kingdom's Disability Discrimination Act require this for websites operated by publicly funded organizations.Making pages accessible is more complex than just making them valid; that is a prerequisite but there are many other factors to be considered. Good web design, whether done using a WYSIWYG tool or not needs to take account of these too.

Whatever software tools are used to design, create and maintain web pages, the quality of the underlying HTML is dependent on the skill of the person who works on the page. Some knowledge of HTML, CSS and other scripting languages as well as a familiarity with the current W3C recommendations in these areas will help any designer produce better web pages, with a WYSIWYG HTML editor and without.