HTML LEARNING PATH
2.2 Identify HTML Elements
WHY
Without HTML elements, the web browser cannot display and tell the difference between content like text, navigation, links, images, and other structural elements.
An element in HTML represents a structural item in a web page. We have already seen the two elements <html> and <body> but web pages usually contain a few more. Think about how you want people to read your content online. Identify the elements of your content you are likely to share, like text, links, images, and other structural elements?
HOW
Let’s say, you visit a website and see a headline or paragraph.
The headline element<h1> and paragraph element <p> are rendered differently in the browser with their own structural meaning.
Code sample:
<!DOCTYPE html>
<html>
<head>
<title>My First Website!</title>
<meta charset="UTF-8">
</head>
<body>
<h1>This is the heading</h1>
<p>This is the paragraph content</p>
</body>
</html>
GLOSSARY
Elements in HTML can consists of a tag or attribute that describe the content.
Heading defined as <h1> is the main heading. Sub headings can be created with <h2>, <h3>, <h4>, <h5>, and <h6>.
Paragraph contains the text between <p> and<\/p>.
Declare the document type <!DOCTYPE html> on the first line to tell the browser this is a HTML document.
The Head <head> element contains additional information about the page.
The Title <title> element is displayed in the title bar at the top of your browser window.
TIPS AND RESOURCES
PRACTICE
Edit your webpage to the following code.
<!DOCTYPE html>
<html>
<head>
<title>My First Website!</title>
<meta charset="UTF-8">
</head>
<body>
<h1>This is the heading</h1>
<p>This is the paragraph content</p>
</body>
</html>
Save the index.html file you just edited. Refresh the web browser. You should see the heading “This is a Heading” and the paragraph text “This is the content of the paragraph element.” The headline element<h1> and paragraph element <p> are rendered differently in the browser with their own structural meaning.