รู้จักและใช้แท็กพื้นฐานใน HTML

สวัสดีครับ บทนี้เรามาทำความรู้จักและวิธีการใช้งานแท็กพื้นฐานในภาษา HTML กันครับ ซึ่งแท็กพวกนี้เป็นแท็กพื้นฐานในภาษา HTML ควรที่จะรู้และจำไว้เพื่อให้ง่ายต่อการพัฒนาเว็บ เรามาดูกันเลยว่ามีอะไรบ้าง

Heading Tags

ส่วนมากเกือบทุกหน้าเว็บจะมีการขึ้นต้นหัวเรื่องของหน้านั้น ๆ ดังนั้นภาษา HTML จึงมีแท็กที่เป็นส่วนหัวมาให้ ซึ่งส่วนหัวนั้นก็มีตั้งแต่แท็ก h1 ถึง h6 นั่นก็คือเราสามารถใช้แท็ก Header เพื่อกำหนดหัวข้อใหญ่ และก็หัวข้อย่อย ๆ ของหัวใหญ่อีกทีได้

ตัวอย่างการใช้ Heading Tags

<!DOCTYPE html>
<html>
	<head>
		<title>How To Clicks</title>
	</head>
	<body>
		<h1>HTML Tutorial From www.howtoclicks.com</h1>

		<h1>This is heading 1</h1>
		<h2>This is heading 2</h2>
		<h3>This is heading 3</h3>
		<h4>This is heading 4</h4>
		<h5>This is heading 5</h5>
		<h6>This is heading 6</h6>
	</body>
</html>


Paragraph Tag

การที่เราจะแบ่งข้อความออกเป็น paragraph หรือย่อหน้าหนึ่ง ๆ นั้น ภาษา HTML ได้กำหนดให้แท็ก p เป็นการบอกว่าเป็นหนึ่งย่อหน้า

ตัวอย่างการใช้ Paragraph Tag

<!DOCTYPE html>
<html>
	<head>
		<title>How To Clicks</title>
	</head>
	<body>
		<h1>HTML Tutorial From www.howtoclicks.com</h1>

		<p>ย่อหน้าที่ 1(Here is a first paragraph of text.)</p>
		<p>ย่อหน้าที่ 2(Here is a second paragraph of text.)</p>
		<p>ย่อหน้าที่ 3(Here is a third paragraph of text.)</p>
	</body>
</html>


Line Break Tag

การจะขึ้นบรรทัดใหม่ในภาษา HTML นั้นจะใช้แท็ก br ในการขึ้นบรรทัดใหม่ ถ้าเราไม่ใช้แท็ก br ถึงในไฟล์เราจะขึ้นบรรทัดใหม่ยังไง มันก็จะไม่ขึ้นบรรทัดใหม่ให้

ตัวอย่างการใช้ Line Break Tag

<!DOCTYPE html>
<html>
	<head>
		<title>How To Clicks</title>
	</head>
	<body>
		<h1>HTML Tutorial From www.howtoclicks.com</h1>

		Hello
		My name is How to Clicks<br />
		Welcome to HTML Tutorial<br />
	</body>
</html>


Centering Content

การจะจัดองค์ประกอบ หรือส่วนต่าง ๆ ของเว็บให้อยู่ตรงกึ่งกลางนั้น จะใช้แท็ก center เพื่อบอกว่าสิ่งนั้นจะอยู่ตรงกลาง

ตัวอย่างการใช้ Centering Content

<!DOCTYPE html>
<html>
	<head>
		<title>How To Clicks</title>
	</head>
	<body>
		<h1>HTML Tutorial From www.howtoclicks.com</h1>

		<p>This text is not in the center.</p>
		<center>
		<p>This text is in the center.</p>
		</center>
	</body>
</html>


Horizontal Lines

ในการจะแบ่งข้อความให้แยกออกจากกันเรามักจะใช้แท็ก hr เป็นแท็กที่มีลักษณะเป็นเส้นกั้นยาว ๆ เอาไว้บอกให้รู้ว่า เป็นการแบ่ง

ตัวอย่างการใช้ Horizontal Lines

<!DOCTYPE html>
<html>
	<head>
		<title>How To Clicks</title>
	</head>
	<body>
		<h1>HTML Tutorial From www.howtoclicks.com</h1>

		<p>This is paragraph one and should be on top</p>
		<hr />
		<p>This is paragraph two and should be at bottom</p>
	</body>
</html>


Nonbreaking Spaces

ในภาษา HTML นั้นเวลาเราพิมพ์ข้อความแล้วอยากเว้นวรรคยาว ๆ ถ้าเราเว้นวรรคธรรมดานั้น ผลลัพธ์ที่ได้จะได้เพียงเว้นวรรคช่องเดียวเท่านั้น ถ้าเราอยากได้เว้นวรรคเยอะ ๆ ให้เราใช้ &nbsp; แทน

ตัวอย่างการใช้ Nonbreaking Spaces

<!DOCTYPE html>
<html>
	<head>
		<title>How To Clicks</title>
	</head>
	<body>
		<h1>HTML Tutorial From www.howtoclicks.com</h1>

		<p>Nonbreaking Spaces    Example  &nbsp; &nbsp;Nonbreaking Spaces &nbsp; &nbsp; Example</p>
	</body>
</html>


เป็นไงบ้างคับ สำหรับแท็กพื้นฐานในภาษา HTML เราควรรู้และจำไว้ให้แม่นเพื่อที่จะพัฒนาเว็บได้รวดเร็วและสะดวกยิ่งขึ้นครับ


วีดีโอสอนเพิ่มเติม