HTML editor: Difference between revisions

Revision as of 10:03, 30 January 2024

Latest revision as of 22:25, 13 August 2025

(20 intermediate revisions by 15 users not shown)

Line 1:

{{Short description|Software for editing HTML}}{{Use dmy dates|date=December 2021}}{{Multiple issues|

{{Original research|date=April 2024}}

{{More footnotes needed|date=April 2024}}

{{more citations needed|date=August 2019}}

}}{{HTML}}

{{Use dmy dates|date=December 2021}}

AAn '''HTML editor''' is a [[Computer program|program]] used for editing [[HTML]], the [[Markup language|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 [[Cascading Style Sheets|CSS]], [[XML]] and [[JavaScript]] , or [[ECMAScript]]. In some cases, they also manage communication with remote web servers via [[File Transfer Protocol|FTP]] and [[WebDAV]], and [[version control systems]] such as [[Subversion (software)|Subversion]] or [[Git (software)|Git]]. Many [[word processing]], [[graphic design]], and [[page layout]] programs that are not dedicated to [[web design]], such as [[Microsoft Word]] or [[Quark XPress]], also have the ability to function as HTML editors.

{{Html series}}

A '''HTML editor''' is a [[Computer program|program]] used for editing [[HTML]], the [[Markup language|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 [[Cascading Style Sheets|CSS]], [[XML]] and [[JavaScript]] or [[ECMAScript]]. In some cases they also manage communication with remote web servers via [[File Transfer Protocol|FTP]] and [[WebDAV]], and [[version control systems]] such as [[Subversion (software)|Subversion]] or [[Git (software)|Git]]. Many [[word processing]], [[graphic design]] and [[page layout]] programs that are not dedicated to [[web design]], such as [[Microsoft Word]] or [[Quark XPress]], also have the ability to function as HTML editors.

==Types of editors==

There are two main varieties of HTML editors: text and [[WYSIWYG]] (what you see is what you get) editors.

===Text editors===

[[Text editors]] intended for use with HTML usually provide at least [[syntax highlighting]]. Some editors additionally feature [[template (file format)|templates]], [[toolbar]]s and [[keyboard shortcut]]s to quickly insert common [[HTML element]]s and structures. [[Wizard (software)|Wizards]], [[tooltip]] prompts and [[Autocomplete|autocompletion]] may help with common tasks.

==Types ofText editors ==

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 [[Validator|validation]], [[HTML Tidy|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 [[web app|online tools]], requiring a network connection.

[[Text editors]] intended for use with HTML usually provide at least [[syntax highlighting]]. Some editors additionally feature [[template (file format)|templates]], [[toolbar]]s , and [[keyboard shortcut]]s to quickly insert common [[HTML element]]s and structures. [[Wizard (software)|Wizards]], [[tooltip]] prompts, and [[Autocomplete|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 [[Validator|validation]], [[HTML Tidy|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 [[web app|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.

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 [[graphic organizer|visually organized]] modes than simple color highlighting, but in modes not considered WYSIWYG. These editors typically include the option of using [[palette window]]s or [[dialog box]]es to edit the text-based parameters of selected [[Object (computer science)|objects]]. These palettes allow editing parameters in individual fields, or inserting new tags by filling out an onscreen form, and may include additional [[widget (computing)|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= ==

{{unreferenced section|date=September 2016}}

[[Image:W3c amaya 10 fullmode enwiki xfce4therapy.png|thumb|250px|[[Amaya (web browser)|Amaya]] 10 HTML editor]]

WYSIWYG HTML editors provide an editing interface whichthat 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 [[Browser engine|layout engine]]. This may be custom-written or based uponon one used in a web browser. The goal is that, at all times during editing, the [[rendering (computer graphics)|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 [[Computing platform|platforms]] and computers for several reasons:

;Different browsers and applications will render the same markup differently.

:The same page may display slightly differently, byfor example, in [[Google Chrome|Chrome]], [[Safari (web browser)|Safari]], [[Microsoft Edge|Edge]], [[Internet Explorer]] and [[Firefox]] on a high-resolution screen, but it will look very different in the perfectly valid text-only [[Lynx (browser)|Lynx]] browser. It needs to be rendered differently again on a [[Personal digital assistant|PDA]], an [[Digital television|internet-enabled television]] , and on a [[mobile phone]]. Usability in a [[Voice browser|speech]] or [[braille]] browser, or via a [[Screen reader|screen-reader]] working with a conventional browser, will place demands on entirely different{{clarify|date=October 2020}} aspects of the underlying HTML. All an author can do is suggest an appearance.

;Web browsers, like all computer software, have [[computer bug|bugs]].

:They may not conform to current [[Web standards|standards]]. 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]] 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.<ref>{{cite web |last=PSD to HTML |first=Ninja |dateurl=http://www.w3.org/People/Bos/DesignGuide/designguide.html |title=PSDAn toessay HTMLon Conversion: How to Choose anW3C's Outsourcingdesign Companyprinciples |urlpublisher=https://www.psdtohtmlninja.com/blog/how-to-choose-perfect-psd-to-html-outsourcing-companyW3C |archiveaccess-urldate=https://www.psdtohtmlninja.com/blog/how2013-to10-choose-perfect-psd-to-html-outsourcing-company23 |access-date= 6 Mar 2003 |websitefirst=PSDtoHTMLNinjaBert |publisherlast=Bos}}</ref> 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,<ref>{{cite web|url=http://www.w3.org/Style/CSS/#browsers |title=Cascading Style Sheets |publisher=W3C |access-date=2013-10-23}}</ref> even if many WYSIWYG and other editors have not yet entirely caught up.<ref>{{cite web|url=http://www.w3.org/Style/CSS/#editors |title=Cascading Style Sheets |publisher=W3C |access-date=2013-10-23}}</ref>

;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, or 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 web siteswebsites are rarely constructed in a way that makes WYSIWYG useful

:Modern web siteswebsites typically use a [[content management system]] 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==

Line 65:

* [[Visual editor]]

* [[Validator]]

* [https://www.psdtohtmlninja.com/psd-conversion-services/psd-to-html PSD to HTML Conversion]

==References==