HTML Tutorial for Beginning Users

HTML (Hypertext Markup Language) is the standard for creating web pages. It describes how browser components should be displayed and provides the structure and content of a webpage. We will go through the core concepts of HTML and introduce you to the most often-used HTML tags in this course.

In this tutorial, we’ll go through the most common HTML tags you’ll come across while working on web projects.

HTML Document Structure

Various tags are used to structure an HTML document. Let’s start with an HTML document’s basic structure:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title (Bachelor Exam)</title>
</head>
<body>
    <!-- Content goes here... Welcome in Code World -->

</body>
</html>

<!DOCTYPE html>: This declaration defines the document type and version as HTML5.
<html>: The root element of an HTML page.
<head>: Contains metadata and other important information about the document.
<title>: Defines the title of the webpage that appears in the browser’s title bar.
<body>: Contains the visible content of the webpage.

HTML Text Formatting

HTML provides tags for formatting and displaying text on a webpage:

<h1> to <h6>: Heading tags for creating headings of different sizes.
<p>: Defines a paragraph.
<strong>: Specifies strong importance for the enclosed text.
<em>: Represents emphasized text.
<u>: Underlines the enclosed text.
<s>: Renders the text with a strikethrough effect.
<br>: Inserts a line break.

HTML Links and Images

HTML allows you to include links and images in your webpages:

<a>: Creates a hyperlink to another webpage or resource.
<img>: Embeds an image in the document.

Example of an image tag:

<img src="/bachelor-exam-image.jpg" alt="Description of the image(code world)">
<a href="https://bachelorexam.com/">BachelorExam</a>

Lists

HTML provides two types of lists: ordered and unordered lists.

<ul>: Creates an unordered list.
<ol>: Creates an ordered list.
<li>: Defines a list item.

Example of an unordered list:

<ul>
    <li>Please</li>
    <li>Like</li>
    <li>Share</li>
    <li>And</li>
    <li>Subscribe</li>
</ul>

Tables

<table>: Represents a tabular data structure, consisting of rows (<tr>) and cells (<td>).
<tr>: Defines a table row.
<td>: Defines a table cell within a row.
<th>: defines a header cell in an HTML table

<table border="4px">
  <tr>
    <th>Like 👍</th>
    <th>Share 🙏</th>
    <th>Subscribe ❤️</th>
  </tr>
  <tr>
    <td>YES ❤️</td>
    <td>YES ❤️</td>
    <td>YES ❤️</td>
  </tr>
  <tr>
    <td>Yes ❤️</td>
    <td>Yes ❤️</td>
    <td>No 😭</td>
  </tr>
</table>

Forms

Forms are used to collect user input. HTML provides tags to create form elements:

<form>: Creates a form container.
<input>: Creates an input field.
<textarea>: Creates a multiline text input area.
<button>: Creates a button.
<label>: Defines a label for an input field.
<select>: Creates a dropdown menu.
<option>: Defines an option in a dropdown menu.

Example of a simple form:

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <button type="submit">Submit</button>
</form>

Divisions , Spans and other Separator

Divisions and spans are generic containers used for grouping and styling content:

<div> : Defines a division or a container.
<span> : Defines an inline container.
<header>: The beginning content of a page or section.
<nav>: This tag specifies a container for navigation links.
<footer>: Represents a page’s or section’s footer.
<section>: Defines a document’s solitary section.
<article>: A self-contained document, such as a blog post or news article.
<aside>: material that is only distantly related to the main material.
<iframe>: Inserts another HTML document inside the current one.

These tags are widely used to apply CSS styles to content or to change it using JavaScript.

Conclusion

Congratulations! You’ve learned about some of the most often used HTML tags in web development. You can use these tags to create basic web pages and start working on your projects.

Keep in mind that HTML is just the beginning. CSS (Cascading Style Sheets) and JavaScript will assist you in improving the appearance and functionality of your webpages.

Continue to practice and experiment with HTML, and you’ll be a web design pro in no time!

Please feel free to change and expand on this tutorial as you see fit. Have fun with coding!