2.4 Basic Tags In a Webpage

2.4 Basic Tags In a Webpage <!DOCTYPE html><html><head><title><meta><body><p>

2.4 Basic Tags In a Webpage

So what HTML tags do you need to have to create the most basic, bare-bones website? Let's look at this example to find out.


<!DOCTYPE html>
<html>
	<head lang="en">
		<title>Basic Tags</title>
		<meta charset="utf-8">
	</head>
	<body>
		<p>This is some paragraph text</p>
	</body>
</html>

View this code on GitHub

Output of the above code:


This is some paragraph text

<!DOCTYPE html>

On line 1 we see that the DOCTYPE tag. This tells the browser that the document is reading in an HTML document. This should always go at the top of the document.

<html>

On line 1 and the last line (line 10), we can see that the start and end HTML tag. This tag encloses all of the code that is in HTML. You might be wondering why we even need this tag since the document's file extension is.html anyway. That is because there is also a script tag for writing JavaScript code on an HTML file and a style tag for writing CSS code on an HTML file. (This is called inline JavaScript and inline CSS.) As a result, it is important to differentiate between them with the HTML tag.

<head>

On lines 3 and 6 are the start and end head tags. It is used as a container element to store metadata (information about the website) that is put in between the HTML and body tags. You should always specify the value for the language attribute for the head tag. The value should be the correct language code. The code for English is "en". Here is a reference for language codes:

HTML Language Code Reference

You should always include the attribute inside the tag, to declare the language of the Web page. This is meant to assist search engines and browsers: In XHTML, the language is declared inside the tag as follows: ISO 639-1 defines abbreviations for languages: See also: Reference for Country Codes.

https://www.w3schools.com/tags/ref_language_codes.asp

<title>

On line 4 is the title tag. The content of inside of this tag is what displays as the site title(the text displayed on the tab of your web browser.)

<meta>

Online 5 is the meta tag, which is where you put metadata about the webpage. It's usually good practice to have at least 1 meta ta which provides a value for the charset(character set) attribute, which is typically UTF-8. UTF-8 is a character encoding scheme. You can read more about it here:

Character encodings for beginners

Intended audience: content authors, users, and anyone who is unsure about what a character encoding is, and wants a brief summary of how it affects them. What is a character encoding, and why should I care?

https://www.w3.org/International/questions/qa-what-is-encoding

<body>

On line 7 and 9, you can see the body tags. All of the content that appears on the website goes in this tag.

<p>

On line 8, you can see the p (paragraph) tags. This tells the browser that the content inside the tag is paragraph text.

Previous Section

3️⃣

2.3 HTML Comments

Next Section

5️⃣

2.5 Good HTML Style

⚖️

Copyright © 2021 Code 4 Tomorrow. All rights reserved. The code in this course is licensed under the MIT License. If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.