Get rid of your dirty markup with the free online HTML Cleaner. It’s very easy to compose, edit, format and minify the web code with this online tool. Convert Word docs to tidy HTML and any other visual documents like Excel, PDF, Google Docs etc. It’s extremely simple and efficient to work with the two attached visual and source editor which respond instantly to your actions.

HTML Cleaner is equipped with many useful features to make HTML cleaning and editing as easy as possible. Just paste your code in the text area, set up the cleaning preferences and press the Clean HTML button. It can handle any document created with Microsoft Excel, PowerPoint, Google docs or any other composer. It helps you easily get rid of all inline styles and unnecessary codes which are added by Microsoft Word or other WYSIWYG editors. This HTML editor tool is useful when you’re migrating the content from one website to the other and you want to clean up all alien classes and IDs the source site applies. Use the find and replace tool for your custom commands. The gibberish text generator lets you easily add dummy text to the editor.

On the top of the page you can see the visual editor and the source code editor next to each other. Whichever you modify the changes will be reflected on the other in real time. The visual HTML editor allows beginners to easily compose their content just like when using any other word processor program, while on the right the source editor with highlighted code markup helps the advanced users to adjust the code. This makes this online program a nice tool to learn HTML coding.

Convert Word Documents To Clean HTML

To publish online PDFs, Microsoft Word, Excel, PowerPoint or any other documents composed with different word editor programs or just to copy the content copied from another website, paste the formatted content in the visual editor. The HTML source of the document will be immediately visible in the source editor as well. The control bar above the WYSIWYG editor controls this field while all other source cleaning settings are for editing the source code. Click the Clean HTML button after setting up the cleaning preferences. Copy the cleaned code and publish it on your website.

There’s no guarantee that the program corrects all errors in your code exactly the way you want so please try to enter a syntactically valid HTML.

Convert the HTML tables to structured div elements activating the corresponding checkbox.

Очистка HTML кода от тегов Microsoft Word (2000-2007)?

In the past web designers used to build their websites using tables to organize page layout, but in the era of responsive web design tables are outdated and DIV’s are taking their place. This online tool helps you turn your tables to structured div elements with a few simple clicks.

You can make your source code more readable by organizing the tabs hierarchy in a tree view.

Become A Member

This website is a fully functional tool to clean and compose HTML code but you have the possibility to purchase a HTML G membership and access even more professional features. Using the free version of the HTML Cleaner you consent to include links in the edited documents. This cleanup tool might add a promotional third party link to the end of the cleaned documents and you need to leave this code unchanged as long as you use the free version.

Приветствую друзья, из данной статьи вы узнаете - как очистить HTML код, как оптимизировать картинки, как правильно оформить и оптимизировать метатеги, как сделать сайт быстрее, узнаете для чего нужно оптимизировать скрипты находящиеся на сайте.

Одним из важных мероприятий по внутренней оптимизации сайта является оптимизация кода страниц . За счет этого можно улучшить общее качество ресурса, увеличить скорость загрузки страниц, повысить эффективность работы интерактивных функций.

Валидация и стандартизация HTML

Принципиально важно для поискового продвижения и обеспечения положительного пользовательского опыта, чтобы сайт мог одинаково хорошо работать в любых браузерах, на разных операционных системах, в мобильных и стационарных компьютерах.

Для достижения общей унификации все сайты разрабатываются на основе стандартных версий HTML. Наиболее актуальными сегодня являются версии HTML 4.1 и HTML5. Последняя хотя все еще и находится в стадии разработки, в сети уже опубликовано огромное количество таких сайтов.

Все самые популярные браузеры – Opera, Google Chrome, Mozilla Firefox в своих последних версиях используют поддержку нового гиперязыка HTML5. Важность использования HTML5 для создания сайтов еще и в том, что мобильные компьютеры на базе операционной системы Android не поддерживают технологию Flash и пользователи не смогут просматривать видео в формате SWF.

Сайты на основе HTML5 способны воспроизводить видео без необходимости загрузки и установки Adobe Flash Player. Тенденция к отказу от флеш расширяется, поэтому для нормальной работы сайтов полезно постепенно отказываться от использования флеш-видео и анимированных баннеров этого формата.

