Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In HTML, paragraphs are typically used to display text. Let's go ahead and make a working copy of paragraph.html and I'll rename this to paragraph-working.html and I am going to open it in my text editor. And I am going to go ahead and also open it in my browser. I'm using Firefox here. And I'm just going to move the browser over to the right side of the screen and drag the editor over here a little bit, so we can see both of these things at the same time.
I am going to go up here and I am going to turn on Soft Wrapping in my editor so that you can see this. So here we can see we have a couple of paragraphs down here and one of them is a little longer than the other one. And paragraphs are created with the p element. So you notice there is a begin tag and an end tag and the element is named p, just one letter p. And over here in the browser that's displaying as two separate paragraphs, one of them is there and one of them is there. And paragraphs are typically displayed with some blank space between them, of course that can all be modified using CSS.
The content of a paragraph is typically text, but it may also contain any inline content, for example, I could take the word formatted here and I could make it into a link. I am just going to put it on a separate line. I am going to type a href= and just an empty link at this point and close the a tag at the end there, and I am going to save that and come over here into the browser and reload it, and you see we get a little link there. And so that a element is considered inline content and so it's allowed inside a paragraph.
We'll discuss inline versus block content later in this chapter, but for now just understand that inline content is typically what goes in a paragraph. It's also possible to put text outside of a paragraph, so I can just come up here and I can say this is a paragraph of text. And many browsers will treat that very similar to an actual paragraph. This is not recommended. It's much easier to format text when it's within the paragraph element or another block element. I am going to go ahead and delete that and save it.
In previous versions of HTML, it was common to format paragraphs using
attributes on the tag.
tag.For example, I could say align="right" like that, and if I save that and reload it in the browser, you'll notice that this paragraph is now right-aligned and it's ragged on the left. And if I do this with the other paragraph instead you can see it a little bit easier because that one is a longer paragraph. So you can see we have that ragged left there and now this paragraph is ragged right because I took that out.
Now formatting paragraphs this way still works, of course because browsers are designed to accept legacy HTML, but it's not recommended and it's actually considered obsolete with the latest version of HTML. The better way to do this is with CSS. I am just going to show you this right now even though we'll cover CSS in a little more detail later on. If I say style= and I can say "text-align: right" like that, and if I save that and come over here to the browser and reload, see nothing changes.
It's still right-aligned. So CSS is a former, flexible, and consistent way to do this and we'll cover some basic CSS later in the course, or you can see my CSS for Developers course for more detail about CSS. So paragraphs are created with the p element. Using the p element, it's easy to create paragraphs and to format them using CSS.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104602 Viewers
56 Video lessons · 116518 Viewers
71 Video lessons · 85710 Viewers
131 Video lessons · 41016 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.