HTML Basics

Pressbooks is designed to make it easy for you to create attractive webbooks and export files without knowing much about book design or web development. Our ability to do this, however, is constrained in many ways by the quality of the underlying ‘markup’ in your book. Pressbooks uses HyperText Markup Language [HTML] to provide the content and structure of your book and Cascading Style Sheets (CSS) to apply the styles that control the appearance of your webbook and export files. You don’t need to know HTML or CSS to use Pressbooks, but understanding a little bit about how they work will help make sure your books look good when you export from Pressbooks.

NOTE: Pressbooks’ visual editor allows you to write your book and apply several style choices without ever seeing any of your book’s underlying HTML. If you’ve find that you have formatting problems with your output, however, it’s almost always caused by problems with your book’s underlying markup.

Here is a brief passage of text with some formatting:

A long, long time ago, in a galaxy far, far away, there lived a fine young man unaware of various things about his past.

This is what you might write into the VISUAL editor of Pressbooks. But if you look at the TEXT editor, you’ll see that the way that italic and bold is achieved is through “markup”, or HTML. So the markup of that text looks like:

A long, <em>long</em> time ago, in a galaxy far, far away, there lived a fine young man <strong>unaware</strong> of various things about his past.

The <em>tag</em> specifies that a text should be italicized. The <strong>tag</strong> specifies that it should be bold.

A reader reading an ebook, or a print book, or a web page won’t see those tags. They are instead used to tell the ebook software, or browser, how those words should look. In addition to the em and strong tags, there are a handful of other basic HTML tags you should know about:

tag name used for  tags
strong used to make text bold <strong>  or <b>
emphasis used to make text italic <em> or <i>
blockquote used to quote a long text, can be used for instance for a letter, a poem etc <blockquote>
unordered list used to create a list with bullets <ul><li>item 1</li><li>item 2</li></ul>
ordered list used to create a numbered list  <ol>
<li>item 1</li>
<li>item 2</li>
</ol>
headings used to make headings in your document <h1>, <h2>, <h3> ... </h6>

Here is an extended version of the text from above with more HTML tags:

The Background

A long, long time ago, in a galaxy far, far away, there lived a fine young man unaware of various things about his past, including:

  • the Force
  • what his father was up to
  • how to use a lightsaber.

All that, however, was about to change. Three things were about to happen:

  1. he would discover the Force
  2. he would learn how to use a lightsaber, and
  3. he would meet his father.

The Update

Long after this fellow lived, a famous movie was made about his life. The movie was shot in Tunisia.

Here is that text with markup:

<h3>The Background</h3>
A long, <em>long</em> time ago, in a galaxy far, far away, there lived a fine young man <strong>unaware</strong> of various things about his past, including:
<ul>
<li>the Force</li>
<li>what his father was up to</li>
<li>how to use a lightsaber.</li>
</ul>
All that, however, was about to change. 

Three things were about to happen:

<ol>
<li>he would discover the Force</li>
<li>he would learn how to use a lightsaber, and</li>
<li>he would meet his father.</li>
</ol>


<h3>The Update</h3>
Long after this fellow lived, a famous movie was made about his life. The movie was shot in Tunisia.

Write in Markdown

NOTE: We strongly recommend saving changes to existing content before enabling the Markdown editor, as unsupported elements will be removed when converting existing HTML content to Markdown. 

Users who prefer to write using Markdown can do so by activating the Parsedown Party plugin in their book. In networks where this plugin is installed and book admins are able to activate plugins, you can enable a Markdown editor in your book by doing the following:

  1. Click Plugins from the left sidebar menu of your book’s dashboard
  2. Click Activate on the Parsedown Party plugin
    The Activate link is underneath "Parsedown party" on the Plugins page
  3. Open the visual editor for a chapter in your book that you’d like to use Markdown in
  4. Click ‘Enable‘ next to the ‘Markdown‘ option in the ‘Status & Visibility‘ menu.Enable markdown at the bottom of the Status & Visibility menu in the chapter editor interface.

The visual/text editor interface will now be replaced by a simple Markdown-based editor. You can revert the default visual/text editor interface by clicking the Disable button next to the Markdown option in the Status & Visibility menu.

Note: The Parsedown Party plugin is not available on the Pressbooks.com network. Please contact your network manager if you are creating your book on another Pressbooks network and do not see the plugin menu or the Parsedown Party plugin in your book,

“Edit Content with the Visual & Text Editors” from Pressbooks User Guide Copyright © 2024 by Pressbooks is licensed under a Creative Commons Attribution 4.0 International License, except where otherwise noted.

License

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Fanshawe OER Training Guide Copyright © 2024 by Fanshawe College is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book