HTML page listing product characteristics

Question

I am using below code in site. i am using lot of html "br" tags. Is this the proper way? or may i add css class for those lines instead of <br> tags to give space between lines?

<p><b>3D Sublimation Vacuum Heat Transfer Press Printer Machine ST-3040</b></p>

<p>It is a all-in-one machine that can transfer many sublimation blanks, mug, latte mug, plate, hat, t-shirt, iphone/ipad case, metal, glass, crystal, etc.</p>

<b><p>a) Feature / Intelligent:</b>
<br>
1. Easy operation. You can only need to set the temperature and time.
<br>
2. Well-designed user interface.
<br>
Needs no operations other than placing the workpieces in and taking them out.
</p>

<b><p>b) Multi-functional:</b>
<br>
1.It can widely print on mug, glass, crystal, acrylic, plastic, wood, metal, stone, fabric, etc.
<br>
2.It can print on mugs of different shape and size with corresponding fixtures.
<br>
3.large print size; clear print effect; accurate color rendition; better performance than traditional heat transfer printers.
</p>

<b><p>c) Delicate</b>

<br>
1.Uneven dot surface enlarges the heating area.
<br>
2.Die casting aluminium alloy and far-infrared coating.
<br>
3.Even heating.
<br>
4.Clear print effect; accurate color rendition.
</p>

<p><b>d) Concise</b>
<br>
1.Made of flame-resistant heat insulating materials.
<br>
2.Safe, light, and streamline heat insulating strip.
<br>
3.Compact practical internal structure. Modern exterior.
</p>

<p><b>e) Efficient</b>

<br>
1.Large volume: 300 x 420 x 110 (mm).
<br>
2.Can print 12 mugs at one time.
</p>

<p><b>f) Green&Compact</b>
<br>
Built-in high performance acticarbon air filter.
<br>
Effectively filter the exhaust gas.
<br>
Long exhaust pipe.
<br>
108 flip design, easy operation, space saving.
<br>
Safe Software & hardware dual control of temperature. Each one will start automatically once the other one is failure.
15 minutes no operation off.
</p>

<ul>
<li><b>Specifications</b></li>
<li>Model: ST-3042</li>
<li>Voltage: 110 V /220 V 50 Hz /60 Hz</li>
<li>Power: 2800W</li>
<li>CBM: 0.18CBM</li>
<li>Printing Size: 300 x 420 x 110 mm</li>
<li>Vacuum Pump: 12 V/10 W</li>
<li>Max Vacuum: -640 mmHg</li>
<li>Pressure: -0.06 ~ 0.07 Pa</li>
<li>N.W: 24kg</li>
</ul>

Packing Size: 690 x 620 x 380 mm

Answer 1

HTML has elements that carry semantics. For example ol is an ordered list, ul an unordered one. Programs can use that meaning for ease of navigation, reader mode, better search results and so on. Certain elements don't carry that semantic, and <br> is one of them.

Let's have a look at one of your snippets to see what one can improve.

<b><p>c) Delicate</b>

<br>
1.Uneven dot surface enlarges the heating area.
<br>
2.Die casting aluminium alloy and far-infrared coating.
<br>
3.Even heating.
<br>
4.Clear print effect; accurate color rendition.
</p>

First of all, that's invalid markup. The <b> and the <p> tag intersect, which must not happen. Next, we have a list. It's apparently ordered, therefore we should use an <ol>. And last, the <p><b>…</b></p> looks like a headline, so it should be a h*. For this small snippet, we see that the following snippet contains all the semantics:

<h2>Delicate</h2>
<ol>
  <li>Uneven dot surface enlarges the heating area.</li>
  <li>Die casting aluminium alloy and far-infrared coating.</li>
  <li>Even heating.</li>
  <li>Clear print effect; accurate color rendition.</li>
</ol>

This is especially important to screen readers or other users that look for a structure. A blind person can decide to jump over a list; it's much more harder to jump over breaks in a paragraph.

So check what tags like <p>, <h2> and so on mean. Not only do they carry some kind of representation (this should look like a paragraph, this should look like a headline), but also meaningful semantics (this is a paragraph, this is a headline). Also, the code gets easier to read.

If you want to change they appearance, use CSS afterwards, e.g.

/* just an example to make it slightly more smoother */
body { line-height: 1.4; margin: auto; max-width: 80ex; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.25em; }
li { padding-left: 1ex; }
li+li { margin-top: 0.4ex; }

<h1>3D Sublimation Vacuum Heat Transfer Press Printer Machine ST-3040</h1>

<p>It is a all-in-one machine that can transfer many sublimation blanks, mug, latte mug, plate, hat, t-shirt, iphone/ipad case, metal, glass, crystal, etc.</p>

<h2>Feature / Intelligent</h2>
<ol>
  <li>Easy operation. You can only need to set the temperature and time.</li>
  <li>Well-designed user interface.</li>
</ol>
<p>Needs no operations other than placing the workpieces in and taking them out.</p>

<h2>Multi-functional</h2>
<ol>
  <li>It can widely print on mug, glass, crystal, acrylic, plastic, wood, metal, stone, fabric, etc.</li>
  <li>It can print on mugs of different shape and size with corresponding fixtures.</li>
  <li>large print size; clear print effect; accurate color rendition; better performance than traditional heat transfer printers.</li>
</ol>

Answer 2

To go further on Zeta's answer, you may nest ordered lists.

Something like this:

h1 { font-size: 1.5em;}
ol h2 { font-weight: bold; font-size: 1em; margin-bottom: 0px; }
ol ol li, ol ul li { font-weight: normal;}

<h1>3D Sublimation Vacuum Heat Transfer Press Printer Machine ST-3040</h1>

<p>It is a all-in-one machine that can transfer many sublimation blanks, mug, latte mug, plate, hat, t-shirt, iphone/ipad case, metal, glass, crystal, etc.</p>

<ol type="a">
<li><h2>Feature / Intelligent:</h2>
  <ol type="1">
  <li>Easy operation. You can only need to set the temperature and time.</li>
  <li>Well-designed user interface.</li></ol>
  Needs no operations other than placing the workpieces in and taking them out.
</li>

<li><h2>Multi-functional:</h2>
  <ol type="1"><li>It can widely print on mug, glass, crystal, acrylic, plastic, wood, metal, stone, fabric, etc.</li>
  <li>It can print on mugs of different shape and size with corresponding fixtures.</li>
  <li>large print size; clear print effect; accurate color rendition; better performance than traditional heat transfer printers.</li></ol>
</li>

<li><h2>&hellip;</h2></li>

<li><h2>Specifications</h2>
<ul type="disc">
  <li>Model: ST-3042</li>
  <li>Voltage: 110 V /220 V 50 Hz /60 Hz</li>
  <li>Power: 2800W</li>
  <li>CBM: 0.18CBM</li>
  <li>Printing Size: 300 x 420 x 110 mm</li>
  <li>Vacuum Pump: 12 V/10 W</li>
  <li>Max Vacuum: -640 mmHg</li>
  <li>Pressure: -0.06 ~ 0.07 Pa</li>
  <li>N.W: 24kg</li>
</ul>
</li>
</ol>

<p>Packing Size: 690 x 620 x 380 mm</p>

Thnks to Zeta for pointing out that you can insert <h2> inside <li>.

Answer 3

or may i add css class for those lines instead of <br> tags to give space between lines?

No. Designing a CSS class only to replace an other HTML element is not a genuine choice because, by the end, this is just replacing a well known "keyword" with a personal one that will solicit more effort to the reader of your code who will have to check what it -the newly created CSS class- fulfills and then remember its purpose for the rest of your code.