HTML есть свое назначение. У некоторых есть строгая семантика среди них как раз ul ol li. Этими тегами оформляются списки. Список ссылок может быть навигацией по сайту, тогда ОК, но они должны быть внутри семантического тега nav. В некоторых случая слайдер может быть списком картинок, если это оправдано с точки зрения смысла. В общем почитайте доку по семантическим и не семантическим тегам HTML. Это действительно важная тема, от этого зависит то, как видят вашу страницу поисковые роботы. .icon_i {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
font-size: 1em;
color: red;
text-align: center;
font-style: italic;
font-family: serif;
border: 0.125em solid red;
border-radius: 0.25em;
z-index: 1;
box-sizing: border-box;
background-color: #fff;
background-color: inherit;
}
.icon_i:after {
content: '';
position: absolute;
left: calc(50% - 0.25em);
bottom: -0.385em;
width: 0.5em;
height: 0.5em;
border-right: 0.125em solid red;
border-bottom: 0.125em solid red;
z-index: -1;
transform: rotate(45deg);
box-sizing: border-box;
background-color: inherit;
}