HTML Basics — The 10 Concepts. HTML Hypertext markup language is the… | by readizo com | Medium

HTML-Hypertext Markup Language

1. Basic Structure Tags

<html> – Defines the HTML document
<head> – Contains metadata and links to resources
<title> – Sets the page title
<body> – Contains the content of the document

3. Links and Anchors

<a href="URL"> – Hyperlink
<nav> – Navigation links
<link> – External resources (e.g., CSS)

4. Lists

<ul> – Unordered list
<ol> – Ordered list
<li> – List item
<dl> – Description list
<dt> – Term (name in description list)
<dd> – Description (definition in list)

5. Tables

<table> – Table
<tr> – Table row
<th> – Table header cell
<td> – Table data cell
<thead> – Table head section
<tbody> – Table body section
<tfoot> – Table footer section
<caption> – Table title

6. Forms and Input Elements

<form> – Form container
<input> – Input field
<textarea> – Multiline text input
<label> – Label for form elements
<button> – Clickable button
<select> – Dropdown menu
<option> – Options in a dropdown
<fieldset> – Groups form elements
<legend> – Title for <fieldset>
<datalist> – Provides a list of predefined values
<optgroup> – Groups <option> elements

7. Media Elements

<img> – Image
<audio> – Audio file
<video> – Video file
<source> – Media source
<track> – Text tracks for media
<iframe> – Inline frame (embed content)
<embed> – Embed external content
<object> – Object container
<param> – Parameters for <object>

8. Semantic Elements

<header> – Header section
<footer> – Footer section
<main> – Main content
<section> – Section of a document
<article> – Standalone article
<aside> – Sidebar content
<figure> – Figure (image, illustration)
<figcaption> – Caption for <figure>
<time> – Time/date

9. Interactive Elements

<details> – Expandable details
<summary> – Summary of <details>
<dialog> – Modal dialog box
<progress> – Progress bar
<meter> – Measurement within a range

10. Scripting and Metadata

<script> – JavaScript code
<noscript> – Alternative content when JavaScript is disabled
<style> – Internal CSS styles
<meta> – Metadata (character set, viewport, etc.)
<base> – Base URL for links

HTML (HyperText Markup Language) is the foundation of a webpage, providing its structure and basic content. It serves as the first step in web development, allowing developers to organize elements, add text, images, and links. To enhance the webpage, CSS is used for styling and colors, while JavaScript adds interactivity, making the site functional and user-friendly.

Understanding HTML: The Blueprint of a Webpage

Imagine constructing a house. You start with a blueprint that defines the structure, walls, rooms, and windows. Similarly, HTML defines the layout and elements of a webpage, organizing content into meaningful sections.

At its core, an HTML document consists of:

<html> – The root element that encapsulates all content.
<head> – Contains metadata, styles, and external links.
<body> – Houses visible content like text, images, and links.

Essential HTML Tags and Elements

HTML consists of various tags, each serving a specific purpose. Here are some fundamental elements:

Structural Tags

<html>: The root of an HTML document.
<head>: Contains metadata and links to external resources.
<title>: Defines the page title.
<body>: Encloses all visible content.

Text Formatting Tags

<h1> to <h6>: Headings of different levels.
<p>: Paragraphs.
<strong> & <em>: Bold and italic text, respectively.
<br> & <hr>: Line break and horizontal rule.

List Elements

<ul> & <ol>: Unordered and ordered lists.
<li>: List items.

Links and Images

<a href="URL">: Creates hyperlinks.
<img src="image.jpg" alt="Description">: Displays images.

Tables and Forms

<table>, <tr>, <td>: Table structure.
<form>, <input>, <button>: User input elements.

Best Practices for Writing HTML

To ensure clean, readable, and efficient code, follow these best practices:

Properly Nest Elements – Just like organizing files in folders, HTML elements should be correctly nested to avoid confusion and ensure readability.
Use Meaningful Tags – Instead of <div> for everything, use <section>, <article>, and <aside> to improve semantics.
Keep It Accessible – Include alt text for images and use appropriate heading structures for better accessibility.

Visualizing HTML Structure

Labeled Diagram of an HTML Document

A structured HTML document includes:

Head section (title, meta, links)
Body section (content like text, images, and lists)
Footer section (contact info, copyrights, etc.)

Semantic vs. Non-Semantic Tags

Semantic Tags (e.g., <header>, <footer>, <article>) clearly define their purpose.
Non-Semantic Tags (e.g., <div>, <span>) are generic containers with no meaning.

Conclusion

HTML is the foundation of web development. It helps create websites that are accessible, user-friendly, and search engine-friendly.
HTML tags are the basic building blocks of HTML. They help define the structure, appearance, and functionality of a website.
HTML is made up of elements, tags, and attributes that work together to identify document parts and tell the browser how to display them.
HTML forms are containers for data entry elements like edit boxes, checkboxes, radio buttons, and more. When a user clicks the submit button, the data entered in these elements is sent to the server for processing.

#chaicode

Basics of HTML