02. HTML structure: tags, attributes, and elements
Hello web-spiders! 😉 Welcome back to 2nd module of this series course. In this module, we discuss about structure of HTML.
Structure of HTML
The basic skeleton of every web page in HTML view, these three tags are essential for every web page over the internet:
<html>.....</html>
<head>......</head>
<body>.....</body>
Don't worry, later I will tell you which symbol is used and what is the purpose of that symbol, just read it carefully...
Tags in HTML
HTML tags are the building blocks of an HTML document. They are enclosed in angle brackets (<>) and define the structure and semantics of the content. Here are some key points to consider regarding HTML tags:
Opening and Closing Tags: Most HTML tags have an opening tag (<tag>) and a closing tag (</tag>). The content is placed between the opening and closing tags.
Nesting of Tags: HTML tags can be nested within each other to create a hierarchical structure. It's important to ensure proper nesting to maintain the document's integrity.
Common Tags: Some commonly used tags include <html>, <head>, <body>, <div>, <p>, <h1> to <h6>, <ul>, <ol>, <li>, <a>, <img>, etc.
HTML tags aren't case-sensitive, which means these all tags are the same
<html>,<hTML>,<HTML>,<HtmL>,<htmL>and many more...
Some common tags and their uses:
<html> is the first structure tag in the HTML page, which indicates that the content of this file is in HTML language.
<head> is a container for the tags that contain information about the page, rather than information that will be displayed on the page.
<body> is a tag that contains the information that will be displayed on the page. Assume that <body> is working opposite to the <head> tag.
<title> tag is used inside the <head> tag and the use of the <title> tag is to show the title of the page.
headings(<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) are the heading tags in decreasing level and used to display the heading in <body> tag.
<p> is also used in <body> same as heading tags but <p> displays the paragraph on the browser page.
Example for the tags
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h2>this is 2nd level heading tag. </h2>
<p>this is a pargraph tag.</p>
<p>
this is 2nd paragraph tag.
HTML (Hypertext Markup Language) serves as the foundation for building web pages. Understanding its structure is essential for creating well-structured and semantically meaningful web content. In this blog, we will explore the fundamental components of HTML, namely tags, attributes, and elements, and how they contribute to the overall structure of an HTML document.
</p>
</body>
</html>
Attributes in HTML
HTML attributes provide additional information about an element and are specified within the opening tag. Here are some key aspects to understand about HTML attributes:
Syntax: Attributes consist of a name and a value and are written within the opening tag of an element. For example, <a href="https://www.example.com">.
Common Attributes: Some commonly used attributes include
class,id,src,href,alt,style,width,height, etc. These attributes provide various functionalities and define the behavior and appearance of elements.
Some common attributes and their uses:
id attribute is used to uniquely identify an element on a webpage. It provides a way to target and manipulate specific elements using CSS or JavaScript.
class attribute is used to assign one or more class names to an element. The "class" attribute is primarily used for styling and selecting elements with CSS and JavaScript.
src attribute is used to import a source file in the tags to use in a web page.
alt attribute is used to show the text instead of an image that is not able to load on the web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title Preview</title>
</head>
<body>
<h1 id="heading">Hey, welcome back to Mr.Blog421 !</h1>
<p class="para">
HTML (Hypertext Markup Language) serves as the foundation for building web pages. Understanding its structure is essential for creating well-structured and semantically meaningful web content. In this blog, we will explore the fundamental components of HTML, namely tags, attributes, and elements, and how they contribute to the overall structure of an HTML document.
</p>
<img src="H:\HTML series course_Hashnode\html series course cover 1-10\2.png" alt="part2 course cover" width="300px" height="200px">
</body>
</html>
HTML Elements:
HTML elements are created by combining tags and attributes. An element encompasses the opening tag, closing tag, and any content within. Here's what you need to know about HTML elements:
Single Tags: Some tags, such as <img> and <br>, do not require a closing tag and are called self-closing or empty tags. For example, <img src="image.jpg" alt="Image">.
Block-level vs. Inline Elements: Elements like <div>, <p>, and <h1> to <h6> are block-level elements, which create block-level containers. Inline elements, like <span> and <a>, are displayed within the flow of text.
Semantic Elements: HTML5 introduced semantic elements like <header>, <nav>, <section>, <article>, <footer>, etc., which provide more descriptive meanings to the structure and content of a webpage.
Hurrah! You have completed this module of the series Web Design Fundamentals: An HTML Primer for Beginners ►►►Click here to go to the next part of this series
After successful completion of this series course, you'll earn a certificate