2.4 Basic Tags In a Webpage

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.


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.


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:


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.)
This is a screenshot of a tab on Google Chrome on MacOS. "Google" is the site's title.
Image Credit: Rebecca Dang (Screenshot)
This is a screenshot of a tab on Google Chrome on MacOS. "Google" is the site's title. Image Credit: Rebecca Dang (Screenshot)


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:


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


On line 8, you can see the p (paragraph) tags. This tells the browser that the content inside the tag is paragraph text.
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.