HTML Basic
HTML Entity
- HTML Entity
- HTML Alphabet Entity
- HTML Arrow Entity
- HTML Currency Entity
- HTML Math Entity
- HTML Number Entity
- HTML Punctuation Entity
- HTML Symbol Entity
HTML IndexedDB
HTML Reference
HTML Basic
Photo Credit to CodeToFun
Introduction
HTML (HyperText Markup Language) is the foundation of web development, used to structure content on the web. It allows you to create web pages by defining elements like headings, paragraphs, links, images, and more.
Understanding HTML is essential for anyone interested in web development, as it forms the backbone of every website.
What Is HTML?
HTML is a markup language used to create web pages. It uses tags to structure text, multimedia, and other elements on a page. HTML documents are interpreted by web browsers, which render the content for users to see.
Basic HTML Document Structure
An HTML document consists of elements that form the structure of a webpage. Here’s the basic layout:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
- <!DOCTYPE html>: Declares the document type as HTML5.
- <html>: The root element of the document.
- <head>: Contains meta-information like the title and links to stylesheets.
- <body>: Contains the content visible to users, such as text, images, and links.
HTML Elements and Tags
HTML uses tags to define elements. Most elements have an opening tag (e.g., <p>) and a closing tag (e.g., </p>). The content goes between the opening and closing tags.
Some elements, such as <img> and <br>, are self-closing and don’t require a closing tag.
Attributes in HTML
Attributes provide additional information about an element and are included in the opening tag. For example, the src attribute in an <img> tag specifies the image source:
- src: Specifies the URL of the image.
- alt: Provides alternative text for accessibility.
Common HTML Tags
Here are some common HTML tags you’ll use frequently:
Headings:
<h1> to <h6> for different heading levels.
HTMLCopied<h1>Main Heading</h1> <h2>Subheading</h2>
Paragraphs:
<p> for paragraphs of text.
HTMLCopied<p>This is a paragraph of text.</p>
Lists:
<ul> for unordered lists, <ol> for ordered lists, and <li> for list items.
HTMLCopied<ul> <li>Item 1</li> <li>Item 2</li> </ul>
Divisions and Spans:
<div>
for block-level elements,<span>
for inline elements.HTMLCopied<div>This is a block of content.</div> <span>This is inline text.</span>
HTML Links and Images
Links and images are integral to any web page. Use the <a>
tag to create hyperlinks and the <img>
tag to display images.
Link:
Creates a clickable link.
HTMLCopied<a href="https://example.com">Visit Example</a>
Image:
Embeds an image in the page.
HTMLCopied<img src="image.jpg" alt="An example image">
Best Practices
- Use Semantic HTML: Tags should represent their content meaningfully (e.g., use
<header>
,<footer>
,<article>
). - Validate Your HTML: Ensure that your HTML is properly structured by using tools like the W3C Markup Validator.
- Accessibility: Always provide alternative text (
alt
) for images and consider using ARIA roles for enhanced accessibility. - Keep it Clean: Use comments (
<!-- Comment -->
) and indentation for better readability and maintainability of your HTML code.
Example
Here’s a simple HTML example demonstrating the basic structure of a webpage:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a basic HTML example.</p>
<h2>Things I Like:</h2>
<ul>
<li>Coding</li>
<li>Web Development</li>
<li>Coffee</li>
</ul>
<p>Visit my <a href="https://example.com">website</a> for more information.</p>
</body>
</html>
Conclusion
HTML is the foundation of web development, providing the structure and layout for web pages. Mastering basic HTML tags and their attributes is the first step toward becoming a web developer. Once comfortable with HTML, you can dive deeper into styling with CSS and adding interactivity with JavaScript.
👨💻 Join our Community:
Author
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee