В помочь разработчикам Интернет-ресурсов

(из Горюнова М.А., Клименков А.Г. Создание образовательных ресурсов в сети Интернет, СПб, ЛОИРО, 2002г.) Написано давно, поэтому, что касается технологии, правильнот говорить о стилевом подходе, но вряд ли в школах именно так и будут поступать начинающие.

Об особенностях Интернет-ресурсов

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

С одной стороны, Интернет-ресурс - это ресурс глобальной компьютерной сети, следова-тельно, имеется возможность передавать представленную в цифровом формате информа-цию на большие расстояния посредством сетевого оборудования. К сожалению, скорость передачи информации имеет физические ограничения, что влечёт за собой ограничения на объём передаваемых файлов. Дизайнеры, создававшие мультимедийные обучающие программы на CD и DVD, впервые взявшиеся за создание сайтов, приходят в ужас от количества ограничений. Ведь если объем стандартного CD составляет от 600 до 750 Mb, что, например, позволяет записывать на него изображения размером больше 1 Mb, то объем одной картинки на странице сайта только в особых случаях может превышать 50 Kb.

Вместе с тем, развитая инфраструктура Интернет предоставляет такие возможности, как:

1. Охват широчайшей аудитории (не только российской, но и международной)
2. Оперативное обновление информации
3. Использование непосредственных ссылок на другие ресурсы Интернета.
4. Широкое распространение информации о существовании ресурса с помощью инфор-мационно-поисковых систем сети Интернет

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

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

Как начинать работу над Интернет-ресурсом

Начиная делать сайт, следует сразу же проектировать его структуру. Но, составлять структуру в отсутствии материалов, которые будут в ней размещаться - дело бессмысленное. Готовый материал обычно уже в должной мере структурирован. Если же при разработке структуры материала нет и предполагается дальнейшее наполнение, то вы можете столкнуться с ситуацией, когда некоторые разделы на вашем сайте будут состоять из одного-двух абзацев, а некоторые - из десятков, сотен страниц информации. Итак, сначала подготовьте базовый комплект материалов для сайта, а потом преобразуйте их в структуру.

Не повторяйте ошибку многих начинающих дизайнеров - не начинайте разработку сайта с создания первой страницы. Типичная ситуация, когда тщательно разрабатывается первая страница и она объявляется концепцией дизайна сайта. Бытует глубоко ошибочное мнение, что внутренние страницы делать легче. Это не так. Начните разработку дизайна с внутренних страниц. А потом уже преобразуйте стандартную внутреннюю страницу, внеся в нее необходимые изменения, в первую страницу сайта. Не рекомендуется создание малоинформативной первой страницы с центральным рисунком и парой кнопок - она не несет никакой смысловой нагрузки и в большинстве случаев только раздражает пользователя. Помните то, что мы обсуждали выше: Интернет-старница - не мультимедийная программа, требующая заставки, и не книжка, требующая обложки.

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

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

Структура веб-страницы

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

1. Если в этом нет насущной необходимости, сведите до необходимого минимума количество графики на странице. Скорее всего, вы создаете сайт, на который пользователь будет заходить за информацией, а не за сложной высокохудожественной графикой. Не все пользователи имеют выделенный доступ в Интернет. Необходимо всегда помнить о тех, кто выходит в сеть с помощью модема, и не заставлять его ждать загрузки вашей прекрасной графики в течение нескольких минут (да и не будет ли он дожидаться?).
2. Если меню можно сделать текстовым способом, не стоит рисовать красивые кнопочки, которые увеличивают общий размер страницы.
3. Самую важную информацию следует располагать в верхнем левом углу экрана, туда в первую очередь устремится взгляд посетителя. По той же причине, располагайте меню у левого края страницы. При этом старайтесь, чтобы все пункты меню поместились на один экран и не требовали прокрутки. Как можно ближе к левому верхнему углу неплохо расположить ссылку на главную стра-ницу сайта и на верхний уровень иерархии по отношению к текущей странице.
4. При формировании страницы не старайтесь заполнить ее полностью, не бойтесь пустот, они будут приятнее глазу, чем пёстрая графика, полностью заполнившая всю страницу.
5. Имеет смысл указать внизу каждой страницы адрес электронной почты, а не выносить ее на отдельную страницу “контакты”. Тогда человеку, который сохранил любую страницу вашего сайта, не составит труда связаться с Вами.

