HTML: оптимизировать способ отображения друзей

Question

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

обряд теперь я использую эту структуру:

<div> 
    <div style="float:left; padding:5px;"> 
        <img src="avatar_url">
    </div> 
    <div style="float:left; padding:5px;">
        Name <br /> 
        Current Mood
    </div>
    <div class="clr"></div>
    <div align="right">
        Online Status
    </div>
</div>

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

Answer 1

Разве вы не можете разбить на страницы результаты?

<div class="user">
  <img src="avatar.gif" class="user-avatar" />
  <h1 class="user-name">Name</h1>
  <h2 class="user-mood">Current mood.</h2>
  <div class="user-status">Online Status</div>
</div>

Технически это несколько меньше тегов, однако ...

Answer 2

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

<div class="friend">
    <img ... />
    <hx>FULL NAME</hx>
    <p>Current Mood</p>
    <p class="status">Online Status</p>
</div>

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

Вот некоторые очень минимальные CSS, чтобы пойти с этим:

.friend img { float:left; margin-right:5px; }
.status { text-align:right; }

Answer 3

Вы не можете удалить много там, но вы наверняка можете заменить атрибут стиля классом

class="left"

на

.left { float:left;padding:5px; }

И вы также можете заменить

<div class="clr"></div>

с

<div class="clr" />

В любом случае, время загрузки не сильно изменится.

Answer 4

Помимо удаления div вокруг аватара img (можете ли вы установить float / padding для самого элемента img?), Вы ничего не можете сделать.

Однако вы можете оптимизировать объем текста, создав класс для float: left; padding: 5px и используя этот класс вместо полного стиля тысячи раз.