Quickstart: displaying text (HTML)
[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]
Windows apps using JavaScript can use several elements to display text. The primary elements for displaying read-only text include label, div, paragraph, and heading. This quickstart shows you how to use these elements to display text.
See this feature in action as part of our App features, start to finish series: Windows Store app UI, start to finish
Prerequisites
- We assume that you can create a basic Windows app using JavaScript with the Windows Library for JavaScript template. For help creating your first app, see Create your first Windows Store app using JavaScript.
Label, div, paragraph, and text area
Label, div, paragraph, and heading are the primary controls for displaying read-only text in Windows apps using JavaScript. This HTML shows how to define a simple label control and set its text.
<label>Hello, World!</label>
You can use the inline style attribute to display text with different formatting. Here's how to use the style attribute with a div, paragraph, label, and heading control to define several differently formatted text strings.
Note You can also use Cascading Style Sheets (CSS), instead of the style attribute to display text with different formatting. This allows you to define a style once and then refer to it from multiple controls. If you need to make changes to the style definition later, you only need to make those changes in one place. For details, see Cascading Style Sheets.
<div style="font-family:Arial">Sample text formatting runs</div>
<!-- 'margin:0px' removes any default margins from the <p> element. -->
<p style="margin:0px; color:lightgray; font-family:'courier new'; font-size:24px">Courier New 24</p>
<label style="color:teal; font-family:'times new roman'; font-style:italic; font-size:18px">Times New Roman Italic 18</label><br />
<!-- 'padding:0px' remove any default padding from the <h1> element. -->
<h1 style="padding:0px; background-color:transparent; color:steelblue; font-family:Verdana; font-weight:bold; font-size:14px">Verdana Bold 14</h1>
Here's the result.
.png "Text using runs.")
Summary and next steps
You learned how to create label, div, paragraph, and heading elements to display text in your app.