HTML Tutorial #1: Indent The First Line Of A Paragraph And Hanging Indent

html.jpg

Have you ever wondered how to indent the first line of every paragraph on a WordPress.com blog? Or perhaps, you want your poem or reference list to have a hanging indent but you are unable to figure out how it’s done. While these can be easily done using CSS, not all WordPress.com plans let you use CSS. Fortunately, you can still do them with HTML.

The following tutorial will teach you how to do them in simple steps:

First Line Indent

First line indent refers to the indentation of the first line of a paragraph. In word processors, making a first line indent is a no-brainer as you only have to press the Tab button or adjust the indent using the “ruler”. However, you will find that using the Tab button doesn’t work on the WordPress.com. Pressing the space button multiple times doesn’t work either.

To do a first line indent on WordPress, first, you need to switch to the HTML editor:

3-21-2018 4-33-48 PM

Then, use the following HTML code:

<p style="margin-left:.-5in;text-indent:.5in;">YOUR TEXT HERE</p>

“YOUR TEXT HERE” is where you put your text. You can modify the size according to your preference. This is how it looks like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec consequat enim. Donec magna lorem, iaculis id imperdiet eu, luctus mattis quam. Morbi enim sapien, dictum ut nibh vel, vestibulum pulvinar turpis. Sed ante arcu, auctor sit amet malesuada a, lobortis et lorem.

Hanging Indent

Hanging indent is a negative indentation of the first line of a paragraph. So, this is like the opposite of first line indent. Hanging indent is mostly used for writing bibliographies, reference pages, and citations. Some use it in footnotes, scripts, dictionary entries, and poems with long lines. As hanging indent is essentially a reverse of first line indent, you can use the above HTML code with a little modification (in this case, the margin-left should be positive while text-indent should be negative):

<p style="margin-left:.5in;text-indent:.-5in;">YOUR TEXT HERE</p>

Here’s an example:

Phasellus nibh est, ultrices vel tempor non, fermentum eu velit. Maecenas egestas posuere elit, ac suscipit tortor feugiat a. Integer semper bibendum urna, nec cursus metus condimentum interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu lacus magna. Aliquam tincidunt vel mauris vel lacinia.

I personally don’t use them, but other readers may find these useful.

Advertisements

About Edmark M. Law

My name Edmark M. Law. I work as a freelance writer, mainly writing about science and mathematics. I am an ardent hobbyist. I like to read, solve puzzles, play chess, make origami and play basketball. In addition, I dabble in magic, particularly card magic and other sleight-of-hand type magic. I live in Hong Kong. I blog at learnfunfacts.com. You can find me on Twitter @EdmarkLaw and Facebook. My email is edmarklaw@learnfunfacts.com
This entry was posted in Miscellanea and tagged , , , , . Bookmark the permalink.

43 Responses to HTML Tutorial #1: Indent The First Line Of A Paragraph And Hanging Indent

  1. maomao says:

    Thank you for the tutorial. It’s helped.

    Like

  2. Reblogged this on Random Repeat.

    Like

  3. Cakù says:

    Can I ask ? Do you know how to hack Facebook pass using HTML? Because I lost my pass !! What? Can I do

    Like

  4. V.M.Sang says:

    Thanks. I would like to know more about HTML. I’ll look forward to further posts.

    Like

  5. Mia says:

    Thanks for the info! I’ve silently badmouthed WordPress at time or two because I couldn’t get a first line indent. 😉

    Liked by 1 person

  6. lindasschaub says:

    Very helpful and good to know. Thank you.

    Liked by 1 person

  7. Abigail says:

    So that’s how you indent a paragraph! When I started my blog a couple of months ago, I tried to create paragraphs in the old-fashioned MLA style, but found it easier to just format paragraphs by creating space between them, the WordPress preset. Being a student, it took some time to acclimate to breaking from MLA Times New Roman 12 point, but now I prefer my site arranged that
    way. Still, I appreciate the tutorial to create an indentation. It could come in handy in the future.

    Liked by 2 people

    • There are still some who prefer to indent the first line of a paragraph though first line indent is not that common online.

      I’ve used APA for quite some time so I’m accustomed with first line indent too. Nonetheless, I don’t use it for writing online since the less formatting that you have, the better. Some browsers could display your formatting in weird ways…

      Like

  8. This is very helpful, Edmark, thank you. Will you please post a tutorial on how to force lines to be single-spaced in WordPress? I hate that I can never make my poems look the way I want them to because WP automatically double-spaces every line. Thanks again!

    Liked by 3 people

  9. Peter Klopp says:

    Thank you! This was very useful indeed. Perhaps you can publish more of this kind in a future post. I will copy these two lines into my notebook.

    Liked by 2 people

  10. Jack Shalom says:

    Very useful. thank you, Edmark.

    Here’s another related issue that I don’t know how to solve, and which I would appreciate anyone’s advice.

    Sometimes I want to put an extra blank line in post (e.g. a line break in the stanzas of a poem) but WordPress seems to ignore the extra blank line, and prints it as if there were no extra blank line. Is there a way to fix that?

    Liked by 2 people

    • Glad you liked it.

      What do you mean by adding an extra blank line? Can you elaborate further? If I type a poem, e.g.

      aaaaaaaaaa
      bbbbbbbbb
      aaaaaaaaaa
      bbbbbbbbb

      ccccccccccc
      ddddddddd
      ccccccccccc
      ddddddddd

      I could add a blank space between two stanzas by pressing enter. I type poems on the HTML editor and so far, I haven’t encountered any problem.

      Liked by 1 person

  11. Terry Madeley says:

    That’s a very good tip, looks quite professional and seems easy to incorporate. I’m tempted to go back through my posts and adjust them.

    Liked by 2 people

  12. ivor20 says:

    Thank you Edmark for the tutorial, I had no idea how to do the “Indents”

    Liked by 3 people

  13. pendantry says:

    A great ‘first HTML’ article; gets the reader all fired up to try the technique straight away in a short time. Well done!

    Liked by 3 people

  14. masercot says:

    Chess, mathematics and now html… Is there anything you don’t know?

    Liked by 3 people

    • Hmm, that’s an interesting question. I know very little about a lot of unimportant things. The only consolation is that I know a lot more about math than my own good but even then, there are still many things for me to learn and I haven’t even scratched the surface…

      Liked by 2 people

  15. Initially I was reading this post in Reader and your examples don’t display properly there so I was confused. I thought I’d try clicking through to your blog proper, and there your examples were fine. That’s what puts me off doing much formatting – so much of it doesn’t display in Reader!

    Liked by 3 people

What's On Your Mind?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s