Skip to main content

4. HTML Paragraphs

HTML Paragraphs Overview


We already had an introduction about HTML Paragraphs. This lesson will just give us an overview of paragraphs and we'll get a little bit more into details about how paragraphs work.

A paragraph element is defined as follows;
<p>content</p>

HTML Paragraph Exercises;

Imagine the following scenario
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra urna nec porta porttitor. Integer
lobortis mattis iaculis. Suspendisse nec fringilla ex. Curabitur urna erat, ullamcorper non nisl ac, varius egestas
tortor. Donec in orci

sapien. Proin interdum libero risus, nec ornare eros mattis nec. Quisque sed tristique est, nec molestie 
diam. Fusce in velit vel turpis faucibus accumsan nec non neque. Curabitur ac consequat diam. Donec et mauris
quis est lobortis feugiat

quis nec leo. Integer vulputate, mauris molestie lobortis posuere, augue nunc vestibulum mauris, nec
vehicula quam enim nec mi. Pellentesque pretium volutpat dolor nec tempus. Proin imperdiet velit ut nisl 
egestas egestas. Fusce at lorem efficitur,

eleifend diam et, maximus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>

The content will not be displayed in the same order as we have it outlined above in code. To be able to display it like that, we'd need to use line break element or <br>. Also please note that even if you place a lot of spaces between the words the web browser will still remove these extra spaces automatically.

HTML Paragraph

HTML Elements - Nested elements


Another thing to keep in mind is nesting of elements like in the example.
<p><img src="http://website.com/assets/images/image-1400x933-23.jpg" alt="website.com" width="204" 
height="142">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra urna nec porta porttitor. Integer

<br>lobortis mattis iaculis. Suspendisse nec fringilla ex. Curabitur urna erat, ullamcorper non nisl ac, varius egestas tortor. Donec in orci

<br> sapien. Proin interdum libero risus, nec ornare eros mattis nec. Quisque sed tristique est, nec molestie diam. Fusce in velit vel turpis 
faucibus accumsan nec non neque. Curabitur ac consequat diam. Donec et mauris quis est lobortis feugiat

<br> quis nec leo. Integer vulputate, mauris molestie lobortis posuere, augue nunc vestibulum mauris, nec <br>vehicula quam enim nec 
mi. Pellentesque pretium volutpat dolor nec tempus. Proin imperdiet velit ut nisl <br>egestas egestas. Fusce

at lorem efficitur,<br> eleifend diam et, maximus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>

If you notice here we have a main element paragraph <p> then we have embedded the image <img> element then the line break <br> element. This is a powerful feature and later on we'll be taking advantage of it.

Nested HTML Elements

Pre-defined content <pre>


Imagine that we have a paragraph as follows.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra urna
nec porta porttitor. Integer lobortis mattis iaculis. Suspendisse nec fringilla ex. 
Curabitur urna erat, ullamcorper non nisl ac, varius egestas tortor. Donec in orci</p>

Take a look at the many spaces that we have kept between the words of the content. If we run it as a paragraph then the web browser will eliminate the extra spaces and will keep only one space between the words.

If we want to keep the extra spacing in the subject format then we'd need to use another HTML element or the <pre> element.
 Example" ><pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra urna 
nec porta porttitor. Integer lobortis mattis iaculis. Suspendisse nec fringilla ex. 
Curabitur urna erat, ullamcorper non nisl ac, varius egestas tortor. Donec in orci</pre>

Pre-defined content <pre>

Take a look at this point. We have kept the extra spacing and format of the text by using the <pre> element. You can run the HTML Paragraphs.html file for that purpose

Comments

Post a Comment

Popular posts from this blog

GraphQL with React: The Complete Developers Guide

GraphQL with React: The Complete GraphQL Developers Guide Learn and master GraphQL by building real web apps with React and Node What Will I Learn? Build amazing single page applications with React JS and GraphQL Master fundamental concepts behind structuring GraphQL servers Realize the power of building flexible data schemas Be the engineer who explains how GraphQL works to everyone else, because you know the fundamentals so well Become fluent in the ecosystem supporting GraphQL, including the differences between Apollo and Relay Requirements Familiarity with React Description Note: This course assumes you are familiar with React ! If you're tired of spinning your wheels trying to figure out what type of backend server to use, this is the course for you. Authentication?  You will learn it.   Apollo Data?  Included.   Integration with React?  Of course! This GraphQL Developers Guide will get you up and running with Grap...
Post a Comment
Read more

Oracle DBA 11g/12c - Database Administration for Junior DBA

Oracle DBA 11g/12c - Database Administration for Junior DBA Learn to become an Oracle Database Administrator (DBA) in 6 weeks and get a well paid job as a Junior DBA What Will I Learn? Final Goal: Get a job as an Oracle Database Administrator (Oracle DBA) As a Oracle Database Administrator (Oracle DBA), you would be able understand the Database Architecture, which will help you to perform your DBA duties with better understanding. As a Oracle Database Administrator (Oracle DBA), you would be able to Install the necessary Oracle Software/Database As a Oracle Database Administrator (Oracle DBA), you would be able to Administer User accounts in the Database As a Oracle Database Administrator (Oracle DBA), you would be able to Manage Tablespace's to provide required space for the data As a Oracle Database Administrator (Oracle DBA), you would be able perform Backup and Recovery as needed. As a Oracle Database Administrator (Oracle DBA), you would be able to diagnose ...
1 comment
Read more

Docker Mastery: The Complete Toolset From a Docker Captain

Docker v17.09 Latest! Build, compose, deploy, and manage Docker containers from development to DevOps based Swarm clusters What Will I Learn? How to use Docker and Compose on your machine for better software building and testing. Build a fancy multi-node Swarm cluster for production deployments! Skills to build advanced development environments with your code running in containers. Update and change your Swarm Services without downtime using rolling updates. Hand's-on with best practices for making files and Compose files like a Pro! Experience using multi-host logging and event monitoring for Docker Swarm. Build and publish your own custom images. Understand the new Windows Containers, and try your hand at ARM Containers. Requirements No paid software required - Just install your favorite text editor and browser! Local admin access to install Docker for Mac/Windows/Linux. Understand terminal or command prompt basics. Li...
Post a Comment
Read more