14 éditeurs HTML gratuits pour web designers débutants ou confirmés

Publié le 24/01/2019 par Sonia Mokrani et Tirena Dingeldein

éditeurs HTML gratuits web designers débutants confirmés

À l’heure des start-up et des innovations technologiques, vous avez des millions de raisons de créer votre propre site web et des centaines d’outils à disposition pour le faire.

Que vous souhaitiez vendre votre produit, créer un espace d’échange pour des personnes partageant les mêmes intérêts ou tout simplement vous essayer au web design, un site Internet vous donne la possibilité de vous connecter à des millions de personnes.

Génie de la conception web ou débutant dans le domaine, vous avez probablement conscience de l’intérêt d’être familiarisé avec le HTML.

Ce langage est l’un des incontournables de la création de sites web et quelques connaissances de base en HTML ne devraient pas vous faire de tort. Vous aimeriez trouver un moyen de vous assurer que votre code est correct ou d’aller un peu plus loin dans l’écriture ?

Bonne nouvelle : c’est exactement ce que vous permet de faire un éditeur HTML. Vous trouverez dans cet article 14 outils de ce type qui vous aideront à booster votre maîtrise du HTML. À coup sûr, vous y trouverez un éditeur HTML gratuit qui vous convient !

Qu’est-ce qu’un éditeur HTML ?

Un éditeur HTML, ou éditeur web, est un outil autonome généralement intégré à un environnement de développement (IDE ou EDI) plus large. C’est une sorte de boîte à outils pour développeurs qui permet d’éditer, de compiler, d’interpréter ou encore de déboguer du code.

Vous pouvez écrire du code dans n’importe quel logiciel de traitement de texte, mais, en codant dans un éditeur HTML, vous pouvez suivre les modifications et vérifier que ce que vous avez écrit est correct.

Les éditeurs web les plus basiques proposent tous un système de correction de la syntaxe ou de vérification du code. Ils offrent également en général des options de vérification de la syntaxe qui fractionnent le code en lignes bien définies et mettent en évidence les éléments clés. Vous pouvez ainsi plus facilement lire ce que vous avez écrit. De plus, ils permettent souvent d’autocompléter les éléments HTML les plus courants, jouant les bouées de sauvetage pour les distraits qui ont tendance à oublier les crochets fermants.

Pourquoi utiliser un éditeur HTML ?

Les rédacteurs sont toujours heureux que la forme et le fond de leurs écrits soient revus par des correcteurs chargés d’assurer la qualité de leurs productions.

Un éditeur web remplit la même mission et apporte un peu de tranquillité d’esprit aux programmateurs. Même un codeur brillant est susceptible de faire une erreur d’inattention après avoir passé des heures devant son écran. Un éditeur HTML repère les éléments problématiques pour que vous n’ayez pas à passer vous-même en revue des centaines de lignes de code pour trouver le détail qui cloche.

De plus, même si nous ne nous intéressons ici qu’au HTML, de nombreux éditeurs prennent en charge d’autres langages comme CSS ou PHP, ce qui vous permet de vous essayer à d’autres techniques pour affiner vos compétences de web design.

Avant de partir à la recherche de l’éditeur web de vos rêves, sachez qu’il en existe deux types : les éditeurs de code standards, qui s’adressent à des développeurs plutôt expérimentés, et les éditeurs WYSIWYG, conseillés pour les débutants.

Éditeurs de code standard

Les éditeurs HTML de code standard affichent le code ligne par ligne, tel que vous l’écrivez.

éditeurs de code standard
Voici à quoi ressemblera votre code dans un éditeur classique (source de l’image : Stack Overflow)

 

Pour qui ? Les éditeurs de code sont recommandés pour les codeurs expérimentés qui veulent contrôler de près ce qu’ils écrivent ou qui craignent de gonfler leur code.

Éditeurs WYSIWYG

WYSIWYG est l’acronyme de “What You See Is What You Get” ou “tel écran, tel écrit”. Dans ce type d’outil, vous éditez votre page dans une interface qui affiche exactement ce qui apparaîtra en ligne. Vous travaillez donc en situation réelle et pas devant des lignes de code abstraites. La plupart de ces solutions sont très simples à utiliser puisqu’elles fonctionnent en glisser-déposer.

éditeurs WYSIWYG
Dans un éditeur WYSIWYG, vous voyez exactement ce qui sera publié en ligne (source de l’image : Elated)

 

Pour qui ? Les codeurs moins expérimentés et ceux qui prêtent particulièrement attention à l’apparence de leur page préféreront probablement utiliser un éditeur WYSIWYG.

Existe-t-il des éditeurs HTML gratuits ?

On pourrait passer des heures à discuter de logiciels d’aide à la programmation plus ou moins onéreux. Mais si vous commencez seulement à tâter du code ou si vous envisagez de vous lancer seul dans la création d’une activité de web design, vous n’avez probablement pas des milliers d’euros à investir dans ce type de solution.

