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, XML and
JavaScript
JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior.
Web browsers have ...
, 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
Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design (UI design); authoring, including standardised code a ...
, such as Microsoft Word or Quark XPress, also have the ability to function as HTML editors.
Text editors
Text editors intended for use with HTML usually provide at least
syntax highlighting
Syntax highlighting is a feature of text editors that is used for programming language, programming, scripting language, scripting, or markup language, markup languages, such as HTML. The feature displays text, especially source code, in differe ...
. Some editors additionally feature
templates,
toolbars , and
keyboard shortcut
In computing, a keyboard shortcut (also hotkey/hot key or key binding) is a software-based assignment of an action to one or more keys on a computer keyboard. Most Operating system, operating systems and Application software, applications come ...
s to quickly insert common
HTML element
An HTML element is a type of HTML (HyperText Markup Language) document component, one of several types of HTML nodes (there are also text nodes, comment nodes and others). The first used version of HTML was written by Tim Berners-Lee in 199 ...
s and structures.
Wizards,
tooltip
The tooltip, also known as infotip or hint, is a common graphical user interface (GUI) element in which, when hoverbox, hovering over a screen element or component, a text box displays information about that element, such as a description of a ...
prompts, and
autocompletion
Autocomplete, or word completion, is a feature in which an application predicts the rest of a word a user is typing. In Android and iOS smartphones, this is called predictive text. In graphical user interfaces, users can typically press the t ...
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
Version control (also known as revision control, source control, and source code management) is the software engineering practice of controlling, organizing, and tracking different versions in history of computer files; primarily source code t ...
, 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 box
In computing, a dialog box (also simply dialog) is a graphical control element in the form of a small window that communicates information to the user and prompts them for a response.
Dialog boxes are classified as " modal" or "modeless", dep ...
es 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
WYSIWYG HTML editors provide an editing interface that resembles how the page will be displayed in a
web browser
A web browser, often shortened to browser, is an application for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's scr ...
. 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
A given HTML document will have an inconsistent appearance on various
platforms and computers for several reasons:
;Different browsers and applications will render the same markup differently.
:The same page may display slightly differently, for example, in
Chrome,
Safari
A safari (; originally ) is an overland journey to observe wildlife, wild animals, especially in East Africa. The so-called big five game, "Big Five" game animals of Africa – lion, African leopard, leopard, rhinoceros, African elephant, elep ...
,
Edge,
Internet Explorer
Internet Explorer (formerly Microsoft Internet Explorer and Windows Internet Explorer, commonly abbreviated as IE or MSIE) is a deprecation, retired series of graphical user interface, graphical web browsers developed by Microsoft that were u ...
and
Firefox
Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display web pages, which implements curr ...
on a high-resolution screen, but it will look very different in the perfectly valid text-only
Lynx
A lynx ( ; : lynx or lynxes) is any of the four wikt:extant, extant species (the Canada lynx, Iberian lynx, Eurasian lynx and the bobcat) within the medium-sized wild Felidae, cat genus ''Lynx''. The name originated in Middle Engl ...
browser. It needs to be rendered differently again on a
PDA, an
internet-enabled television , and on a
mobile phone
A mobile phone or cell phone is a portable telephone that allows users to make and receive calls over a radio frequency link while moving within a designated telephone service area, unlike fixed-location phones ( landline phones). This rad ...
. Usability in a
speech
Speech is the use of the human voice as a medium for language. Spoken language combines vowel and consonant sounds to form units of meaning like words, which belong to a language's lexicon. There are many different intentional speech acts, suc ...
or
braille
Braille ( , ) is a Tactile alphabet, tactile writing system used by blindness, blind or visually impaired people. It can be read either on embossed paper or by using refreshable braille displays that connect to computers and smartphone device ...
browser, or via a
screen-reader working with a conventional browser, will place demands on entirely different aspects of the underlying HTML. All an author can do is suggest an appearance.
;Web browsers, like all computer software, have
bugs.
:They may not conform to current
standards Standard may refer to:
Symbols
* Colours, standards and guidons, kinds of military signs
* Standard (emblem), a type of a large symbol or emblem used for identification
Norms, conventions or requirements
* Standard (metrology), an object t ...
. It is hopeless to try to design Web pages around all of the common browsers' current bugs: each time a new version of each browser comes out, a significant proportion of the
World Wide Web
The World Wide Web (WWW or simply the Web) is an information system that enables Content (media), content sharing over the Internet through user-friendly ways meant to appeal to users beyond Information technology, IT specialists and hobbyis ...
would need re-coding to suit the new bugs and the new fixes. It is generally considered much wiser to design to standards, staying away from 'bleeding edge' features until they settle down, and then wait for the browser developers to catch up to your pages, rather than the other way round. For instance, no one can argue that CSS is still 'cutting edge' as there is now widespread support available in common browsers for all the major features, even if many WYSIWYG and other editors have not yet entirely caught up.
;A single visual style can represent multiple semantic meanings
:Semantic meaning, derived from the underlying structure of the HTML document, is important for search engines and also for various accessibility tools. On paper, we can tell from context and experience whether bold text represents a title, emphasis, or something else. But it is very difficult to convey this distinction in a WYSIWYG editor. Simply making a piece of text bold in a WYSIWYG editor is not sufficient to tell the reader *why* the text is bold – what the boldness represents semantically.
;Modern websites are rarely constructed in a way that makes WYSIWYG useful
:Modern websites typically use a
content management system
A content management system (CMS) is computer software used to manage the creation and modification of digital content ( content management).''Managing Enterprise Content: A Unified Content Strategy''. Ann Rockley, Pamela Kostur, Steve Manning. New ...
or some other
template processor-based means of constructing pages on the fly using content stored in a database. Individual pages are never stored in a filesystem as they may be designed and edited in a WYSIWYG editor, thus some form of abstracted template-based layout is inevitable, invalidating one of the main benefits of using a WYSIWYG editor.
Valid HTML markup
HTML is a structured
markup language
A markup language is a Encoding, text-encoding system which specifies the structure and formatting of a document and potentially the relationships among its parts. Markup can control the display of a document or enrich its content to facilitate au ...
. There are certain rules on how HTML must be written if it is to conform to
W3C
The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web. Founded in 1994 by Tim Berners-Lee, the consortium is made up of member organizations that maintain full-time staff working together in ...
standards for the World Wide Web. Following these rules means that web sites are accessible on all types and makes of computer, to able-bodied and people with disabilities, and also on
wireless
Wireless communication (or just wireless, when the context allows) is the transfer of information (''telecommunication'') between two or more points without the use of an electrical conductor, optical fiber or other continuous guided transm ...
devices like mobile phones and PDAs, with their limited bandwidths and screen sizes. However, most HTML documents on the web do not meet the requirements of W3C standards. In a study conducted in 2011 on the 350 most popular web sites (selected by the Alexa index), 94 percent of websites fail the web standards markup and style sheet validation tests, or apply character encoding improperly. Even those syntactically correct documents may be inefficient due to an unnecessary use of repetition, or based upon rules that have been
deprecated for some years.
Current W3C recommendations on the use of CSS with HTML were first formalised by W3C in 1996 and have been revised and refined since then.
These guidelines emphasise the separation of content (HTML or XHTML) from style (CSS). This has the benefit of delivering the style information once for a whole site, not repeated in each page, let alone in each HTML element. WYSIWYG editor designers have been struggling ever since with how best to present these concepts to their users without confusing them by exposing the underlying reality. Modern WYSIWYG editors all succeed in this to some extent, but none of them has succeeded entirely.
However a web page was created or edited, WYSIWYG or by hand, in order to be successful among the greatest possible number of readers and viewers, as well as to maintain the 'worldwide' value of the Web itself, first and foremost it should consist of valid markup and code.
It should not be considered ready for the World Wide Web, until its HTML and CSS syntax have been successfully
validated using either the free W3C validator services
W3C HTML Validatoran
W3C CSS Validator or some other trustworthy alternatives.
Accessibility of web pages by those with physical, eyesight or other disabilities is not only a good idea considering the ubiquity and importance of the web in modern society, but is also mandated by law. In the U.S., the
Americans with Disabilities Act and in the UK, the
Disability Discrimination Act place requirement on web sites operated by publicly funded organizations. In many other countries similar laws either already exist or soon will.
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 WYSIWY
HTML editorand without.
See also
*
Comparison of HTML editors
*
List of HTML editors
*
Web template system
A web template system in web publishing allows web designers and developers to work with ''web templates'' to automatically generate custom web pages, such as the results from a search. This reuses static web page elements while defining dynami ...
*
Website builder
*
Visual editor
A visual editor is computer software for editing ASCII, text files using a text user interface, textual or graphical user interface, graphical user interface that normally renders the content (text) in accordance with embedded markup code, e.g., H ...
*
Validator
A validator is a computer program used to check the Validity (logic), validity or syntactical correctness of a fragment of code or document. The term is commonly used in the context of validating HTML,Tittel, Ed, and Mary C. Burmeister. HTML 4 f ...
References
{{DEFAULTSORT:Html Editor
Web design