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. <h1> 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.
CSS Selectors
CSS Selectors are patterns used in CSS to select and target HTML elements so that styles can be applied to them. They define which elements on a web page should receive specific styling rules. Used to select HTML elements based on tag name, class, id, or attributes. Help apply styles like color, font, spacing, and layout. Make web pages structured, consistent, and visually appealing.
CSS selectors are commonly grouped into five main categories:
- Basic Selectors Basic selectors in CSS are simple tools used for selecting by HTML element name,class,ID or universally
- Universal Selector (*): Selects all elements on the page and applies the same style universally.
Example
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
- Element Selector: Targets all elements of a specific type, such as paragraphs or headers.
Example
header{
background-color: black;
}
- Class Selector (.): (TBD) Applies styles to elements with a specific class attribute.
Example
.right{
border: 1px solid red;
}
- ID Selector (#): Styles a single element identified by its unique id.
Example
<html>
<head>
<style>
#header {
background-color: gray;
}
</style>
</head>
<body>
<div id="header">This is the header section.</div>
</body>
</html>
- Combinator Selectors Used to define relationships between selectors, allowing you to style elements based on their hierarchy or positioning in the document.
- Descendant Selectors: (TBD) Targets an element inside another, such as paragraphs inside div .
Example: Styling paragraphs inside a div.
<html>
<head>
<style>
div p {
color: red;
}
</style>
</head>
<body>
<div>
<p>This paragraph inside a div will be red.</p>
</div>
</body>
</html>
- Child Selector (>):(TBD) They only affects the direct child elements of a parent.
Example: Styling direct children paragraphs of a div.
<html>
<head>
<style>
div>p {
margin-left: 20px;
}
</style>
</head>
<body>
<div>
<p>This is a direct child and has a left margin.</p>
<div>
<p>This is not a direct child.</p>
</div>
</div>
</body>
</html>
- Adjacent Sibling Selector (+): Styles an element immediately following another .
Example: Making the first paragraph bold after an h1.
<html>
<head>
<style>
h1+p {
font-weight: bold;
}
</style>
</head>
<body>
<h1>This is a header.</h1>
<p>This is immediately following the header and is bold.</p>
<p>This will not be bold.</p>
</body>
</html>
- General Sibling Selector (~): Styles all siblings that follow a specific element.
Example: Italicizing all paragraphs following an h1.
<html>
<head>
<style>
h1~p {
font-style: italic;
}
</style>
</head>
<body>
<h1>This is a header.</h1>
<p>This is a sibling of the header and will be italicized.</p>
<p>This will also be italicized because it's a sibling of the header.</p>
</body>
</html>
Top comments (0)