Проверить валидность HTML-кода сайта можно бесплатно на официальном сайте Консорциума Всемирной Паутины, вот например этот

validator.w3.org

Встроенные валидаторы имеются в хороших конструкторах сайтов и системах управления контентом.

Очистка HTML-кода

В процессе создания и последующего редактирования веб-страниц программист второпях оставляет на страницах технические заметки, комментарии, забывает удалять лишние теги. Все это не только замедляет работу сайта, но и снижает функциональные возможности. За счет простого удаления HTML-мусора можно ускорить загрузку страниц сайта буквально на 35%.

К вредоносному мусору относятся также битые, неработающие ссылки, которые никуда не ведут, потому что реципиент был удален. Такие ссылки очень не нравятся поисковым системам. Наличие битых ссылок может негативно отражаться на поисковом провождении ресурса.

Поскольку битые ссылки имеют свойство время от времени возникать сами собой, необходимо регулярно проводить их поиск и удаление. Это относится как к внешним, так и внутренним ссылкам. Если система управления контентом не имеет опции поиска битых ссылок – можно воспользоваться бесплатными онлайн-сервисами.

http://creatingonline.com/site_promotion/broken_link_checker.htm

http://anybrowser.com/linkchecker.html

Оптимизация графического контента

Важно уделять внимание оптимизации графики, поскольку для публикации на страницах сайта все изображения должны быть соответствующим образом обработаны.

• Для публикации фотографий целесообразно использовать формат JPEG, поскольку этот тип файлов обеспечивает лучшее качество при минимальном весе.

• Для сохранения картинок, для которых качество не очень важно, можно выбрать формат PNG при весе файлов не более 100 или 200 КБ.

• Все графические файлы нужно, по современным стандартам, сохранять в сжатом виде и в отдельной директории на сервере, но не внедрять в веб-страницы.

После редактирования страницы, содержащей изображения, необходимо проверить скорость загрузки. Страница должна появиться в браузере не более чем в течение пяти секунд. Иначе показать отказов резко возрастает.

Все картинки и фотографии имеют метатеги, которые необходимо оптимизировать добавлением ключевых слов и этим улучшить их поиск в интернете. Основное требование к оптимизация метатегов изображений – уникальность. У всех картинок должны разные названия, всплывающие подсказки и альтернативные тексты.

Метатеги веб-страницы

Метатеги для разных страниц сайта должны быть в обязательном порядке уникальными. При обнаружении дублированных тегов поисковая система их склеивает и часть страниц таким образом не будет проиндексирована. Эксперименты показали, что уникализация метатегов сайта улучшает ранжирование и повышает посещаемость примерно на 18%.

Особое внимание следует уделить оптимизации тегов Title и Description

Заголовок страницы должен состоять не более чем из разрешенного поисковой системой количества символов и содержать главное ключевое слово.

Оптимальное количество слов для заголовка – шесть.

Описание страницы оформляется как своего рода продающий текст для посадочной страницы и обычно составляется из двух коротких предложений. В первом предложении содержится главное ключевое слово, а во втором – дополнительное.

Метатеги Keywords не очень важны, но должны быть на всякий случай.

Я у себя например вообще удалил из самого движка часть кода который отвечает за метатеги.

Оптимизация программных элементов – скриптов

Принципы оптимизации скриптов такие же, ка для графики – на странице не размещать, сохранять в сжатом виде в особой директории.

Ваша страница должна быть чистой, робот заходящий на ваш сайт должен видеть только чистую страницу, на которой будет только статья, ну и необходимые метатеги. Поэтому нужно все скрипты, счетчики и т.д. поместить в отдельный файл.

Оптимизация текстового контента

С задачей очистки html от лишних тегов сталкиваются абсолютно все.

Первое, что приходит на ум, это использовать php-функцию strip_tags():
string strip_tags (string str [, string allowable_tags])

Функция возвращает строку, очищенную от тегов. В качестве аргумента allowable_tags передаются теги, которые не надо удалять . Функция работает, но, мягко говоря, неидеально. По ходу, там нет проверки на валидность кода, что может повлечь за собой удаление текста, не входящего в тэги.
Инициативные разработчики сложа руки не сидели — в сети можно найти доработанные функции. Хорошим примером является strip_tags_smart .

