What are HTML Tags?
HTML documents consist of a series of elements, and these elements are defined using HTML tags. HTML tags are essential building blocks that define the structure and content of a webpage.
HTML tags are composed of an opening tag, content, and a closing tag. The opening tag marks the beginning of an element, and the closing tag marks the end. The content is the information or structure that falls between the opening and closing tags.
For Example:
<h1>Hello</h1>
HTML Elements
HTML elements are the essential components of a webpage and provide structure, organization, and meaning to content. Elements are defined by HTML tags which define how different types of content will appear in a browser window.
For Example:
<p>This is an element. </p>
Block-Level Elements
A page’s entire width is occupied by a block-level element. The document always begins with a new line. An HTML page generally has three tags i.e., <html>, <head>, and <body> tag.
Example: The following is an unordered list, an example of block-level elements.
- List item 1
- List item 2
Inline Elements
A block-level element’s inner content can be formatted with an inline element by adding links and stressed strings. These elements help you to format text without disrupting the content’s flow.
Example: The following code creates a hyperlink to a URL. It is an inline element because it is used within paragraphs, headings, or other text content to create hyperlinks. It does not disrupt the flow of the document by forcing new lines before or after its content.
<a href="https://www.example.com">Visit Example</a>
CSS Properties
CSS properties are used to decorate your web page and assign a unique behavior to your HTML element. CSS properties are the foundation of web design, used to style and control the behaviour of HTML elements. They define how elements look and interact on a webpage.
- Used to control layout, colors, fonts, spacing, and animations on web pages.
- It is essential for making web pages responsive and accessible across devices.
- Help maintain consistency and efficiency in web design and development.
For Examples:
background-color- Set the background color of an element.
border- This is used to style the border of an element.
Example Source Code of a Portfolio
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1{
text-align:center;
color: white;
margin-bottom: 15px;
padding: 5px;
}
a{
margin-right: 15px;
text-decoration: none;
margin-right: 20px;
color: white;
}
header{
background-color: black;
}
nav{
text-align: center;
}
section{
width: 65%;
margin: auto;
margin-top: 20px;
padding: 20px;
background-color: bisque;
border-radius: 20px;
margin-bottom: 30px;
}
ul{
margin-left: 25px;
}
footer{
text-align: center;
background-color: black;
color: white;
padding: 20px;
margin-top: 200px;
}
</style>
</head>
<body>
<header>
<h1>Raghul Narayaanan S</h1>
<nav>
<a href="">About me</a>
<a href="">Project</a>
<a href="">Contact</a>
<a href="">Login Page</a>
</nav>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</header>
<section>
<h2>About Me</h2>
<p>I am a web developer passionate about building beautiful and functional websites.</p>
</section>
<section>
<h2>Projects</h2>
<ul>
<li>Portfolio Website</li>
<li>Landing Page</li>
<li>Blog Template</li>
</ul>
</section>
<section>
<h2>Contact</h2>
<p>Email: sraghul1006@gmail.com</p>
</section>
<footer>
<p>@ 2026 Raghul</p>
</footer>
</body>
</html>
HTML Tags Explanation
<!DOCTYPE>- Defines the document type. It tells the web browser that this document is written in HTML5 so the browser renders the page correctly.
<html>- The root element. It wraps all the content on the entire page.
<head>- The machine-readable container. It holds metadata (data about data) that isn't directly shown to the website visitors, such as styles, scripts, and character sets.
<body>- The content container. It contains all the visible content of your website (text, images, links, headers, footers, etc.) that users see and interact with.
<header>- A structural layout tag (semantic HTML). It represents introductory content, typically a group of introductory or navigational aids like logos, site names, or menus.
<h1> and <h2>- Heading elements. They define HTML headings.
is the most important (highest level) heading on the page, usually reserved for the main title, while <h2> is used for subheadings. We can use up to <h6>
<nav>- Navigation container (semantic HTML). It defines a block of navigation links, signaling to browsers and screen readers that this section contains primary site navigation.
<a>- Anchor (Link) element. It creates hyperlinks to other web pages, files, or locations within the same page. The href="" attribute is where you place the destination URL.
<meta>- Metadata element. It provides information about the HTML document. charset="UTF-8" ensures text characters display correctly. name="viewport" makes sure the website scales properly and looks good on mobile devices.
<title>- Document title. It sets the title of the web page, which appears in the browser’s title bar or tab, and is used by search engines.
<section>- Generic section element (semantic HTML). It groups related content together. In your code, you’ve used it beautifully to separate "About Me", "Projects", and "Contact".
<p>- Paragraph element. It marks a block of text as a standard paragraph.
<ul>- Unordered list. It defines a bulleted list of items.
<li>- List item. It is used inside lists (<ul> or <ol>) to define an individual item within that list.
<footer>- Footer container (semantic HTML). It represents the footer of a page or section, typically containing copyright notices, privacy policy links, or contact info.
Top comments (0)