Hello, this is a paragraph and I am the writer. My name is Johan Levitt, people calls me Joh (Johan) in short and I have a hobby of creating cool stuffs on Web using dynamic web languages like Javascript, jQuery, PHP, etc.
(space)(space) Hello, this is a paragraph and I am the writer. My name is Johan Levitt, people calls me Joh (Johan) in short and I have a hobby of creating cool stuffs on Web using dynamic web languages like Javascript, jQuery, PHP, etc.
6 Answers 6
set the text-indent css property. E.g.
Use text-indent CSS property:
>
Hello, this is a paragraph and I am the > writer. My name is Johan Levitt, people calls me Joh (Johan) in short > and I have a hobby of creating cool stuffs on Web using dynamic web > languages like Javascript, jQuery, PHP, etc.
You should use a CSS class to indent the paragraph that you want to indent, using text-indent otherwise it could effect other paragraphs on the page, like so:
As others have answered, the text-indent property in CSS has been designed for such purposes. But most probably you also want to suppress default vertical spacing between paragraphs, since first-line indents are normally used instead of such separation, not in addition to it.
Assuming your all paragraphs have been marked as p elements, you can just add the following to your style sheet:
This adds an indent that equals the size of the font. That, or a little more, is common typographic practice. If you want an amount that equals two spaces, the value of 0.5em is a suitable approximation (the width of a space varies by font, 0.25em might be regarded as average).
It is common practice to omit the indentation after a heading, which you can achieve by adding
Practices differ on the use of indentation after a bulleted list, a table, etc. This is a design issue, but you should probably give it a thought when taking first-line indents into use. An extremistic, but not unrealistic, approach is to use first-line indent only when a paragraph appears after another paragraph; for this, you would only use the rule
The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block.
Try it
Horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element’s content box.
Syntax
/* values */ text-indent: 3mm;text-indent: 40px;/* value relative to the containing block width */text-indent: 15%;/* Keyword values */text-indent: 5em each-line;text-indent: 5em hanging;text-indent: 5em hanging each-line;/* Global values */text-indent: inherit;text-indent: initial;text-indent: revert;text-indent: revert-layer;text-indent: unset;
Values
Indentation affects the first line of the block container as well as each line after a forced line break, but does not affect lines after a soft wrap break.
Inverts which lines are indented. All lines except the first line will be indented.
Formal definition
Initial value
0
Applies to
block containers
Inherited
yes
Percentages
refer to the width of the containing block
Computed value
the percentage as specified or the absolute length, plus any keywords as specified
Animation type
a length, percentage or calc();
Formal syntax
Examples
Simple indent
HTML
p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. p>p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. p>
CSS
p text-indent: 5em;background: powderblue;>
Result
Skipping indentation on the first paragraph
A common typographic practice when paragraph indentation is present is to skip the indentation for the first paragraph. As the The Chicago Manual of Style puts it, «the first line of text following a subhead may begin flush left or be indented by the usual paragraph indention.»
Treating first paragraphs differently from subsequent paragraphs can be done using the adjacent sibling combinator, as in the following example:
HTML
h2>Lorem ipsumh2>p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu venenatis quam. Vivamus euismod eleifend metus vitae pharetra. In vel tempor metus. Donec dapibus feugiat euismod. Vivamus interdum tellus dolor. Vivamus blandit eros et imperdiet auctor. Mauris sapien nunc, condimentum a efficitur non, elementum ac sapien. Cras consequat turpis non augue ullamcorper, sit amet porttitor dui interdum. p>p> Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in, tincidunt mattis ex. Praesent venenatis orci at sagittis eleifend. Nulla facilisi. In feugiat vehicula magna iaculis vehicula. Nulla suscipit tempor odio a semper. Donec vitae dapibus ipsum. Donec libero purus, convallis eu efficitur id, pulvinar elementum diam. Maecenas mollis blandit placerat. Ut gravida pellentesque nunc, in eleifend ante convallis sit amet. p>h2>Donec ullamcorper elit nislh2>p> Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce tempor in ante gravida iaculis. Integer posuere tempor metus. Vestibulum lacinia, nunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit vestibulum nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vulputate leo ut iaculis ultrices. Cras egestas rhoncus lorem. Nunc blandit tempus lectus, rutrum hendrerit orci eleifend id. Ut at quam velit. p>p> Aenean rutrum tempor ligula, at luctus ligula auctor vestibulum. Sed sollicitudin velit in leo fringilla sollicitudin. Proin eu gravida arcu. Nam iaculis malesuada massa, eget aliquet turpis sagittis sed. Sed mollis tellus ac dui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan libero, sed euismod ipsum ullamcorper sed. p>
When you are building out HTML files, it’s really important to indent your code. But how do you do that in HTML and why is it important?
In this article, I will show you how to properly indent your HTML files and explain why it is important to properly format your code.
How to Indent Your Code in HTML
Whenever you have HTML elements nested inside other HTML elements, it’s best to use indentation. Nested elements are known as children of their parent element.
In this example, I have a p element nested inside a div element. To indent the p element, I will move it two spaces to the right.
This is what indentation looks like for HTML
This is considered best practice and will make your code more readable by other developers. Now we can see that the p element is nested inside its parent element which is the div .
In this next example, I have an h2 and p element nested inside a main element without indentation.
Let's learn about indentation
There is no indentation here
But if I edit the code by moving the h2 and p elements two spaces to the right, now we have proper indentation.
Let's learn about indentation
This is indentation
The h2 and p elements are children of the main element.
Commonly Used Examples of Indentation in HTML
Unordered lists
The li elements are indented two spaces to the right and nested inside the ul element. The ul element is the parent of the li elements.
Ordered lists
The li elements are indented two spaces to the right and nested inside the ol element. The ol element is the parent of the li elements.
Drive 1.2 miles and turn left on Cherry lane
Drive 4.5 miles and turn right on Sycamore Rd.
Drive 400 feet and stop at the light
Turn left at the light
Arrive at the destination on your right
Why is Indentation Important?
When you are writing code, it is important to write code that is readable by other developers. A large part of readability is properly indenting your HTML.
In this example, I have copied all of the code from the Learn HTML by Building a Cat Photo App project and removed all of the indentation to show you what poor code formatting looks like.
CatPhotoApp
Cat Photos
Click here to view more cat photos.
Cat Lists
Things cats love:
cat nip
laser pointers
lasagna
Cats love lasagna.
Top 3 things cats hate:
flea treatment
thunder
other cats
Cats hate other cats.
Cat Form
This is not good HTML practice at all because it is really difficult to read and understand what the code is doing. If you tried to submit something like this in a professional developer setting, your team would not be happy with you at all.
Now I am going to take that exact same code and properly indent it to show you the difference.
CatPhotoApp
Cat Photos
Click here to view more cat photos.
Cat Lists
Things cats love:
cat nip
laser pointers
lasagna
Cats love lasagna.
Top 3 things cats hate:
flea treatment
thunder
other cats
Cats hate other cats.
Cat Form
This is much easier to read and now we can see all of the nested child elements inside their parent elements and understand what the code is doing.
Conclusion
When writing HTML it is important to properly format your code using good indentation. You can indent elements by moving them two spaces to the right.
Let's learn about indentation
This is indentation
This will make your code more readable by other developers and shows the relationship between the child and parent HTML elements.
I hope you enjoyed this article and best of luck on your developer journey.
The text-indent property specifies the indentation of the first line in a text-block.
Note: Negative values are allowed. The first line will be indented to the left if the value is negative.
Default value:
0
Inherited:
yes
Animatable:
yes. Read about animatable Try it
Version:
CSS1
JavaScript syntax:
object.style.textIndent=»50px» Try it
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
CSS Syntax
Property Values
Value
Description
Demo
length
Defines a fixed indentation in px, pt, cm, em, etc. Default value is 0. Read about length units
Demo ❯
%
Defines the indentation in % of the width of the parent element
Demo ❯
initial
Sets this property to its default value. Read about initial
inherit
Inherits this property from its parent element. Read about inherit
Related Pages
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