Vous avez de la chance : nous avons déniché 14 éditeurs HTML gratuits et open source. Dans cet article, vous trouverez une brève description de leurs fonctionnalités. Les éditeurs de code standard sont présentés avant les éditeurs WYSIWYG et nous avons classé les options par ordre alphabétique.

Éditeurs de code standard gratuit

Souvenez-vous que les éditeurs de code standard exigent des connaissances assez poussées en HTML ou dans le langage dans lequel vous codez. Ils peuvent vous aider à corriger vos erreurs, mais ils n’écriront pas le code à votre place.

1. Aptana

aptana studio 3
Source de l’image : Aptana

Aptana Studio est un IDE open source personnalisable. Il permet d’éditer les codes écrits en HTML5, CSS, JavaScript, PHP, Ruby, Rails et Python. Il s’intègre à Git pour faciliter la gestion des versions et peut se déployer sur différents types de serveurs : FTP, SFTP, FTPS et protocoles Capistrano. Aptana Studio propose un assistant de déploiement ainsi qu’un débogueur intégré.

En savoir plus

2. Arachnophilia

arachnophilia
Source de l’image : Arachnophilia

Arachnophilia est un éditeur HTML gratuit et open source écrit en java par Paul Lutus (fervent opposant aux produits Microsoft). Il prend en charge l’Unicode et vous aide à éditer vos projets en PHP, Perl, C++, Java et JavaScript. Son client FTP intégré simplifie le déploiement. Sa dernière mise à jour remonte à septembre 2018.

En savoir plus

3. Bluefish

bluefish
Source de l’image : Bluefish

Bluefish est un éditeur de code open source qui fonctionne sous Linux, Mac OS X, FreeBSD, OpenBSD et Solaris. Il prend en charge les protocoles FTP, SFTP, HTTP, HTTPS, WebDAV et CIFS. Pour ceux qui gèrent des projets d’envergure, Bluefish peut ouvrir jusqu’à 500 documents simultanément et récupère automatiquement les changements apportés aux documents modifiés en cas de plantage système. Il permet d’éditer le HTML et plusieurs autres langages, dont C++, Google Go, Java, Perl, PHP, Python et R.

En savoir plus

4. CoffeeCup

coffeecup
Source de l’image : CoffeeCup

CoffeeCup propose un éditeur de code gratuit ainsi qu’un éditeur visuel (payant) pour ceux qui préfèrent travailler en WYSIWYG. Avec CoffeeCup, vous pouvez créer des fichiers HTML et CSS et éditer des fichiers web existants. Vous pouvez aussi mettre à jour votre contenu grâce à sa librairie d’éléments.

En savoir plus

5. Eclipse

eclipse
Source de l’image : Eclipse Web Tools Platform

Eclipse est un kit d’outils pour développeurs web qui comprend une série de plug-ins, dont un éditeur HTML gratuit. Il inclut aussi des plug-ins d’édition pour CSS, JSON et JavaScript. L’éditeur met en garde ceux qui veulent simplement éditer du code HTML : “Les nouveaux utilisateurs risquent de s’y perdre.” Les débutants devraient donc éviter ce logiciel dont la flexibilité devrait cependant séduire les programmeurs plus confirmés. Sa dernière mise à jour remonte à décembre 2018.

En savoir plus

6. Komodo IDE

komodo IDE
Source de l’image : ActiveState

Komodo, l’IDE d’ActiveState, est disponible en version gratuite allégée ou sous licence payante (plusieurs tarifs). L’éditeur HTML gratuit offre des fonctionnalités robustes comme l’autocomplétion et des outils de débogage. Il prend aussi en charge d’autres langages, dont Python, Perl et Node.js. Sa dernière mise à jour est de janvier 2019.

En savoir plus

7. Microsoft Visual Studio Community

microsoft visual studio community
Source de l’image : Microsoft

Si vous ne boycottez pas Microsoft comme le créateur d’Arachnophilia, Paul Lutus, la version gratuite de l’IDE de Visual Studio, Community, devrait vous intéresser. Elle est réservée à 5 utilisateurs maximum. Les versions payantes présentent plus de fonctionnalités, mais la solution gratuite inclut les outils essentiels pour l’édition HTML. Elle comprend en outre quelques outils de développement d’applications mobiles bien utiles comme une option multiplateforme permettant de coder à la fois pour Android et iOS.

En savoir plus

8. NetBeans

netbeans
Source de l’image : NetBeans

NetBeans est une IDE open source qui peut vous aider à développer en HTML5, en PHP, en JavaScript, en C++ et dans plusieurs autres langages. Elle contient des modèles et des générateurs de code ainsi que des outils de gestion intéressants pour les équipes et les projets plus importants. NetBeans propose un large choix de plug-ins et encourage les développeurs à créer et à partager les leurs. Sa dernière mise à jour remonte à décembre 2018.

En savoir plus

9. Notepad++

notepas++
Source de l’image : Wikimedia Commons

