DEV Community

Vairavan
Vairavan

Posted on

HTML

#html #css #webdev #programming

HTML (HyperText Markup Language) is the standard language used to create web pages. Every website starts with HTML. It helps structure the content of a webpage such as headings, paragraphs, images, links, and more.

What is HTML?

HTML is not a programming language. It is a markup language used to organize and display content on a webpage.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>Welcome to HTML.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

HTML Document Structure

Every HTML page has a basic structure:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    Content goes here
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Explanation

<!DOCTYPE html> → Tells the browser this is an HTML5 document.
→ Root element of the webpage.
→ Contains page information.

→ Title shown in browser tab.<br> <body> → Visible content of the webpage.</p> <h2> <a name="headings" href="#headings" class="anchor"> </a> Headings </h2> <p><strong>HTML provides six heading tags.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><h1></span>Main Heading<span class="nt"></h1></span> <span class="nt"><h2></span>Sub Heading<span class="nt"></h2></span> <span class="nt"><h3></span>Smaller Heading<span class="nt"></h3></span> </code></pre></div> <p></p> <p><strong>h1 is the largest heading and h6 is the smallest.</strong></p> <h2> <a name="paragraph" href="#paragraph" class="anchor"> </a> Paragraph </h2> <p><strong>Paragraphs are created using the p tag.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><p></span>This is a paragraph.<span class="nt"></p></span> </code></pre></div> <p></p> <h2> <a name="links" href="#links" class="anchor"> </a> Links </h2> <p><strong>Links are created using the a tag.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span><span class="nt">></span>Visit Website<span class="nt"></a></span> </code></pre></div> <p></p> <p>The href attribute contains the destination URL.</p> <h2> <a name="images" href="#images" class="anchor"> </a> Images </h2> <p><strong>Images are added using the img tag.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><img</span> <span class="na">src=</span><span class="s">"image.jpg"</span> <span class="na">alt=</span><span class="s">"Sample Image"</span><span class="nt">></span> </code></pre></div> <p></p> <p>src → Image path.<br> alt → Alternative text if image fails to load.</p> <h2> <a name="lists" href="#lists" class="anchor"> </a> Lists </h2> <p><strong>Ordered List</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><ol></span> <span class="nt"><li></span>HTML<span class="nt"></li></span> <span class="nt"><li></span>CSS<span class="nt"></li></span> <span class="nt"><li></span>JavaScript<span class="nt"></li></span> <span class="nt"></ol></span> </code></pre></div> <p></p> <p><strong>Unordered List</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><ul></span> <span class="nt"><li></span>HTML<span class="nt"></li></span> <span class="nt"><li></span>CSS<span class="nt"></li></span> <span class="nt"><li></span>JavaScript<span class="nt"></li></span> <span class="nt"></ul></span> </code></pre></div> <p></p> <h2> <a name="buttons" href="#buttons" class="anchor"> </a> Buttons </h2> <p></p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><button></span>Click Me<span class="nt"></button></span> </code></pre></div> <p></p> <p><strong>Buttons allow users to interact with the webpage.</strong></p> <p>Buttons can perform different actions.<br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Click Me<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"reset"</span><span class="nt">></span>Reset<span class="nt"></button></span> </code></pre></div> <p></p> <p>button → General button<br> submit → Sends form data<br> reset → Clears form fields</p> <h2> <a name="forms" href="#forms" class="anchor"> </a> Forms </h2> <p><strong>Forms are used to collect user information.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><form></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Enter Name"</span><span class="nt">></span> <span class="nt"></form></span> </code></pre></div> <p></p> <p></p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><form></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span><span class="nt">></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit<span class="nt"></button></span> <span class="nt"></form></span> </code></pre></div> <p></p> <p><strong>Input Elements</strong></p> <p>Input elements allow users to enter data.<br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"number"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"date"</span><span class="nt">></span> </code></pre></div> <p></p> <p><strong>Common Types:</strong></p> <ol> <li>text</li> <li>email</li> <li>password</li> <li>number</li> <li>date</li> <li>checkbox</li> <li>radio</li> </ol> <h2> <a name="div-tag" href="#div-tag" class="anchor"> </a> Div Tag </h2> <p><strong>The div tag is a block-level container used to group HTML elements together. It helps organize the webpage structure.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><div></span> <span class="nt"><h1></span>Welcome<span class="nt"></h1></span> <span class="nt"><p></span>This is a div container.<span class="nt"></p></span> <span class="nt"></div></span> </code></pre></div> <p></p> <h2> <a name="span-tag" href="#span-tag" class="anchor"> </a> Span Tag </h2> <p><strong>The span tag is an inline container used to style or group small parts of text.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><p></span>Hello <span class="nt"><span></span>World<span class="nt"></span></p></span> </code></pre></div> <p></p> <h2> <a name="semantic-tags" href="#semantic-tags" class="anchor"> </a> Semantic Tags </h2> <p><strong>Semantic tags describe the meaning of the content.</strong></p> <p><strong>Semantic Tags</strong></p> <ul> <li>header</li> <li>nav</li> <li>section</li> <li>article</li> <li>footer </li> </ul> <div class="highlight"><pre class="highlight html"><code><span class="nt"><header></header></span> <span class="nt"><nav></nav></span> <span class="nt"><section></section></span> <span class="nt"><article></article></span> <span class="nt"><footer></footer></span> </code></pre></div> <p></p> <p><strong>Header Tag</strong></p> <p>The header tag represents the top section of a webpage.<br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><h1></span>My Website<span class="nt"></h1></span> <span class="nt"></header></span> </code></pre></div> <p></p> <p><strong>Footer Tag</strong></p> <p>The footer tag represents the bottom section of a webpage.<br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><footer></span> <span class="nt"><p></span>Copyright 2026<span class="nt"></p></span> <span class="nt"></footer></span> </code></pre></div> <p></p> <p><strong>Navigation Bar</strong></p> <p>The <nav> tag contains navigation links.<br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><nav></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Home<span class="nt"></a></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>About<span class="nt"></a></span> <span class="nt"></nav></span> </code></pre></div> <p></p> <p><strong>Section Tag</strong></p> <p>The section tag groups related content.<br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><section></span> <span class="nt"><h2></span>About Us<span class="nt"></h2></span> <span class="nt"><p></span>Information about the company.<span class="nt"></p></span> <span class="nt"></section></span> </code></pre></div> <p></p> <p><strong>Benefits:</strong></p> <ul> <li>This structure makes websites easier to understand</li> <li>Better readability</li> <li>Better SEO</li> <li>Better accessibility</li> </ul> <h2> <a name="tables" href="#tables" class="anchor"> </a> Tables </h2> <p><strong>Tables are used to display data in rows and columns.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><table></span> <span class="nt"><tr></span> <span class="nt"><th></span>Name<span class="nt"></th></span> <span class="nt"><th></span>Age<span class="nt"></th></span> <span class="nt"></tr></span> <span class="nt"><tr></span> <span class="nt"><td></span>Surya<span class="nt"></td></span> <span class="nt"><td></span>22<span class="nt"></td></span> <span class="nt"></tr></span> <span class="nt"></table></span> </code></pre></div> <p></p> <p><strong>Important table tags:</strong></p> <p><strong>Tag - Purpose</strong></p> <ul> <li>table-Creates a table</li> <li>tr-Table row</li> <li>th-Table heading</li> <li>td-Table data</li> <li>thead-Table header</li> <li>tbody-Table body</li> <li>tfoot-Table footer</li> </ul> <h2> <a name="common-attributes" href="#common-attributes" class="anchor"> </a> Common Attributes: </h2> <ul> <li>id</li> <li>class</li> <li>href</li> <li>src</li> <li>alt</li> <li>title</li> <li>style</li> </ul> <h2> <a name="id-attribute" href="#id-attribute" class="anchor"> </a> ID Attribute </h2> <p><strong>The id attribute uniquely identifies an element.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><h1</span> <span class="na">id=</span><span class="s">"title"</span><span class="nt">></span>Hello<span class="nt"></h1></span> </code></pre></div> <p></p> <p><strong>Rules:</strong></p> <ul> <li>Must be unique.</li> <li>One element should have one unique ID.</li> </ul> <h2> <a name="class-attribute" href="#class-attribute" class="anchor"> </a> Class Attribute </h2> <p><strong>The class attribute groups multiple elements.</strong><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text"</span><span class="nt">></span>Paragraph 1<span class="nt"></p></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text"</span><span class="nt">></span>Paragraph 2<span class="nt"></p></span> </code></pre></div> <p></p> <ul> <li>Multiple elements can share the same class.</li> </ul>

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.