Можно ли сверстать семантично 2 облака тегов?

[XXXVII]

Задача проста: 2 облака тегов и переключалка между ними (отображается только одно облако).

| облако 1 | облако 2|

|тег тег тег тег тег тег| <?сюда подставляются теги выбранного облака после клика по переключалке.

Я хотел сделать эту конструкцию правильно, т.е. список с двумя вложенными списками:

<ul>
	<li>
		Облако 1
		<ul>
			<li><a href="#">тег</a></li>
			<li><a href="#">тег</a></li>
			<li><a href="#">тег</a></li>
			<li><a href="#">тег</a></li>
		</ul>
	</li>
	<li>
		Облако 2
		<ul>
			<li><a href="#">тег</a></li>
			<li><a href="#">тег</a></li>
			<li><a href="#">тег</a></li>
			<li><a href="#">тег</a></li>
		</ul>
	</li>
</ul>

И все бы ничего, сделать:

для главного списка: position: relative

для переключалок float: left; width: 50%

для вложенных списков: position: absolute; top: ...px; left: 0px

Но под облаком тегов у меня находится еще контент, т.е. мне нужно учитывать высоту облаков (а у каждого облака может быть своя высота).

Вот я и задумался, а можно ли сделать семантичный код для данного случая?

Буду признателен, если кто-нибудь уделит минутку обсуждения моей проблемы

[XXXVII]

Кстати, возможно правильнее было бы использовать вообще dl, но тут я совсем теряюсь какой стиль прописывать...