spmbt

+ text-indent (смещение 1-й строки)

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

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

В Вашем случае - то, что по центру (по горизонтали) - несущественно. А вот Хедер и футер у вас должны быть сделаны 0% высоты, а остальными стилями вставить в них нужную ненулевую высоту блоков. Пример того, как это делается со страницами Хабра, описан здесь: http://habrahabr.ru/post/151320/ чтобы увидеть, как работает - поставить скрипт (лучше на Firefox или старую Оперу, там надёжнее работало) и перейти на короткую страницу, например, эту https://auth.habrahabr.ru/settings/privacy/ (до вчера работали QA, где было много коротких страниц). Так же будут работать и короткие статьи и прочее, например, страница подготовки статьи.

Назвать все дивы и прочие общие имена тегов своими именами, которым прописать необходимые свои стили и стили оригинальных тегов по умолчанию. Например, DIV заменить на MYAPPDIV, SPAN на MYAPPSPAN и т.д.

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

Сделать его во внешнем подгружаемом файле, приписать некешируемость (можно в браузере, у Хрома настройка в интерфейсе отладчика). Или пересобирать проект перед тестом.

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

Таблица высотой 100% в лайауте, который сконструировать по принципам, описанным в habrahabr.ru/post/151320/.

В jQuery есть .position(). В нативном:

$getPosition = function(o){
	var x =0, y =0;
	while(o){
		x += o.offsetLeft ||0;
		y += o.offsetTop ||0;
		o = o.offsetParent || o.parentNode;
	}
	return {x:x, y:y};
}

Смещение будет разностью смещений блока и обрамляющего (который не всегда будет непосредственным родителем, поэтому цикл). Или напишите цикл с остановкой while(o && o.className !='класс_родителя'). Положение прокрутки выставляется через тот же scrollTop, высота блока — offsetHeight (вызывает reflow). scrollTop автоматически не выходит за пределы offsetHeight, поэтому близкие к краям блоки не окажутся точно в центре, но чаще всего это и нужно.

(А к чему такой вопрос? Нужна просто начальная практика и посмотреть, как другие делали? Или наоборот, надо будет верстать очень много?)
1) Берёте страницу под эту систему, написанную грамотным специалистом (т.е. в коде присутствует сброс стилей, механизм клирфиксов, и выброшено всё, что в этом урезанном браузере и так не работает);
2) Выбрасываете всё лишнее из образца страницы;
3) Пользуетесь как фреймворком.

{height: сколько-то em или ex (для разных шрифтов разное, но можно зафиксировать line-height); overflow: hidden;}. ellipsis не пройдёт, выйдет за пределы. Если текст точно выходит за пределы, то вешаете троеточие внизу справа по position:absolute; с внешним position: relative;.

юзерскрипт:

var sA = document.querySelectorAll('select[size=4]');
if(sA && sA.length)
    for(var i=0, iL = sA.length; i < iL; i++) if(sA.parentNode)
        sA[i].setAttribute('size', 8);

<a href="#"><img alt="[img]" title="текстовое описание на случай откл.изобр."
	style="width: 16px; height:16px; background-color: по_вкусу"/></a>

Если писать в бекграунде, он по умолчанию не печатается из браузера. (Отключение CSS — действительно такие читатели (не роботы) есть?)

yui_room9 уже ответил — хочу добавить, что вес этих 2 картинок поверх бекграунда будет неслабым, порядка 150-200 К каждая (придётся делать полупрозрачный PNG). И отдельную сложность будет представлять собой внедрение этой конструкции (2 рисунка подо всем остальным) на фон страниц, потому что от контента в обычном position: static придётся отказаться, делать в слое relative. Это вызовет, возможно, проблемы с виджетами и скриптами на страницах, которым нужно размещение в базовом потоке — динамические меню, например. Увеличится стоимость их установки и доработки. Может быть, и нет, если такие элементы применяться не будут.

Ещё, 2-я картинка будет в прибитом к низу футере (div style=position:bottom:0 X image X /div), поэтому прибитый футер нужно выбрать такой, чтобы всё вместе это работало. Это не очень просто — посмотрите, сколько публикаций в инете и на Хабре про прибитый футер, и нет универсального решения.

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