Особенности написания гипертекста для Интернета

Тексты, написанные для Интернета, имеют ряд особенностей, продиктованных специфичностью работы с ними. Статья, написанная для включения в журнал, не подходит для выкладывания на сайт и требует дополнительной обработки. Читать тексты с экрана компьютера сложнее, чем с листа, кроме того, всегда нужно помнить о том, что мы пишем не просто текст, а гипертекст, что также накладывает свои требования.

Для того, чтобы правильно писать тексты для Интернета, необходимо знать психологию их читателя, его мотивации и привычки. Их изучением занимается сравнительно новое исследовательское направление, которое называется юзабилити (Usability). Один из самых известных ученых, проводящих исследования в этой области - Якоб Нильсон (http://www.useit.com). По результатам многочисленных опытов и опросов он вырабатывает рекомендации по правильному структурированию информации, предназначенной для сети Интернет. Мы тоже опираемся на его авторитетные рекомендации.

Необходимо помнить, что пользователь, находясь в Интернете, не читает страницы подряд - вместо этого он лишь просматривает их, пытаясь обнаружить искомую информацию в нескольких предложениях или даже частях предложений. Просмотр текста страницы вместо чтения - норма поведения пользователей. Девиз пользователя: "Если информация не попадается на глаза сразу, значит ее нужно искать в другом источнике". Это нужно учитывать при написании любых информационных материалов, которые предназначены для чтения с экрана.

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

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

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

1. тщательная сгруппированность информации;
2. использование слов и понятий, знакомых и понятных читателю;
3. правильное написание первых фраз абзацев;
4. отведение каждой идее отдельного абзаца текста;
5. правильное определение оптимального объема текста.

В структуре текста пользователям нравятся всевозможные оглавления и стиль "перевернутой пирамиды", когда каждый новый уровень заголовков начинается чуть сдвинутым вправо относительно родительского уровня. Помните, что юмор и игровой стиль делают сайт более привлекательным. Предпочтение пользователей отдается простому и неформальному стилю письма. Естественно, это не относится к научным и справочным материалам, но любой автор учебника знает, что чем легче и веселее написан текст, тем популярнее будет этот учебник. Пишущий должен формировать доверие к тексту сайта. Как можно чаще ссылайтесь на источники информации. Внешние ссылки также повышают доверие читателей к содержимому сайта. Быстро сориентироваться среди разделов сайта помогает "карта сайта", которая по сути представляет собой древообразную структуру. На больших сайтах, состоящих из нескольких десятков страниц, имеет смысл даже разместить поисковую систему. Графические элементы, не относящиеся к навигации сайта, используйте только тогда, когда они дополняют текст. Не увлекайтесь всевозможными виньетками и украшательствами - они бывают болтше уместны в томике стихов, чем на Интернет-странице. Не увлекайтесь пиктограммами. Они либо должны быть интуитивно понятными - тогда они помогут пользователю в работе с сайтом, либо должны сопровождаться текстовыми подписями. Если пользователю с первого взгляда не понятно, что означает какая-либо пиктограмма, то лучше отказаться от нее вовсе. Грамотное использование гиперссылок - своего рода искусство. Не ставьте пользователя в положение буриданова осла - что делать: идти по ссылке или читать дальше. Многие авторы любят превращать в ссылку целое предложение или даже абзац. Это грубейшее непонимание самого смысла гипертекста. Максимальный кусок текста, который может стать гиперссылкой - словосочетание. Причем примерное содержание того, что пользователь увидит, нажав на ссылку, должно быть очевидно для него уже по тексту ссылки. Продумайте маршруты перемещения пользователя по сайту. Избегайте сложных и запутанных конструкций с перекрестными ссылками. Нильсоном было выработано «правило двух ссылок». Оно гласит: “В пределах сайта кратчайшее расстояние между двумя узлами гипертекста не должно превышать двух переходов”. Старайтесь его соблюдать. Для этого очень полезно будет начертить для себя древо ссылок. Ожидание загрузки чего-либо крайне нежелательно. Если на сайте есть большие элементы (графика, анимация и т.п.) - дайте пользователю возможность выбрать, загружать их или не загружать. Будьте уверенны - 99 из 100 пользователей не станет ждать загрузки одной страницы больше 30 секунд. Они просто покинут ваш сайт, причем, навсегда. Одна страница, размер которой вместе с графикой превышает 50 Kb, уже считается большой.

Особенности веб-графики

В современном Интернете есть три основных формата, в которых хранится подавляющее большинство графических изображений: GIF, JPEG и PNG. GIF (Graphics Interchange Format) - разработан в 1987 году для быстрого обмена графическими изображениями в сети CompuServe. Он содержит в своей структуре алгоритм упаковки данных, почти не уступающий по эффективности программам-архиваторам. Это снискало ему большую популярность. По степени сжатия он уступает формату JPEG (от названия организации Joint Photographic Experts Group). Но если JPEG достигает большого уровня сжатия за счет потерь качества изображения, то GIF сохраняет всю информацию без потерь.

Формат JPEG основан на ограниченности человеческого зрения и на сегодняшний день является одним из самых эффективных алгоритмов сжатия графической информации. К тому же, в отличие от формата GIF, он позволяет хранить изображения в true color, а GIF довольствуется 256-цветовой палитрой. Однако, нужно помнить, что при повторном сохранении изображения в формате JPEG он повторно запускает алгоритм сжатия, что, естественно, ухудшает качество. Поэтому всегда помните, что сохранять изображение в формате JPEG нужно только после его окончательной обработки.

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

У формата GIF есть несколько дополнительных возможностей. Во-первых, он позволяет задавать количество цветов или размер палитры, используемой в изображении. Удаление из палитры ненужных цветов - очень эффективный способ снижения размера файла. Во-вторых, GIF позволяет вводить в изображение прозрачность (формат “GIF89a”). Эта возможность в полной мере была реализована с широким развитием Интернета и программ-броузеров. Один из цветов при создании рисунка объявляется прозрачным и при выводе изображения на экран вместо него выводится то, что расположено под картинкой (например, фон страницы). По сути, эта возможность позволяет создавать изображения произвольной (а не только прямоугольной) формы.

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

Оба формата поддерживаются по умолчанию всеми броузерами и могут быть обработаны любым мало-мальски серьезным графическим редактором.

Наконец, формат PNG (Portable Net-work Graphics). У него есть много своих «плюсов». Например, PNG поддерживает три типа изображений: цветное с глубиной 24 бита, 256 оттенков серого и цветное с глубиной 8 бит. Как и в GIF, 256 цветов изображения с глубиной 8 бит могут быть взяты из палитры, где их 16 млн. Но, поскольку в PNG нет четкого деления между этими типами, то в графический файл формата PNG записывается описание всей палитры, что позволяет гибко подстраиваться под реальное число цветов в изображении. К тому же, в PNG усовершенствован принцип альфа-канала, и по сравнению с GIF в нем уже не 2, а 254 уровня, что позволяет строить сложные многослойные изображения. Как и GIF, PNG поддерживает чересстрочную развертку.

Аспекты графического оформления веб-страниц

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

1. Никогда не пишите светлыми буквами по светлому фону и темными буквами по темно-му фону. Никакие изыски дизайна не стоят того, что ваши посетители не смогу прочитать текст вашей страницы, который написан голубыми буквами по желтому фону. Выбирайте цветовые схемы, которые не раздражают глаз и способствуют удобному и быстрому чтению. Подбирайте сочетаемые друг с другом цвета. Если вы сомневаетесь в собственных силах, воспользуйтесь готовыми цветовыми схемами, предлагаемыми большинством ре-дакторов.
2. Не перегружайте дизайн большим количеством цветов. Наличие на вашей странице всех цветов радуги еще не сделает ее красивой. Выберите одну гамму, включающую от-тенки 2-3 цветов и придерживайтесь ее при оформлении всех графических и текстовых элементов.
3. Если вы затрудняетесь с выбором цветовой гаммы оформления, используйте универсальный набор "Белый – Черный – Красный". Эти цвета сочетаются друг с другом при любых композиционных условиях.
4. Старайтесь не вставлять на страницу графический фон. В большинстве случаев он лишь затруднит чтение текста. Если без фона обойтись нельзя, то самый мелкий графический элемент изображения фона должен во много раз превышать размер одной буквы текста. Фон должен иметь низкую контрастность и плавные переходы между цветами.
5. Если вы все же используете фоновое изображение, поставьте такой фоновый цвет стра-ницы, чтобы он примерно совпадал по тону и контрасту с фоновым рисунком.
6. Используйте только цвета из так называемого набора web-цветов (безопасной палитры). Только тогда вы можете быть полностью уверенными, что цветовая гамма вашей страницы верно отобразится во всех броузерах и на всех мониторах. Этого можно достичь используя два одинаковых числа в записи каждого из трех цветовых каналов (например, цвет #CC6701 не будет верно отображаться в некоторых версиях броузеров, и будет авто-матически приводиться к цвету #CC6600, который, в свою очередь, понимается любой программой одинаково). В последних версиях редактора Adobe Photoshop при выборе цвета есть возможность включить автоматическое отображение только web-цветов на цветовом поле.
7. Помните о том, что белый цвет фона стоит по умолчанию далеко не во всех броузерах. Если вы используете в дизайне страницы белый фон, не забывайте каждый раз прописывать его в коде страницы.
8. Не используйте больше двух шрифтов в оформлении страницы. Старайтесь, чтобы стиль шрифта соответствовал стилю и смыслу страницы.
9. Не прописывайте название конкретного шрифта в коде HTML. Совсем не обязательно, что у пользователя будет на компьютере тот шрифт, который вы насильно навязали ему, например, в файле стиля. Нередка ситуация, когда текст страницы становится полностью нечитаемым только из-за того, что ее автор стремился навязать пользователю свое шрифтовое оформление.
10. У всех изображений всегда прописывайте атрибуты "ширина" и "высота". Во-первых, это не позволит расползтись структуре страницы во время загрузки, а во-вторых позволит сохранить структуру даже в том случае, когда у пользователя отключена графика.
11. Не увлекайтесь всякими графическими эффектами (java-апплетами, фильтрами, анимацией), если они не несут существенной смысловой нагрузки. Они мешают воспринимать текст страницы и замедляют ее загрузку. Кроме того, они в большинстве своём рассчитаны на один определенный броузер и не будут работать в других.
12. Не увлекайтесь графическими элементами с текстовой информацией. Это оправдано в немногих случаях, например, когда нужно отразить информацию, написанную русскими буквами, в рамках англоязычной версии, например, заголовок вашего сайта. Обычно у иностранных партнёров на компьютере не установлена кириллица, и этот текст будет представлен в виде бессмысленных знаков. В этой ситуации – единственное спасение, «зацементировать» русский текст в графике.

Работа над Интернет-ресурсом

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

Один из лучших WYSIWYG-редакторов для работы над сайтом – DreamWeaver, продукт компании Macromedia. При создании страницы в DreamWeaver вы можете иметь полный контроль над HTML-кодом, поскольку он позволяет редактировать документ сразу в двух режимах – визуальном и в кодах. У этого редактора много достоинств, в том числе, в рамках текущего сеанса работы можно отменить (“Undo”) даже те «шаги», которые были сделаны до сохранения файла. До настоящего времени существовала возможность скачать 30-ти дневную версию программы на законных основаниях на сайте фирмы Macromedia. Но все может измениться :)

Необходимы программы для работы с графикой. Для растровой графики чаще всего используется Adobe Photoshop, а для векторной - Corel Xara. Мощный инструмент для оптимизации web-ориентированной графики – Ulead Smart Saver Pro.

Помните, что нужно очень аккуратно относиться к именам файлов и каталогов. Подавляющее большинство серверов, составляющих Интернет, работает под управлением ОС Unix, FreeBSD и т.д., но никак не Windows (из-за ее крайне низкой надежности). В Windows регистр букв в названиях файлов и каталогов не имеет значения, т.е. Index.HTML и INDEX.html - это один и тот же файл, чего нельзя сказать о наименованиях файлов в ОС Unix. Поэтому, возьмите за правило всегда использовать в именах файлов, каталогов и расширениях маленькие буквы - так вы никогда не ошибетесь. Кстати, это еще один минус большинства визуальных HTML-редакторов, работающих под Windows. Они очень свободно обращаются с именами файлов и ссылками на них. Настойчиво рекомендуем - не пытайтесь использовать русские буквы в названиях ваших файлов.

Основные ошибки при структурировании Интернет-ресурса

Обратимся к рекомендациям Якоба Нильсона относительно структуры сайта и его дизайна. Нильсон очень удачно выделил основные ошибки и “подводные камни”, на которые наталкиваются многие дизайнеры.

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

• Многие любят увлекаться использованием новейших технологий. Это одна из серьезнейших проблем современного Интернета. Любой пользователь, столкнувшись с при-митивной ошибкой JavaScript, немедленно покинет ваш сайт. Прежде чем использовать новые технологии (анимацию, виртуальный мир и т.п.), подумайте, насколько они необ-ходимы на вашей станице. Простая погоня за модой и нововведениями не имеет смысла.

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

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

• Старайтесь не терять пользователей при неправильном наборе ими адресов. Изме-ните страницу, выдающуюся по ошибке (если вы имеете возможность ее менять), включив в нее ссылки на основные страницы сайта. Большинство пользователей знает, что в случае отсутствия страницы на сайте, нужно просто отсечь конец адреса. Но такой способ неизвестен новичкам и раздражает опытных пользователей. Кстати, в связи с этим, проследите, чтобы любой каталог на вашем сайте имел файл index.html.

• По проведенным Нильсоном исследованиям, 90% пользователей не прокручивают навигационный блок, который вылезает за пределы экрана, а выбирают несколько видимых на экране пунктов. Сделайте соответствующие выводы.

• Делайте навигацию на сайте простой и интуитивно понятной. Люди привыкли к определенным канонам в дизайне. Если базовые элементы (например, наличие на любой странице сайта ссылки на главную страницу) отсутствуют, пользователь может даже растеряться.

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

• При написании ссылок, не открывайте страницу в новом окне броузера. Появление новых окон броузера - это самое раздражающее любого пользователя действие. "Когда на экране появляется новые окна, которые я не просил открывать, мне сразу приходит в голову продавец пылесосов, который, войдя в дом, вываливает на ковер пепельницу, а потом успешно убирает мусор..." (Якоб Нильсен). Многие пользователи автоматически закрывают любое выпадающее окно еще до того, как оно загрузится.

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

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

• Надпись “Under Construction” - один из признаков того, как вы относитесь к своему сайту. Пользователь не должен увидеть этой надписи никогда. Вместо того, чтобы выкладывать пустые страницы с этой надписью, оставьте их на своем винчестере.

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

И последнее по счету, но не по значимости замечание. Грамотно делать сайт на основе CSS, разделяя дизайн и смысловое содержание. Но это уже серьезный профессиональный подход, о котором надо говорить отдельно. Но знать это - не помешает.