Применять или не применять готовые решения — личный выбор программиста. Так сложилось, что мне чаще всего не требуется "универсального" обработчика и бывает удобнее почистить код регулярками.

От чего зависит выбор того или иного способа обработки?

1. От исходного материала и сложности его анализа.
Если вам нужно обрабатывать достаточно простые htmp-тексты, без какой-либо навороченной верстки, ясные, как день:), то можно использовать стандартные функции.
Если в текстах есть определенные особенности, которые надо учесть, то тут-то и пишутся специальные обработчики. В одних может использоваться просто str_replace . Например:

$s = array("’" => "’", // Right-apostrophe (eg in I"m)
"“" => "“", // Opening speech mark
"–" => "—", // Long dash
"â€" => "”", // Closing speech mark
"Ã " => "é", // e acute accent
chr(226) . chr(128) . chr(153) => "’", // Right-apostrophe again
chr(226) . chr(128) . chr(147) => "—", // Long dash again
chr(226) . chr(128) . chr(156) => "“", // Opening speech mark
chr(226) . chr(128) . chr(148) => "—", // M dash again
chr(226) . chr(128) => "”", // Right speech mark
chr(195) . chr(169) => "é", // e acute again
);

foreach ($s as $needle => $replace)
{
$htmlText = str_replace($needle, $replace, $htmlText);
}

Другие могут быть основаны на регулярных выражениях . Как пример:

Function getTextFromHTML($htmlText)
{
$search = array (""]*?>.*?"si", // Remove javaScript
""]*?>.*?"si", // Remove styles
""]*?>.*?"si", // Remove xml tags
"""si", // Remove HTML-tags
""([\r\n])[\s] "", // Remove spaces
""&(quot|#34);"i", // Replace HTML special chars
""&(amp|#38);"i",
""&(lt|#60);"i",
""&(gt|#62);"i",
""&(nbsp|#160);"i",
""&(iexcl|#161);"i",
""&(cent|#162);"i",
""&(pound|#163);"i",
""&(copy|#169);"i",
""(\d);"e"); // write as php

$replace = array ("",
"",
"",
"",
"\\1",
"\"",
"&",
"",
" ",
chr(161),
chr(162),
chr(163),
chr(169),
"chr(\\1)");

Return preg_replace($search, $replace, $htmlText);
}
(В такие минуты как никогда радует возможность preg_replace работать с массивами в качестве параметров). Массив вы при необходимости дополняете своими регулярками. Помочь в их составлении вам может, например, этот конструктор регулярных выражений . Начинающим разработчикам может быть полезной статья "All about HTML tags. 9 Regular Expressions to strip HTML tags" . Посмотрите там примеры, проанализируйте логику.

2. От объемов.
Объемы напрямую связаны со сложностью анализа (из предыдущего пункта). Большое количество текстов увеличивает вероятность, что, пытаясь предусмотреть и почистить все регулярками, вы можете что-нибудь да упустить. В этом случае подойдет метод "многоступенчатой" очистки. То есть очистить сначала, допустим, функцией strip_tags_smart (исходники на всякий случай не удаляем). Потом выборочно просматриваем некоторое количество текстов на выявление "аномалий". Ну и "зачищаем" аномалии регулярками.

3. От того, что надо получить в результате.
Алгоритм обработки может быть упрощен разными способами в зависимости от ситуации. Случай, описанный мной в , хорошо это демонстрирует. Напомню, текст там находился в div-е, в котором кроме него был еще div с "хлебными крошками", реклама адсенс, список похожих статей. При анализе выборки статей обнаружилось, что статьи не содержат рисунков и просто разбиты на абзацы с помощью . Чтобы не чистить "главный" див от посторонних вещей, можно найти все абзацы (с Simple HTML DOM Parser это очень просто) и соединить их содержимое. Так что прежде чем составлять регулярки для чистки, посмотрите, нельзя ли обойтись малой кровью.

Вообще, между сторонниками парсинга html-кода, основанного чисто на регулярных выражениях, и парсинга, в основе которого лежит анализ DOM-структуры документа, в сети разгораются настоящие холивары. Вот, например, на оверфлоу. Невинный с первого взгляда