17
\$\begingroup\$

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

\$\endgroup\$
  • 1
    \$\begingroup\$ Just a note that HTML is not code - it is mark-up, as in Hyper Text Markup Language (HTML) \$\endgroup\$ – Shaun Bebbers Sep 15 '17 at 13:44
35
\$\begingroup\$

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>

\$\endgroup\$
  • \$\begingroup\$ "Next, we have a list. It's ordered, therefore, we should use an <ol>. And last, the <p><b>…</b></p> looks like a headline" caused me to double-take, because I thought the c) Delicate was what you were signalling as evidence for an ordered list. Is there any reason for not using nested <ol> in your proposal? \$\endgroup\$ – Peter Taylor Sep 15 '17 at 12:28
  • \$\begingroup\$ @PeterTaylor Depends whether Delicate should be seen as a headline, or as an association. If it's an association, a dl would be appropriate, e.g. <dl><dt>Delicate</dt><dd><ol>…</ol></dl>. But I'm not sure whether OP wants to use those keywords as headline or create an association list. You can still use CSS for numbering if it's purely representational (which it currently looks like). \$\endgroup\$ – Zeta Sep 15 '17 at 13:19
  • 1
    \$\begingroup\$ While I like your answer and the changes you've done, you forgot something: the complete lack of indentation. Yes, the code is easier to read now, but would be worlds better if it was properly indented. \$\endgroup\$ – Ismael Miguel Sep 15 '17 at 15:30
  • 1
    \$\begingroup\$ @IsmaelMiguel had no proper editor and didn't see the tidy button. Done. \$\endgroup\$ – Zeta Sep 15 '17 at 15:32
10
\$\begingroup\$

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>.

\$\endgroup\$
  • \$\begingroup\$ You're allowed to use <h2> in <li>. Just in case you want to merge both approaches. \$\endgroup\$ – Zeta Sep 15 '17 at 14:50
  • \$\begingroup\$ @Zeta: thank you, edited!! \$\endgroup\$ – dg3 Sep 18 '17 at 7:00
5
\$\begingroup\$

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.

\$\endgroup\$
  • 1
    \$\begingroup\$ The br element may not be used just because you need a line break. br is only for meaningful line breaks (e.g., like in poems or addresses). So if you need a line break for visual/design reasons, CSS should be used, using an existing element, or if there is no suitable one, a meaningless element (div/span). \$\endgroup\$ – unor Sep 15 '17 at 22:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.