write an indent text in html page

Question

I'm new to HTML and I want to show this text(except those red underlines) on my HTML page, I have studied all of the HTML tags and wrote this code. but still, it's not like the text :( if anyone could, please help me fix it.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h2>Brandning</h2>
  <p>
    <big>I build and activate brands through cultural insigh & strategic vision.</big>
  </p>
  <p>
    <big>See more products</big>
  </p>
  <footer>
    <p>© 2020 Cris. All rights reserved</p>
  </footer>
</body>

</html>

this a demo of text

Please note the big tag is obsolete and should not be used . Don't use HTML to style your document, that is the job of CSS (HTML does provide a foundation and play a part) — Jon P
– Jon P, Commented Oct 20, 2020 at 1:54
You could use the <pre></pre> tag for preformatted text, but HTML does not dictate style. Use CSS for that. You should know that one or more white spaces in HTML shows up as only a single white space. Whether the Browser takes that space off at the very begging of a tags textContent depends on the Browser. For this reason I actually do *{ font-size:0; } in CSS, then individually assign font-size more directly. You could indent like .indent{ margin-left:10px; } then just add class='indent' to your HTML tags. Just comments. — StackSlave
– StackSlave, Commented Oct 20, 2020 at 1:58

Halmon · Accepted Answer · 2020-10-20 01:40:41Z

1

If you want to add styling to the text, you'll need to use CSS on top of HTML. We can do this by adding a css file or using in-line styling like so:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div style="margin-left:50px;">
    <h2>Brandning</h2>
    <p>
      <big>I build and activate brands through cultural insigh & strategic vision.</big>
    </p>
    <p>
      <big>See more products</big>
    </p>
  </div>
  <footer>
    <p>© 2020 Cris. All rights reserved</p>
  </footer>
</body>
</html>

We created a div container and set the left margin to 50px which gives the text the indent you want

answered Oct 20, 2020 at 1:40

Halmon

1,0777 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Negin Ahmadi Over a year ago

thanks, i fixed it. and how about that sticked together title and content? when i execute my code, they are not sticked and have some distance

Halmon Over a year ago

You'll want to set the header margin to none <h2 style="margin:0px;">Brandning</h2>

Derek Wang · Accepted Answer · 2020-10-20 01:47:40Z

0

If you want to use only html, you can cover the indented texts using <blockquote> tag as follows.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <blockquote>
    <h2>Brandning</h2>
    <p>
      <big>I build and activate brands through cultural insigh & strategic vision.</big>
    </p>
    <p>
      <big>See more products</big>
    </p>
  </blockquote>
  <footer>
    <p>© 2020 Cris. All rights reserved</p>
  </footer>
</body>

</html>

answered Oct 20, 2020 at 1:47

Derek Wang

10.2k4 gold badges20 silver badges40 bronze badges

2 Comments

Negin Ahmadi Over a year ago

yes, i prefer use html for now, i tried it, thank u

Derek Wang Over a year ago

Can you pls approve my answer if that's what you were looking for?

Collectives™ on Stack Overflow

write an indent text in html page

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related