Правильно ли добавить `div` в ссылку?

Question

Правильно ли добавить div в ссылку?У меня есть несколько значков на моем веб-сайте, которые при начальной загрузке при наведении мыши на них немного увеличивают размер.Значки находятся в пределах двух дел.Я хочу, чтобы при нажатии на значок, помимо того, что они увеличивались в размере, они переносили меня на другую страницу моего сайта.Я показываю вам один из div:

<section class="ulockd-service-three">
  <div class="container">
    <div class="col-xs-6 col-sm-4 col-md-2">
      <div class="ulockd-srvc-column-two one text-center">
        <div class="ulockd-srvc-details-two">
          <div class="ulockd-srv-icon-two"><span class="flaticon work"> 
          </span>
          </div>
          <h5>Safety Work</h5>
       </div>
    </div>
   </div>
  </div>
</section>

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

Вот как работает ссылка:

<section class="ulockd-service-three">
  <div class="container">
    <div class="col-xs-6 col-sm-4 col-md-2">
      <div class="ulockd-srvc-column-two one text-center">
        <div class="ulockd-srvc-details-two">
          <a href="about.html"><div class="ulockd-srv-icon-two">
            <span class="flaticon-work"> </span>
          </div></a>
          <h5>Safety Work</h5>
       </div>
    </div>
   </div>
  </div>
</section>

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

Спасибо

Я РЕДАКТИРУЮ ВОПРОС: Я добавляю css, чтобы вы могли помочь мне, я надеюсьдобавить что нужно.Я искал то, что, по моему мнению, может повлиять на span

. Я редактирую вопрос: я добавляю фрагмент кода и CSS. Мне нужно знать, правильный ли способ размещения ссылки, правильное добавление div внутритег ссылки, если синтаксис правильный.

Я показываю фрагмент кода,

Я не знаю, как правильно добавить CDN "FLATICON", поэтому вы не можете видетьзначок, если вы можете исправить это для меня, чтобы заставить его работать, я был бы признателен.

.ulockd-srvc-column-two:hover .ulockd-srv-icon-two span {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
}

.ulockd-fservice-box .db-overlayer span {
  border: 3px solid #fff;
  bottom: 10px;
  color: #fff;
  font-size: 48px;
  line-height: 1.2em;
  padding: 0 10px;
  position: absolute;
  right: 10px;
}
.ulockd-fservice-box.style2 span {
  border: 1px solid #fff;
  padding: 10px 15px;
  position: absolute;
}

.time_circles{position:relative;width:100%;height:100%}.time_circles > div{position:absolute;text-align:center}.time_circles > div > h4{margin:0;padding:0;text-align:center;text-transform:uppercase;font-family:'Century Gothic',Arial}.time_circles > div > span{display:block;width:100%;text-align:center;font-family:'Century Gothic',Arial;font-size:300%;margin-top:.4em;font-weight:700}

