Reply to comment

Writing Articles in HTML5

I've been writing HTML forever, but really never looked at the new HTML5 tags. For the most part, I'd devolved into using DIV and SPAN and FORM and a few other tags to code up webpages. That's OK for writing software, but it was getting pretty stupid when I was putting in code like DIV CLASS="address". A quick trip through the HTML5 tags revealed a cornucopia of tags relevant to writing academic papers and computer programming tutorials. Semantic Markup still exists.

How did I miss this?!

With these better, semantic tags, our CSS can be more precise and descriptive.

Here's a sample HTML document that uses many of them, and includes a few tags that aren't for documents, but have some utility. The tags are described below the sample code. All these tags are at sites like w3schools, as well.

<!DOCTYPE html>
<html>
    <body>
        <header>
            <h1>Sample Site</h1>
        </header>
        <main>
            <article>
                <h2>HTML Example Document</h2>
                <figure>
                    <img src="some.jpg" />
                    <figcaption>
                        Figure 1.
                    </figcaption>
                </figure>
                <p>
                    <cite>Title of Book</cite>
                    <del>Old text here</del><ins>New text here</ins>.
                    <s>Incorrect text here</s>.
                    <mark>This is highligted, "marked" text</mark>.
                </p>
                <aside>
                </aside>
                <blockquote cite="">
                </blockquote>
                <p>
                    <dfn>CSS</dfn> is the <em>styling language</em>
                    for HTML.
                </p>
                <p>
                    Tags to write computer instruction manuals:
                    Code: <code>rm -rf *</code>
                    Sample Output: <samp>Are you sure?</samp>
                    Keyboard input: <kbd>n</kbd>
                    A variable: <var>index</var>
                    <sub>Subscript</sub> and <sup>superscript</sup>.
                </p>
                <pre>
                    Preformatted text
                </pre>
                <p>
                    <time datetime="2016-12-12 12:00">12:00pm</time> - a time.
                </p>
                <p>
                    <ruby>
                        Ruby <rt><rp>(</rp>definition<rp>)</rp></rt>
                    </ruby>
                    is an annotation to define a term by text
                    enclosed in parentheses. Used for East Asian text.
                </p>
            </article>
            <section class="multimedia audio">
                <article>
                    <h2>Listen</h2>
                    <audio controls>
                        <source src="audio.mp3" type="audio/mp3" />
                        <track src="" />
                    </audio>
                    <details>
                        <summary>More...</summary>
                        <p> by so and so</p>
                    </details>
                </article>
            </section>
        </main>

        <footer>
            <address>
                Jill Example<br />
                1234 Example Dr.<br />
                Example, CA 90002<br />
            </address>
        </footer>
    </body>
</html>

MAIN - This isn't for writing articles as much as it helps define the main area of the screen. Included because it's a good way to define the topmost grouping of content.

ARTICLE - A unit of text that can be extracted from the page, and stands alone.

FIGURE - A wrapper for IMG and FIGCAPTION, to group the image and caption together.

CITE - Markup a title of a book, film, etc. (TITLE was already taken for the title of the current page.)

DEL, INS, S, MARK - Indicate deleted, inserted, incorrect, and highlighted text. These are useful for legal documents.

ASIDE - Not for writing, but useful for creating sidebars. It's a way to add secondary text that may not be shown on smaller screens, or shown with a different color background.

BLOCKQUOTE - A quote. Note the CITE attribute to link to the URL of the origin document.

DFN - Definition. Used to mark the first use of a term. The parent element should contain the full definition.

EM, STRONG - These should be used instead of B and I.

CODE, SAMP, KBD, VAR - Useful tags for writing computer instructions and tutorials.

TIME - a way to tag human-readable times, and add machine-readable times as the DATETIME attribute. Useful if the browser can turn the time into an appointment to be entered into the calendar.

SUB, SUP - Subscript and superscript.

PRE - preformatted text. CODE followed by PRE is considered acceptable.

RUBY - Definitions for East Asian characters.

SECTION - defines chapters, volumes, etc.

AUDIO, SOURCE, TRACK - Tags to include an audio file and a transcript.

DETAILS, SUMMARY - Not a writing tag, but useful for hiding details on a page.

HEADER, FOOTER - Used for common elements on a page. Used with MAIN.

ADDRESS - Used to delimit contact information for a person.

But what about Markdown?

Markdown is a language that compiles down to a subset of HTML, and can also include HTML. So these new tags can be used with Markdown. That's what I'm doing.

More

If you're interested in more work that's similar to writing in HTML, check out PubCSS: Formatting Academic Publications in HTML & CSS

Reply

The content of this field is kept private and will not be shown publicly.
  • Lines and paragraphs break automatically.

More information about formatting options

7 + 10 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.