Réservé aux utilisateurs Windows, Notepad ++ est un éditeur web gratuit en C++. Son UI est entièrement personnalisable et les utilisateurs peuvent décider quels éléments syntaxiques sont surlignés et développés. Petit bonus pour les amoureux de l’écologie : Notepad++ s’engage à réduire les émissions de CO2 en créant des programmes moins gourmands en ressources processeur (CPU). Sa dernière mise à jour remonte à janvier 2019.

En savoir plus

10. NoteTab Light

NoteTab Light
Source de l’image : NoteTab

La description de produit de NoteTab est très claire : les amateurs de WYSIWYG feraient mieux de passer leur chemin. Mais si vous êtes expert et avez besoin d’un éditeur HTML gratuit, ce logiciel devrait faire votre bonheur. Selon l’éditeur, la méthode de surlignage minimal de la syntaxe facilite la lecture du code HTML ou CSS par rapport à d’autres solutions d’édition web. De plus, les raccourcis claviers personnalisables vous permettent d’introduire des bouts de code récurrents sans devoir les copier-coller systématiquement. NoteTab existe en version Light (gratuite), Standard et Pro. Envisagez de travailler avec une version payante si vous cherchez des fonctionnalités plus robustes.

En savoir plus

11. PSPad

PSPad
Source de l’image : PSPad

PSPad est un outil HTML gratuit uniquement disponible sur Windows. Certains des produits repris dans notre liste ne sont pas vraiment destinés à un usage commercial (en particulier ceux qui proposent des versions payantes), mais PSPad est gratuit même pour les entreprises et les institutions publiques. Le programme inclut des modèles d’écriture, un vérificateur de syntaxe et des options d’autocorrection. Sa dernière mise à jour remonte à avril 2018.

En savoir plus

Éditeurs WYSIWYG gratuits

La plupart des éditeurs présentés ci-dessous conviennent aux codeurs et aux designers débutants. Certains génèrent le code pour vous au fur et à mesure que vous glissez-déposez des éléments dans votre page. D’autres affichent uniquement le code associé à votre page, mais vous permettent de l’éditer comme bon vous semble. Les modifications apparaissent dans ce cas directement à l’écran pour que vous puissiez adapter votre design en temps réel.

12. BlueGriffon

BlueGriffon
Source de l’image : BlueGriffon

BlueGriffon propose deux versions payantes de son produit, mais son outil HTML gratuit suffit pour créer des pages web. C’est l’un des trois éditeurs WYSIWYG de notre liste et, selon son site web, il est officiellement recommandé par le gouvernement français. C’est en effet, il semblerait, l’outil de création de contenu pour le web utilisé dans l’administration française.

BlueGriffon propose un double affichage code source et WYSIWYG pour que vous puissiez garder un œil sur l’évolution du code tout en travaillant le côté esthétique de votre page. Il permet aussi d’éditer les fichiers CSS et SVG. La version payante du logiciel offre des fonctionnalités supplémentaires centrées sur le design comme l’éditeur en plein écran, une pipette pour la sélection des couleurs et un système de comptage des mots avec alertes.

En savoir plus

13. NetObjects Fusion Essentials

NetObjects fusion essentials
Source de l’image : NetObjects

NetObjects Fusion se présente comme “un générateur d’HTML plutôt qu’un éditeur web”. Grâce à sa fonctionnalité de création en glisser-déposer, vous modifiez vos pages et les voir telles qu’elles seront publiées en ligne. Sa version gratuite vous permet de créer des sites web en HTML 5 avec des galeries photo, des formulaires et une fonctionnalité e-commerce.

En savoir plus

14. SeaMonkey

SeaMonkey
Source de l’image : SeaMonkey

SeaMonkey est une suite d’applications open source tout-en-un pour Internet qui inclut des outils de développement de navigateur, d’e-mail, de chat et de site web (éditeur HTML compris). Si vous recherchez uniquement un éditeur HTML gratuit, tournez-vous plutôt vers l’un des autres outils de notre liste. Pour les développeurs en recherche d’une expérience Internet complète, en revanche, SeaMonkey vaut le détour. Le projet est propulsé par Mozilla et partage donc une bonne partie de son code source avec Firefox et Thunderbird. Sa dernière mise à jour remonte à juillet 2018.

En savoir plus

3, 2, 1, codez !

Vous avez maintenant un tas d’options. Il ne vous reste plus qu’à vous lancer et à en tester quelques-unes pour trouver l’outil HTML gratuit qui répondra à vos besoins. Et n’oubliez pas partager votre expérience en commentaires !

Et maintenant ? Consultez notre catalogue logiciels de création de sites web pour trouver l’outil qu’il vous faut.

Cet article peut faire référence à des produits, programmes ou services qui ne sont pas disponibles dans votre pays, ou qui peuvent être limités par les lois ou règlements de votre pays. Nous vous suggérons de consulter directement l'éditeur du logiciel pour obtenir des informations sur la disponibilité du produit et le respect des lois locales.