Scribd
Upload
5 views

html_syntax_explanation

Uploaded by

15 Rohit Potdar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

html_syntax_explanation

Uploaded by

15 Rohit Potdar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

HTML Syntax Explanation

HTML Boilerplate
**Format:**

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
</body>
</html>

**Use:**

The boilerplate structure serves as the foundation for an HTML document. It declares the
document type, sets the language, and includes the head and body sections.

Internal CSS
**Format:**

<style>
/* CSS Code here */
</style>

**Use:**

CSS is used to style HTML elements. Internal CSS allows you to apply styling directly within
the <style> tag inside the <head>.

Body Tag
**Format:**

<body>
Content here
</body>

**Use:**

The <body> tag contains all the visible content of the webpage, such as text, images, and
links.
Heading Tags
**Format:**

<h1>Heading 1</h1>
<h2>Heading 2</h2>

**Use:**

Headings are used to define section titles or headings in descending order of importance
(<h1> being the highest).

Paragraph Tag
**Format:**

<p>Text here</p>

**Use:**

The <p> tag is used to create blocks of text or paragraphs.

Anchor Tag
**Format:**

<a href="link">Text</a>

**Use:**

The <a> tag is used to create clickable hyperlinks that navigate to other sections or pages.

CSS Keyframes Animation


**Format:**

@keyframes move {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}

**Use:**

This creates an animated text marquee effect that scrolls continuously across the screen.

CSS Classes for Positioning


**Format:**

.side-menu {
position: fixed;
display: flex;
flex-direction: column;
}

**Use:**

CSS classes like `flex` and `fixed` are used to arrange elements and position them on the
page.

Image Tag
**Format:**

<img src="image-path.jpg" alt="description" width="200" height="200">

**Use:**

The <img> tag is used to display images on the webpage. The `src` attribute specifies the
image path, and the `alt` attribute provides alternative text.

Section Tag
**Format:**

<section>
<!-- Content here -->
</section>

**Use:**

The <section> tag groups related content together to improve structure and readability.

Form Tag
**Format:**

<form>
<label for="id">Label Text:</label>
<select id="id">
<option value="value1">Option 1</option>
</select>
</form>

**Use:**

Forms are used to collect user input. The <select> tag creates dropdown menus.

Table Tags
**Format:**

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

**Use:**

Tables organize data in rows and columns for better presentation.

Google Map Embed


**Format:**

<iframe src="Google Map URL" width="600" height="450" style="border:0;"


allowfullscreen="" loading="lazy"></iframe>

**Use:**

The <iframe> tag embeds Google Maps into the webpage, allowing users to locate the
business easily.

CSS Text Shadows and Animations


**Format:**

.main-heading {
text-shadow: 0 0 10px gold;
}

**Use:**

Text shadow and animations improve visual appeal by adding dynamic glowing or lighting
effects to text.

CSS Color and Background


**Format:**

body {
background-color: #f4f4f4;
color: #333;
}

**Use:**

CSS is used to apply colors and background properties for visual design.
Fixed Side Menu
**Format:**

<div class="side-menu">
<a href="#section">Section Name</a>
</div>

**Use:**

A fixed side navigation menu helps users navigate to different sections on the same page.

Div Containers
**Format:**

<div class="class-name">
Content here
</div>

**Use:**

The <div> tag acts as a container to group and organize content on the webpage.

You might also like