Hi students,
This week, we are going to begin learning about the fundamentals of HTML programming. Our focus this week is Tags.
What are HTML Tags?
An HTML tag is a piece of markup language used to indicate the beginning and end of an element in a document.
As part of an HTML element, tags help web browsers convert HTML documents into web pages. For example, the <p> tag is used to organize text content into paragraph elements, and the <img> tag is used to embed image elements.
Many tags, though not all, use an opening tag and closing tag to wrap around the content that they are used to modify. Closing tags are denoted with a forward slash like this: </tag_name>. HTML tags are not visible in the browser.
The following diagram illustrates how tags are commonly used in HTML elements:
Let's dive deeper into the application!
HTML Tags
The basic structure of an HTML document includes tags, which which applies structure to content.
The purpose of HTML is to apply structure, not presentation. This means it will not look pretty YET.
HTML tags are hidden keywords within a web page that define how your web browser must format and display the content.
Headings are important for structuring the content of a webpage and are represented by the "h1" to "h6" tags, with "h1" being the most largest and "h6" the most smallest.
Formatting HTML Tags
Most tags must have two parts, an opening and closing part. For example:
<html> is the opening tag and </html> is the closing tag.
Note that the closing tag has the same text as the opening tag, but has an additional forward-slash(/) character.
However, there are some tags that are an exception to this rule (Meaning closing tag is not required).
Anatomy of an HTML Element
Always start with the open tag.
Each open tag element must have a closing tag.
The content is simply text, image, etc. you want to apply to the tag.
The element is the set of tags and the content.
Basic Tags
Each HTML file has the basic tags.
There are five sets of basic HTML tags:
<!DOCTYPE html>
<html></html>
<head></head>
<title></title>
<body></body>
The <hr> tag in HTML is used to create a horizontal rule, which is a line used to separate content on a webpage.
The <u> tag in HTML is used to underline text. It is used to draw attention to specific text and it is usually used to indicate that the text enclosed in it is important or relevant.
The <pre> tag in HTML is used to define preformatted text. It is used to preserve the original formatting of text, such as spaces and line breaks, when displaying it on a webpage.
<!DOCTYPE html> Tag
In every HTML document, you should start with the DOCTYPE declaration, which indicates the specific HTML version of your website. We will be using the <!DOCTYPE html which is for HTML5, the latest version of HTML.
<html> </html> Tags
HTML tags define the document as a web page. It also identifies the beginning and the end of the HTML document. All other tags must fall between the html tags.
<head> </head> Tags
Head tags contain information about the document that will not appear on the actual web page, such as the title of the document, the author, which stylesheet to use and also meta tags.
<title> </title> Tags
The title tag defines the title that will appear in the title bar of your web browser. The title must appear between the head tags.
<body> </body> Tags
Body tags contain all the information and other visible content on the web page. All your images, links, and plain text must go in between the body tags.
<p> </p> Tags
Paragraph tags are used to identify paragraphs of text.
<br> Tag (Line Break element)
Break tags are used to identify breaks between content displayed on the web page.
Break tags are an exception to the opening and closing tag rule, and do no need closing tags.
Overview of HTML Tags
You can watch the video below for a quick summary on HTML Tags!
Comments