.ulockd-srv-icon {
  padding: 10px;
}
.ulockd-srvc-column .ulockd-srv-icon {
  color: #fff;
  display: inline;
  font-size: 36px;
  line-height: 1.2em;
  margin-top: 9px;
  padding: 8px 13px;
  position: relative;
}
.ulockd-srv-icon {
  padding: 10px;
}
.ulockd-srvc-column .ulockd-srv-icon {
  color: #fff;
  display: inline;
  font-size: 36px;
  line-height: 1.2em;
  margin-top: 9px;
  padding: 8px 13px;
  position: relative;
}
.ulockd-srvc-column .srv-icon {
  font-size: 60px;
  line-height: 1.2em;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -ms-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.ulockd-srvc-column:hover  .srv-icon{
  transform: scale(1.4);
  -webkit-transform: scale(1.4);
  -moz-transform: scale(1.4);
  -o-transform: scale(1.4);
  -ms-transform: scale(1.4);
}
.ulockd-ap-srv-icon {
  background-color: #393939;
  padding: 10px;
}
.ulockd-ap-srvc-column{
  margin-bottom: 45px;
  position: relative;
}
.ulockd-ap-srvc-column .ulockd-ap-srv-icon {
  color: #fff;
  float: left;
  font-size: 36px;
  margin-top: 9px;
  position: relative;
}  
.ulockd-ap-srv-icon::before {
  background-color: #393939;
  border-left: 4px solid #fff;
  border-right: 10px solid #393939;
  content: "";
  height: 100%;
  left: -33%;
  position: absolute;
  top: 0;
  transform: skewX(9deg);
  -webkit-transform: skewX(9deg);
  -moz-transform: skewX(9deg);
  -o-transform: skewX(9deg);
  -ms-transform: skewX(9deg);
  width: 44%;
}
.ulockd-srv-icon-two {
  padding: 10px;
}
.ulockd-srvc-column-two {
  padding: 10px;
  position: inherit;
  margin-top: -200px;
  z-index: 999;
}
.ulockd-srvc-column-two.one {
  margin-top: 0;
}
.ulockd-srvc-column-two:hover {
  cursor: pointer;
}
.ulockd-srvc-column-two:hover .ulockd-srv-icon-two span {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
}
.ulockd-srvc-column-two .ulockd-srv-icon-two {
  color: #fff;
  font-size: 60px;
  line-height: 1.3em;
  position: relative;
  -webkit-transition: all 0.2s ease-in-out 0s;
  -moz-transition: all 0.2s ease-in-out 0s;
  -ms-transition: all 0.2s ease-in-out 0s;
  -o-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
}
.ulockd-srv-icon-two{
  padding-bottom: 0;
}
.ulockd-srvc-details-two {
  padding-top: 0;
}

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico">
</head>
<body>

<!--THIS IS THE NATURAL WAY OF THE DIV-->

       <section class="ulockd-service-two parallax" data-stellar-background-ratio="0.3">
		<div class="container">
			<div class="row">
      
      <div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
					<div class="ulockd-srvc-column three text-center ulockd-mrgn650">
						<div class="srv-icon text-thm1"><span class="flaticon-farm-2"></span></div>
						<div class="srvc-details">
							<h3>Excellent Services</h3>
							<p>Consectetur adipisicing elit. Fugiat perspiciatis necessitatibus beatae debitis repudiandae illo nihil commodi consequuntur ipsum iusto.</p>
						</div>
					</div>
				</div>
      </div>
    </div>
   </section>
      
       <!--AND THIS IS THE ONLY WAY I GOT TO ADD THE LINK WHEN WE CLICK THE ICON, SO THAT IT WORKS WITHOUT BREAKING THE STYLES OF THIS. And the one that I need to know if the syntax is correct-->
       
              <section class="ulockd-service-two parallax" data-stellar-background-ratio="0.3">
		<div class="container">
			<div class="row">
      
      <div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
					<div class="ulockd-srvc-column three text-center ulockd-mrgn650">
          <!--this line is the one that I modify-->
						<a href="about.html"><div class="srv-icon text-thm1"><span class="flaticon-farm-2"></span></div></a>
						<div class="srvc-details">
							<h3>Excellent Services</h3>
							<p>Consectetur adipisicing elit. Fugiat perspiciatis necessitatibus beatae debitis repudiandae illo nihil commodi consequuntur ipsum iusto.</p>
						</div>
					</div>
				</div>
      </div>
    </div>
   </section>
   
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Answer 1

Вы должны удалить диапазон операций div напрямую или, может быть, лучше

<section class="ulockd-service-three">
  <div class="container">
    <div class="col-xs-6 col-sm-4 col-md-2">
      <div class="ulockd-srvc-column-two one text-center">
        <div class="ulockd-srvc-details-two">
          <a href="about.html"><span class="flaticon-work"> </span></a>
          <h5>Safety Work</h5>
       </div>
    </div>
   </div>
  </div>
</section>