The paragraph is a foundational structural element in HTML. In this video, author Chris Mattia walks you through the proper use of the paragraph tag and explains why in HTML this is a structural rather than a logical element.
- [Instructor] The paragraph element or p tag is used to physically structure blocks of text as they flow from one paragraph to the next in the storyline presented on your page. I have unit04.html open in my editor with live preview in my browser. To designate this line of text as a paragraph we wrap it with an opening and a closing p tag. Let's also wrap these other two blocks of text in the class discussion prep section and these two blocks of text in the reflection section as well.
In this movie, I want to focus in on how to think about what a paragraph is and what meaning you're able to convey about it to your learner. When you first learned to write, you were probably taught some variation of the standard definition of a paragraph as being a part of a composition usually containing one of more sentences that deals with one point or topic. In HTML, the p tag defines a physical or structural grouping of content within the flow of the page.
The paragraph element is structural in nature, rather than logical. To understand why this is, consider that when you write using a word processor, you're creating your document with a set physical destination, generally a sheet of paper of a particular size and shape. It's fixed. But with HTML, the same content is just as likely to be consumed in a browser on a mobile device as it is on a laptop. And those two destinations have very different screen sizes.
The content, therefore, needs to adapt to the size of the display. To go a step further, that printed document, remember it's fixed. Therefore, the learner must adapt to reading it with whatever size font and face you chose to use. But with HTML, the learner can make the content adapt to their needs by zooming in to make the text bigger and easier to read, or have the text read to them by their device's builtin text to speech tools during their commute to or from class.
In which case, the screen size doesn't matter at all. Therefore, when you're defining your paragraphs, consider how the content may be consumed. In this first paragraph, we tell the learner that there will be a guest lecture and we give them the title of their book. But this title is in Spanish, not English. Let's break that title out into its own physical paragraph by wrapping it in its own p tags. So I'll close the first open p tag, then hit Return a couple of times, and open a new p tag, and then tell the browser what language this paragraph is written in by adding the lang attribute and setting it equal to "es" for Spanish.
That way, if the student is having this content read to them by a screen reader, the title can be spoken with the correct pronunciations. So you can really hear the different, I'm going to copy this entire line of code and then paste another copy here. Then in the first line, we'll take out the language tag, and I'll add the text No Language Tag. And then add With Language Tag to the second one.
Then, I'm going to jump over to my Windows computer where I have the JAWS screen reader installed, so you can hear the difference in these two lines of text. Here's what the first line of text sounds like with no language tag. - [Screen Reader] No language tag colon. (speaks in foreign language) - [Instructor] Then I'll jump down to the second line. - [Screen Reader] Blank. - [Instructor] And play the one with the language tag. (screen reader speaks in foreign language) Could you hear the difference? Okay, I'm going to jump back over to my Mac, and we can look at one more thing.
Down here in the class discussion and reflection section, the second paragraph is an instruction to the learner. The way that it's written makes it a little difficult to read and see the separation between the instruction for what tags the students are required to use in the assignment and the instruction to create their own tags. You can handle this one of three ways. You could leave it as is. You could break the second line into a separate paragraph by adding a closing paragraph tag here and opening a new one on the next line creating these as two separate blocks of content, or if you come down to the reflection's example, you can insert a line break tag right here.
The line break tag is simply a <br> with no closing tag. Now you may be wondering how to set the tab stops, alignment, and line spacing for these paragraphs. Those are all controlled by CSS, and we'll look at that in a later chapter.
- Coding a site, a page, or parts
- Managing digital assets
- Formatting headings and paragraphs
- Creating links to pages
- Linking to a PDF or a Google Doc
- Inserting your own images into an LMS
- Embedding YouTube, Vimeo, and SoundCloud media
- Making pages responsive for mobile devices
- Working with CSS using web developer tools
- Overriding existing CSS
- Setting up your own domain
- Using FTP