Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Simplify The HTML Tags?

Post a Comment
I hope you are well. Im really struggling to simplify the HTML below, I was wondering if you can help me to do so?, I do still want to keep the output as presented code, however I

Solution 1:

Okay. I see you are using too many span elements and using <br/> elements to break the line, which although will render but is not quite an efficient thing to do. What I would suggest, you should use div element where you think you will break the line, so wrap that content in a div element because div elements are by default block elements and span elements are by default inline elements. Here is my suggestion in implementation.

.blue {
  color:#005ad2;
}
.font10pt {
    font-size: 10.5pt !important;
}
.defaultClass {
  text-indent: 0px;
  font-size: 14px !important;
  font-family: "Segoe UI Semilight", sans-serif;
  line-height: normal;
  font-size: medium;
  -webkit-text-stroke-width:0px;
}
<div class='defaultClass'>
  <div class='blue'>
      I need the support
  </div>
  If you believe your issue is not resolved, via 
  <a href="https://google.co.uk/" class='font10pt'>Google Online.</a>
</div>

PS: Keeping things in the tags is a better approach then to keep the text raw in the page. Such as I have placed "If you believe your issue is not resolved, via" this line and the <a> element side by side, but it would be better if you wrap it inside a <span> element so you know for sure that this text would be rendered as inline text with the anchor element.

Happy coding!


Solution 2:

Here's an easy implementation where I've separated the styles from the HTML, you can add the styles to your HTML page by enclosing it in <style></style> tags

.span1 {
  font-size: medium;
  text-indent: 0px;
  -webkit-text-stroke-width: 0px;
  font-size: 14px;
  font-family: "Segoe UI Semilight", sans-serif;
  line-height: normal;
  color: #005ad2;
}

.text1 {
  font-size: 14px;
  font-family: "Segoe UI";
}

.link {
  font-family:"Segoe UI&quot",sans-serif;
  font-size:10.5pt;
}
<div>
  <span class="span1">
    I need the support
  </span>
  <br>
  <span class="text1">
    If you believe your issue is not resolved, via&nbsp;
  </span>
  <a href="https://google.co.uk/"class="link">Google Online</a>
</div>

Solution 3:

When using several styles in one element, it can help readability and organisation to place styles in the <style> tags within the <head>, rather than nesting elements for the purpose of styling.

<head>
<style>
    .text1 {
        text-indent: 0;
        -webkit-text-stroke-width: 0;
        font-size: 14px;
        font-family: 'Segoe UI Semilight';
        line-height: normal;
        color:#005ad2
    }
    .text2 {
        font-size: 14px;
        font-family: 'Segoe UI Semilight, sans-serif';
        line-height: normal;
        color: #005ad2
    }
    .text3 {
        font-family: 'Segoe UI Semilight, sans-serif';
        font-size: 10.5pt;
    }
    .text4 {
        font-family: 'Segoe UI Semilight, sans-serif';
        font-size: 12pt;
    }
</style>
</head>

<body>
<div>
    <span class="text1">I need the support</span>
    <br>
    <span class="text2">If you believe your issue is not resolved, via&nbsp;</span>
    <a class="text3" href="https://google.co.uk/"></a>
    <span class="text4">.</span>
</div>
</body>

Post a Comment for "Simplify The HTML Tags?"