Wordpress и веб-разработка

Не только для разработчиков: 7 HTML-тегов, которые должен знать каждый писатель

Не только для разработчиков: 7 HTML-тегов, которые должен знать каждый писатель

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

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

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

HTML не только для гиков

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

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

Заголовки — кому они нужны?

На протяжении многих лет этикет для таких вещей, как теги заголовков (<h1>, <h2> и т. Д.) Изменялся. Несмотря на то, что давний совет SEO по переходу заголовков от больших к маленьким по всей статье верен, среди издателей постоянно возникают споры о том, лучше ли использовать одинаковый размер заголовка везде, являются ли такие вещи, как жирный текст, допустимым подзаголовком, и всякие другие придирчивые детали. Забудь обо всем этом.

Все, что вам нужно помнить, — это то, что исследования ясно показывают, что глазной круг читателей в Интернете показывает четкую F-образную фигуру, которую вы должны использовать, когда пишете.

Eyetracking

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

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

Цитировать или не цитировать

На мой взгляд, лучший из изобретенных тегов — это тег <blockquote>. Причина, по которой я люблю это, заключается в том, что владельцы блогов предлагают классный дизайн. Независимо от того, какую тему WordPress или Blogger вы используете, вполне вероятно, что тег <blockquote> по-разному обрабатывается. У каждого дизайнера тем есть свое представление о том, что должно входить в CSS-стилизацию цитат в статьях. Дело в том, что это дает вам возможность разбить содержание вашей статьи таким образом, который радует глаз и привлекает людей для чтения цитаты.

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

Цитаты

Совет по использованию <blockquote> в ваших статьях: не переусердствуйте. Одной или двух коротких цитат в статье, которая содержит от 800 до 1000 слов, более чем достаточно. Это дает не только возможность отвлечь внимание от абзацев, но и позволяет вводить цитаты внешних экспертов, что еще больше повышает доверие к вашей статье. Вы не можете проиграть.

Как использовать изображения

Еще одна вещь, которую показали тепловые карты онлайн-ридера Nielsen: люди, как правило, задерживаются на изображениях при чтении статьи в Интернете. Кроме того, глаза обращены к следующему изображению. Это дает вам очень мощный психологический способ заставить людей читать вместе в вашей статье. Кроме того, подобно <blockquote>, изображения разбивают контент и дают читателю передышку.

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

биг-изображения

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

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

стрелковые изображения

Чтобы выровнять изображения по тексту, как это обычно делается, достаточно просто установить класс выравнивания в «правый» или «левый» в теге <img>, но всегда проверяйте владельца блога или веб-сайта, для которого вы пишете. узнайте, есть ли какой-нибудь стиль CSS, который использует что-то вроде того, что известно как свойство «float» для выполнения выравнивания. Там может быть определенный синтаксис, который вам нужно использовать для выравнивания изображений, как это, в зависимости от стиля CSS, поэтому найдите время, чтобы спросить дизайнера. Это стоит усилий и сделает статью более привлекательной.

Составьте список и проверьте его дважды

Как рассказала Тина в своей статье о тегах HTML, тегов , есть два типа списков, которые вы будете форматировать в HTML, тег упорядоченного списка <ol> и тег неупорядоченного списка <ul>. Первый ставит числа перед элементами списка, второй ставит точки. Вы можете увидеть синтаксис в статье Тины, но когда именно уместно использовать один или другой — или вообще использовать список?

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

списки

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

Выделение жирным шрифтом и курсивом

Раньше этот жирный текст был подходящим вариантом, когда вы хотели выделить фразу или какой-то пункт в предложении. Это распространилось с ужасными дизайнами веб-сайтов 90-х годов, когда сайты, пытающиеся продавать вещи, выделяли жирный шрифт и изменяли размер шрифта различных слов, чтобы подсознательно заставить вас сосредоточиться на этих денежных словах или еще на чем-то … Я не знаю. Но я знаю, что как только блоги стали настолько популярными, и заголовки начали формировать структуру этого контента, жирный шрифт больше не имел смысла подчеркивать что-либо. В лучшем случае лучше использовать его как способ превратить текст в заголовок наименьшего размера — что делают многие блоги.

В старые времена тегом bold было <b>, и многие люди продолжают использовать его, не подозревая, что Интернет перешел на более современный тег <strong> или синтаксис CSS <span style = ”font-weight : жирный»> текст </ SPAN>.

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

Ненавязчивая реклама

То, как вы размещаете рекламу в своей статье, может реально изменить ситуацию, когда вы не теряете своих читателей из-за этого. Действительно, многие читатели привыкли к идее рекламы и тому, почему они должны платить за контент, но что раздражает читателей и отталкивает их (или заставляет их использовать эти ужасные блокировщики рекламы) — это всплывающая реклама, блокирующая текст или скрыты, чтобы выглядеть как часть статьи. Не делай этого.

Вместо этого используйте рекламу с четкими границами и используйте метод CSS «float», чтобы обтекание текста вокруг него (если только вы не разместите его на боковой панели). Вот как это выглядит:

<span id = ”more-xxxxx”>
<div style = ”float: right;”>
<script type = ”text / javascript”> <! —
google_ad_client = «ca-pub-xxxxxxxxxxxxx»;
google_ad_slot = «xxxxxxxx»;
google_ad_width = 300;
google_ad_height = 250;
// ->
</ script> <br />
<script type = ”text / javascript”
SRC =»http://pagead2.googlesyndication.com/pagead/show_ads.js»>
</ Скрипт> </ DIV>

Поплавок: правильно; поместит его в текст, где вам нужно, и вы можете автоматизировать это в WordPress с помощью шаблонов. как я уже описывал в предыдущих статьях. Это устраняет необходимость размещать рекламу в каждой статье. Как видите, объявление достаточно большое, чтобы привлечь внимание, но оно не маскируется и не блокирует какой-либо текст, поэтому, если читатели захотят, они могут просто проигнорировать его и продолжить чтение. Нет проблем.

бок объявления

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

Источники кредитования

Самое плохое в Интернете сейчас — это воровство контента, которое происходит, и я говорю не только о неработающих людях, которые очищают сеть от контента и копируют ее на свои некачественные спам-сайты, созданные только для Google. трафик. Нет, даже самые крупные и самые популярные веб-сайты — как крупные блоги, так и новостные СМИ — имеют очень плохую привычку красть новостные репортажи и «лопатки» у небольших блоггеров и веб-сайтов, добавляя несколько дополнительных цитат и заявляя, что идея является их собственной. , Это ужасно и довольно неэтично, но это случается. Это не значит, что вы должны следовать примеру. На самом деле, имеет смысл, что цитирование высококачественных источников чтобы подтвердить претензии к статье, и ваш сайт будет определен как высококачественный источник достоверной информации. Это SEO золото прямо здесь.

сноска-инфо

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

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

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

Похожие посты
Wordpress и веб-разработка

Добавить красивые слайд-шоу в сообщения WordPress с помощью SlideDeck

Wordpress и веб-разработка

Сделайте свой WordPress блог iPad удобным с Onswipe

Wordpress и веб-разработка

Как создать карту изображения с помощью GIMP

Wordpress и веб-разработка

WordPress: еще 3 скрытых жемчужины в наборе плагинов Jetpack, а также обновлено приложение WordPress!