এখন mypage.html ফাইলটিতে আরো কিছু কোড যোগ করা হলো।
<!DOCTYPE html> <html> <head> <title>This is my first HTML page</title> </head> <body> Hello world! This is an html document. </body> </html>
এখন ফাইলটি সেভ করে ব্রাউজারে পেইজটি রিফ্রেশ করতে হবে। ব্রাউজারের রিফ্রেশ বা রিলোড বাটন চেপে কিংবা কিবোর্ডে F5 বাটন চেপে পেইজ রিফ্রেশ করা যায়। তাহলে দেখা যাবে উপরের কোডটি রান করলে দেখা যাবে বডির ভেতরের দুটি লাইন এক লাইনে দেখাচ্ছে। কোডে যদিও আলাদা আলাদা লাইনে লেখা হয়েছে।
তাহলে লেখাটি দুই লাইনে দেখানোর উপায় কী? সেক্ষেত্রে একটি নতুন এলিমেন্ট ব্যবহার করতে হবে যার নাম লাইন ব্রেক এলিমেন্ট (Line Break element) <br> । এটি একটি ফাঁকা বা এম্পটি এলিমেন্ট। এর কোনো ক্লোজিং বা শেষ ট্যাগ নেই।
<!DOCTYPE html> <html> <head> <title>This is my first HTML page</title> </head> <body> Hello world!<br> This is an HTML document. </body> </html>
এখন ফাইলটি সেভ করে ব্রাউজারে পেইজটি রিফ্রেশ করলে দেখা যাবে এবারে দুই লাইনে আলাদা করে লেখাটি দেখাচ্ছে।
আবার অনুচ্ছেদ ( প্যারাগ্রাফ ) লিখতে হলে <p> এলিমেন্ট ব্যবহার করতে হবে।
<!DOCTYPE html> <html> <head> <title>This is my first HTML page</title> </head> <body> Hello world!<br> <p>This is an HTML document. This is paragraph one. </p> <p> This is paragraph two.</p> </body> </html>
কোডটি সেভ কর ব্রাউজারে ওপেন করলে নিচের মত দেখাবে-
এখানে প্রথম ও দ্বিতীয় প্যারাগ্রাফ এর মধ্যে কিন্তু আলাদা করে লাইন ব্রেক (<br>) দিতে হয়নি। p এলিমেন্ট নিজেই একটি ফাঁক জায়গা তৈরি করে নিয়েছে। তবে চাইলে কোনো প্যারাগ্রাফের মধ্যেও লাইন ব্রেক দেওয়া যায়।
<!DOCTYPE html> <html> <body> <p>This is an HTML page. This is <br> paragraph one. </p> <p> This is paragraph two. </p> </body> </html>
লাইন ব্রেকের তুলনায় প্যারাগ্রাফ ব্রেকে ক্ষেত্রে একটু বেশি পরিমানে ফাঁকা জায়গা থাকে।
এছাড়া অনুভূমিক রেখা (horizontal line) আকার জন্য রয়েছে হরাইজন্টাল রুল এলিমেন্ট। একে <hr> দিয়ে প্রকাশ করা হয়। এটিও একটি ফাঁকা এলিমেন্ট।
<!DOCTYPE html> <html> <body> <p>This is an HTML page. This is paragraph one. </p> <hr><p> This is paragraph two. </p> </body> </html>
