HTML (Hypertext Markup Language) is the standard markup language used for creating web pages. It provides a structure and a standardized way of adding content to web pages. In this tutorial, we’ll cover the basics of HTML.
Getting Started
To create an HTML document, you need a text editor. Popular text editors include Notepad, Sublime Text, and Visual Studio Code. You can also use online editors like CodePen or JSFiddle.
To create an HTML document, start by opening a new file in your text editor. Save the file with a .html extension. For example, index.html.
Basic HTML Structure
Every HTML document has a basic structure that includes the following elements:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>Here’s what each element does:
<!DOCTYPE html>: This declaration tells the browser that the document is an HTML5 document.<html>: This element is the root element of an HTML document.<head>: This element contains meta information about the document, such as the title, CSS stylesheets, and JavaScript files.<title>: This element sets the title of the document, which appears in the browser’s title bar.<body>: This element contains the visible content of the document.
Adding Content
HTML documents are made up of HTML tags. Tags are enclosed in angle brackets, like <tagname>. Tags come in pairs, with an opening tag and a closing tag. The closing tag has a forward slash before the tag name, like </tagname>.
Here are some basic HTML tags:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<a href="https://www.example.com">This is a link</a>
<img src="image.jpg" alt="Image description">Here’s what each tag does:
<h1>: This tag creates a heading. There are six levels of headings, from<h1>(the most important) to<h6>(the least important).<p>: This tag creates a paragraph.<a>: This tag creates a hyperlink. Thehrefattribute specifies the URL of the link.<img>: This tag inserts an image. Thesrcattribute specifies the URL of the image, and thealtattribute provides a text description of the image.
Adding Structure
HTML tags can be used to add structure to a document. For example, you can use the <header>, <nav>, <main>, <article>, <section>, and <footer> tags to create a semantic structure for your page.
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
<section>
<h2>Section Title</h2>
<p>Section content goes here.</p>
</section>
</main>
<footer>
<p>© 2023 My Website</p>
</footer>Here’s what each tag does:
<header>: This tag creates a header section.