9/26/24, 12:26 PM Revolutionizing the Job Market | NxtWave

HTML Cheat sheet-1

HTML Basics

Definition of HTML
HTML stands for HyperText Markup Language. It's the standard markup language used to create web pages. HTML describes the
structure of a web page semantically and originally included cues for the appearance of the document.

Heading Tags
HTML provides six levels of headings from <h1> to <h6>

<h2>Subheading</h2>

Paragraph Tag
The <p> element represents a paragraph of text, displayed as a block.

<p>Paragraph text here.</p>

Div Tag
The <div> element is a generic container for flow content, with no semantic meaning.

<div>Div content</div>

https://learning.ccbp.in/course?c_id=543d6b31-6c6e-4992-afbc-d99e327af4a5&s_id=5a8063d9-8a78-4d0a-9419-304c3ffb9f20&t_id=01ecb134-270a-48b3-96c9-6975c9522f65 1/6
9/26/24, 12:26 PM Revolutionizing the Job Market | NxtWave

Comments in HTML
HTML comments are used to explain and clarify code or to prevent execution

<!-- This is another comment -->

HTML Attributes
Global Attributes
Global attributes are attributes that can be applied to any HTML element.

<div id="container" class="main-content"></div> // id and class are global attributes.

id Attribute
The id attribute specifies a unique id for an HTML element.

<p id="paragraph1">This is a paragraph.</p>

class Attribute
The class attribute specifies one or more class names for an element.

<div class="box highlight"></div> // class attribute with multiple values.

style Attribute
The style attribute specifies an inline style for an element.

<span style="color: blue;">Blue text</span>

href Attribute
The href attribute specifies the URL of a link.

<a href="https://www.example.com">Visit Example</a>

https://learning.ccbp.in/course?c_id=543d6b31-6c6e-4992-afbc-d99e327af4a5&s_id=5a8063d9-8a78-4d0a-9419-304c3ffb9f20&t_id=01ecb134-270a-48b3-96c9-6975c9522f65 2/6
9/26/24, 12:26 PM Revolutionizing the Job Market | NxtWave

src Attribute
The src attribute specifies the URL of the media file or script.

<img src="image.jpg" alt="My Image">

alt Attribute
The alt attribute provides alternative information for an image.

<img src="image.jpg" alt="A description of the image">

title Attribute
The title attribute specifies extra information about an element.

<abbr title="Hypertext Markup Language">HTML</abbr>

HTML Layout

Semantic HTML
Semantic HTML uses elements with meaningful names to convey the purpose of the content.

<article>
<h1>Blog Post Title</h1>
<p>Blog post content...</p>
</article>

Header
The <header> element represents a container for introductory content or a set of navigational links.

https://learning.ccbp.in/course?c_id=543d6b31-6c6e-4992-afbc-d99e327af4a5&s_id=5a8063d9-8a78-4d0a-9419-304c3ffb9f20&t_id=01ecb134-270a-48b3-96c9-6975c9522f65 3/6
9/26/24, 12:26 PM Revolutionizing the Job Market | NxtWave

<header>
<h1>Website Title</h1>
<nav>...</nav>
</header>

Footer
The <footer> element defines a footer for a document or section, typically containing authorship or copyright information.

<footer>
<p>Copyright © 2023</p>
</footer>

Section
The <Section> element defines sections in a document, such as chapters, headers, footers, or any other sections.

<section>
<h2>Section Heading</h2>
<p>Section content...</p>
</section>

Aside
The <aside> element is used for content that is tangentially related to the content around it.

<aside>
<h4>Related Topics</h4>
<ul>
<li>Topic 1</li>
<li>Topic 2</li>

https://learning.ccbp.in/course?c_id=543d6b31-6c6e-4992-afbc-d99e327af4a5&s_id=5a8063d9-8a78-4d0a-9419-304c3ffb9f20&t_id=01ecb134-270a-48b3-96c9-6975c9522f65 4/6
9/26/24, 12:26 PM Revolutionizing the Job Market | NxtWave

</ul>
</aside>

HTML Lists

Ordered Lists
An ordered list is a sequence of items that are numbered, indicating a particular order.

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

Unordered Lists
An unordered list is a collection of items with no specific order, typically rendered with bullet points.

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

Definition List
A definition list is used to define terms and their corresponding definitions. It is typically rendered with terms followed by their
definitions.

<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>

https://learning.ccbp.in/course?c_id=543d6b31-6c6e-4992-afbc-d99e327af4a5&s_id=5a8063d9-8a78-4d0a-9419-304c3ffb9f20&t_id=01ecb134-270a-48b3-96c9-6975c9522f65 5/6
9/26/24, 12:26 PM Revolutionizing the Job Market | NxtWave

<dd>Definition 2</dd>
</dl>

https://learning.ccbp.in/course?c_id=543d6b31-6c6e-4992-afbc-d99e327af4a5&s_id=5a8063d9-8a78-4d0a-9419-304c3ffb9f20&t_id=01ecb134-270a-48b3-96c9-6975c9522f65 6/6