Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is markup in HTML?
HTML (Hypertext Markup Language) is the foundational language that powers every web page on the internet. As a markup language, HTML provides structure and meaning to content by using special codes called tags to define how content should be displayed and organized in web browsers.
What is Markup Language?
A markup language is designed to annotate and structure text by providing additional context and organization. Unlike programming languages that execute instructions, markup languages describe how content should be formatted and presented. HTML uses markup to tell browsers how to interpret and display content
<p>This is a paragraph of text.</p> <h1>This is a heading</h1>
When a web browser encounters an HTML document, it reads the markup instructions and renders the content accordingly for users to view and interact with.
The Building Blocks of HTML Markup
HTML markup consists of elements represented by tags enclosed in angle brackets (< and >). Most HTML elements have an opening tag, content, and a closing tag
Basic Element Structure
<tagname>Content goes here</tagname>
Example
<!DOCTYPE html> <html> <head> <title>Basic HTML Structure</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <h1>Welcome to HTML</h1> <p>This is a paragraph with some text.</p> <a href="https://www.tutorialspoint.com">Visit TutorialsPoint</a> </body> </html>
The output shows structured content with heading, paragraph, and link
Welcome to HTML (large heading) This is a paragraph with some text. Visit TutorialsPoint (blue underlined link)
HTML Attributes
HTML elements can include attributes in the opening tag to provide additional information or modify behavior. Attributes are written as key-value pairs
<tagname attribute="value">Content</tagname>
Example
<!DOCTYPE html> <html> <head> <title>HTML Attributes</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <img src="/html/images/logo.png" alt="Logo" width="100" height="50"> <a href="https://www.example.com" target="_blank">Open in New Tab</a> <p id="intro" class="highlight">Paragraph with ID and class attributes.</p> </body> </html>
Structuring Content with HTML Markup
HTML provides essential elements for organizing content hierarchically and meaningfully
Headings and Text Structure
<!DOCTYPE html>
<html>
<head>
<title>Content Structure</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>A paragraph contains blocks of text content.</p>
<h3>Lists</h3>
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
</ol>
</body>
</html>
The output displays a clear hierarchy of headings, text, and lists
Main Heading (large, bold) Subheading (medium, bold) A paragraph contains blocks of text content. Lists (smaller heading) ? Unordered list item 1 ? Unordered list item 2 1. Ordered list item 1 2. Ordered list item 2
Tables and Links
<!DOCTYPE html>
<html>
<head>
<title>Tables and Links</title>
<style>
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<table>
<tr>
<th>Language</th>
<th>Type</th>
</tr>
<tr>
<td>HTML</td>
<td>Markup</td>
</tr>
<tr>
<td>CSS</td>
<td>Stylesheet</td>
</tr>
</table>
<p><a href="/html/">Learn more about HTML</a></p>
</body>
</html>
Semantic Markup for Accessibility and SEO
HTML5 introduced semantic elements that provide meaning and context beyond just presentation. These elements improve accessibility for screen readers and help search engines understand content structure.
Example Semantic HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>Semantic HTML</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<header>
<h1>Website Header</h1>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Main article content goes here.</p>
</article>
<section>
<h3>Section Heading</h3>
<p>Section content with related information.</p>
</section>
</main>
<aside>
<h4>Sidebar</h4>
<p>Additional information or advertisements.</p>
</aside>
<footer>
<p>© 2024 Website Footer</p>
</footer>
</body>
</html>
Key Semantic Elements
| Element | Purpose | Usage |
|---|---|---|
<header> |
Page or section header | Navigation, logos, introductory content |
<nav> |
Navigation links | Main menus, breadcrumbs, table of contents |
<main> |
Primary content area | The main content unique to the page |
<article> |
Self-contained content | Blog posts, news articles, forum posts |
<section> |
Thematic grouping | Chapters, tabbed content, content groups |
<aside> |
Tangentially related content | Sidebars, callouts, related links |
<footer> |
Page or section footer | Copyright, contact info, related links |
HTML and CSS Integration
HTML provides the structure while CSS (Cascading Style Sheets) controls the visual presentation. Together, they create engaging and well-designed websites.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML with CSS</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; background-color: #f5f5f5; }
.highlight { background-color: yellow; padding: 10px; border-radius: 5px; }
.blue-text { color: blue; font-weight: bold; }
</style>
</head>
<body>
<h1 class="blue-text">Styled with CSS</h1>
<p class="highlight">This paragraph has a yellow background applied via CSS.</p>
<p>Regular paragraph without special styling.</p>
</body>
</html>
1K+ Views
