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

Posted by

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. You can find me on Twitter` and Facebook. My email is edmarklaw@learnfunfacts.com

44 thoughts on “HTML Tutorial #1: Indent The First Line Of A Paragraph And Hanging Indent

    1. HTML is used for designing the layout of web pages. It has nothing to do with hacking. For hacking, you use scripts and brute-force algorithms.

      But in your case, hacking seems to be overkill. Do you remember the email of your FB account? Did you associate your mobile number to your FB account? If you do, you can choose “Forgotten Password” and follow the instructions provided.

      If you can’t login to your email or you don’t have a mobile number associated to it, contact FB Support and explain your case to them. They’ll most likely help you out, though they may ask for documents to prove your identity like a national ID or passport.

      Like

  1. 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

    1. 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

  2. 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

  3. 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

    1. 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

      1. There’s not much that can be done about it. The WP reader tend to mess up formatting. For example, it doesn’t display the alignment of photos correctly most of the time. So, I’m not sure if it can be done.

        You could try to ask WP directly on their live chat support though. Their response time is pretty good.

        https://wordpress.com/help/contact

        Just type your question and wait for someone to answer.

        Liked by 1 person

    1. 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

  4. 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

      1. It may be a browser issue rather than a ‘Reader’ issue. I’m using Firefox, and can confirm that the indentations don’t render in the Reader.

        … but that’s good, encourages folk to always come visit blogs directly, I think (I always click ‘visit’ myself).

        Liked by 2 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 )

Connecting to %s