短文本的HTML标签

Question

I need to display the following text on an HTML5 page:

John Smith
Web Designer
Member since 2018

My idea is to have something like:

<div class="user">
  <span>John Smith</span>
  <span>Web Designer</span>
  <span>Member since 2018</span>
</div>

And then use:

div.user span { display: block; }

Or should I wrap each text line in a P tag?

Usually I see P tags as for long text ...

For short text I tend to use: - A (if it is a link); - SPAN (if it is no link); - H (if it is a title).

My main doubt is what tab to use when it is a short text (2 to 4 words)?

Answer 1

Perhaps you could use the HTML <br> tag, which seems to be the most simple way of achieving this without CSS.

<div class="user">
  John Smith<br>
  Web Designer<br>
  Member since 2018
</div>

Answer 2

如果要在单独的行中显示每个项目，请为它们使用div 。

Answer 3

This is a school-book case for XSLT.

Assuming that you have an XML file like

<?xml version='1.0' encoding='utf-8'?>
<div class="user">
  <span>John Smith</span>
  <span>Web Designer</span>
  <span>Member since 2018</span>
</div>

you can transform this with XSLT-1.0 or above to put a <BR /> tag after each entry:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output indent="yes"/>

    <xsl:template match="/div[@class='user']">
        <xsl:apply-templates select="span"/>
    </xsl:template>

    <xsl:template match="span">
      <xsl:value-of select="." /><br />
    </xsl:template>

</xsl:stylesheet>

Or, to put each entry inside a <p> tag, replace the second template with

<xsl:template match="span">
  <p><xsl:value-of select="." /></p>
</xsl:template>

With XSLT you are flexible to create both outputs with a minimum of changes to the XSLT file and no changes at all to the input XML file.