literature

HTML Guide for Literature

Deviation Actions

pica-ae's avatar
By
Published:
29.9K Views

Literature Text

Bold / Strong

Lorem ipsum <b>dolor sit amet</b> consectetuer adipiscing elit.
Lorem ipsum <strong>dolor sit amet</strong> consectetuer adipiscing elit.


Lorem ipsum dolor sit amet consectetuer adipiscing elit.


Italic / Oblique

Lorem ipsum <em>dolor sit amet</em> consectetuer adipiscing elit.
Lorem ipsum <i>dolor sit amet</i> consectetuer adipiscing elit.


Lorem ipsum dolor sit amet consectetuer adipiscing elit.


Blockquote
A blockquote creates a seperated part in a copy text. It is mostly used for quotes.
Text set in <blockquote>…</blockquote> will have space on all 4 sides, making that part of the text stand out more.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <blockquote>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.</blockquote> Aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.
Aliquam erat volutpat.


Code/Typewriter
You may want to use a different font for parts of your submission. The simplest way is to use code or typewriter text. The regular font for writing code or unedited text (.txt) are monospaced fonts like Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono or Courier New.

<code>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</code>
<tt>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</tt>


Lorem ipsum dolor sit amet consectetuer adipiscing elit.

Line
There are some methods of adding a seperating element into your text. For example you can add a line that goes all the way thru the text. This is a great possibility when you dont know how wide a page will be. It gives a way better impression than using multiple dashes or asterisks.

Please notice, this outdated way of writing it! Lorem ipsum dolor sit amet consectetuer adipiscing elit.<hr>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.
Use this instead: Lorem ipsum dolor sit amet consectetuer adipiscing elit.<hr />Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.

Lorem ipsum dolor sit amet consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.


Linebreak
This simply creates a line break in your text as would hitting enter do. dA allows manual line breaks and if you want to have a better overview over what you write, just use enter instead of code.

Please notice, this outdated way of writing it! Lorem ipsum dolor sit amet consectetuer adipiscing elit.<br>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.
Use this instead: Lorem ipsum dolor sit amet consectetuer adipiscing elit.<br />Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.

Lorem ipsum dolor sit amet consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.


Headlines
dA offers you a variety of headlines to use in your literature submission. As you will notice, a headline is not necessarily bigger than the rest of your text. The smaller the number of the headline, the bigger the fontsize. (This works pretty much like DIN formats.)
Headlines add space above and below their setting as well. <h2> even adds an indent.


<h1>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h1>

Lorem ipsum dolor sit amet consectetuer adipiscing elit.




<h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>

Lorem ipsum dolor sit amet consectetuer adipiscing elit.




<h3>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h3>

Lorem ipsum dolor sit amet consectetuer adipiscing elit.




<h4>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h4>

Lorem ipsum dolor sit amet consectetuer adipiscing elit.




<h5>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h5>

Lorem ipsum dolor sit amet consectetuer adipiscing elit.



<h6>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h6>

Lorem ipsum dolor sit amet consectetuer adipiscing elit.



List Element
One or more list elements on their own may look weird. But if you only have one point, that you want to stand out, you can use it as simple as you can see below. A list element will always have indentation.

<li>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</li>

  • Lorem ipsum dolor sit amet consectetuer adipiscing elit.



Unordered List
This will give you a list with bullet points. You will have to use 2 html elements to create this: <ul>…</ul> and <li>…</li>. A list will always have indentation.

<ul><li>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</li><li>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</li><li>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</li></ul>

  • Lorem ipsum dolor sit amet consectetuer adipiscing elit.
  • Lorem ipsum dolor sit amet consectetuer adipiscing elit.
  • Lorem ipsum dolor sit amet consectetuer adipiscing elit.



Ordered List
This will give you a list with numbers. You will have to use 2 html elements to create this: <ol>…</ol> and <li>…</li>. A list will always have indentation.

<ol><li>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</li><li>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</li><li>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</li></ol>

  1. Lorem ipsum dolor sit amet consectetuer adipiscing elit.
  2. Lorem ipsum dolor sit amet consectetuer adipiscing elit.
  3. Lorem ipsum dolor sit amet consectetuer adipiscing elit.


Paragraph
This creates a bigger line break in your text. You can do so manually by hitting enter twice, which i recommend when wanting to keep more readybility to your undedited text.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.</p> Aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.

Aliquam erat volutpat.


Subscript
Moves a part of your text downwards and decreases the font size.

Lorem ipsum <sub>dolor sit amet</sub> consectetuer adipiscing elit.

Lorem ipsum dolor sit amet consectetuer adipiscing elit.


Superscript
Moves a part of your text upwards and decreases the font size. This is a great tool to add annotations.

Lorem ipsum <sup>dolor sit amet</sup> consectetuer adipiscing elit<sup>2</sup>.

Lorem ipsum dolor sit amet consectetuer adipiscing elit2.


Underlined
Simply underlines your text. I'd be careful with this option, because you are publishin online and underlined text may give the impression of a link.

Lorem ipsum <u>dolor sit amet</u> consectetuer adipiscing elit.

Lorem ipsum dolor sit amet consectetuer adipiscing elit.



You can always combine these codes!
There is no limit as to how complicated you want your html to be ^^.

Lorem ipsum <b><u><em>dolor sit amet</em></u></b> consectetuer adipiscing elit.

Lorem ipsum dolor sit amet consectetuer adipiscing elit.


Don't forget to close your tags!
Or you will have a messed up submission.


Avoid html where possible.
Especially when it comes to line breaks or paragraphs, you may not need html at all.


Avoid blank spaces when possible!
If you want to have indentation, don't just hit the spacebar 10 times. Use a blockquote instead. It will give much cleaner results.

The same goes for seperators in your text. A html Line will look better than multiple dashes or underscores. It also adjusts to different screen resolutions!
I was writing a blog for #SixWordStories and was looking for tutorials on using html in literature submissions… but there was like nothin i could find :(
So, i decided to set this little tutorial up.

It basically shows you how to write in html and how it will look after submitting.
I added some information and some tips at the end :)

Most of these are avaiable in journal CSS or news articles as well.

Im hope this will be helpful :aww: :heart:
© 2011 - 2025 pica-ae
Comments113
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In
thanks for sharing useful information
html tutorial : welookups