Introduction to HTML Basics
Embarking on the journey to master front-end technologies begins with a solid understanding of HTML. HTML (HyperText Markup Language) is the standard language for creating web pages. It uses tags to structure web content, making it easy to display text, images, links, and more. In this article we will cover fundamental concepts such as text formatting elements, entities, lists, tables, forms.Let’s dive into the basics of each topic with examples.
Basic HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic HTML Document</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a basic HTML document.</p>
</body>
</html>
Explanation
- <!DOCTYPE html>: Defines the document as HTML5.
- <html lang="en">: The root element. The lang attribute sets the language to English.
- <head>: Contains meta-information about the document.<meta charset="UTF-8">: Specifies the character encoding.<title>: Sets the title of the webpage
- .<body>: Contains the visible content.<h1>: A top-level heading.<p>: A paragraph of text
This basic structure is the foundation of every HTML document, providing a simple, organized way to create web pages.
Text Formatting Elements
HTML provides various elements to format text. These elements help in emphasizing parts of the text and making it more readable. Some of the key text formatting elements include:
- <h1> -- <h6>: Headings
- <p>: Paragraph
- <pre>: Preformatted text
- <strong>: Bold text
- <small>: Smaller text
- <del>: Strikethrough text
- <mark>: Highlighted text
- <span>: Inline container
- <sup>: Superscript text
- <sub>: Subscript text
- <q>: Short quotations
- <u>: Underlined text
<body>
<h1>Text Formatting</h1>
<p><strong>Bold text:</strong> This is bold.</p>
<p><em>Italic text:</em> This is italic.</p>
<p><u>Underlined text:</u> This is underlined.</p>
<p><del>Strikethrough text:</del> This text is deleted.</p>
<p><mark>Highlighted text:</mark> This text is highlighted.</p>
</body>
HTML Entities
HTML entities are used to display reserved characters, symbols, and special characters that cannot be typed directly. To check various entities, you can use this [HTML Entity Code Reference](https://entitycode.com/).
<body>
<h1>HTML Entities</h1>
<p>Less than (<): 5 < 10</p>
<p>Greater than (>): 10 > 5</p>
<p>Ampersand (&): AT&T</p>
<p>Quotation mark ("): "Hello World"</p>
<p>Apostrophe ('): It's mine</p>
</body>
Lists
Lists are a great way to organise information. There are several types of lists in HTML:
1. Ordered List <ol>
- Displays items in a sequential order (1, 2, 3, etc.).
- Can use different sequence values using the type attribute.
- Example: <ol type='A'> will use A, B, C, etc.
<body>
<h1>Ordered List Example</h1>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</body>
2. Unordered List <ul>
- Displays items with bullet points.
- Can change the bullet type using the type attribute.
- Example: <ul type='square'> will use square bullets.
领英推è
<body>
<h1>Unordered List Example</h1>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</body>
3. Definition List <dl>
- Used to create a list of terms and descriptions.
- Contains <dt> (definition term) and <dd> (definition description).
<body>
<h1>Definition List Example</h1>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>Programming language for web development</dd>
</dl>
</body>
4. Nested Lists:
- Lists inside lists.
<body>
<h1>Nested List Example</h1>
<ol type="I">
<li>First item
<ol type="A">
<li>First nested item</li>
<li>Second nested item</li>
</ol>
</li>
<li>Second item
<ol type="A">
<li>First nested item</li>
<li>Second nested item</li>
</ol>
</li>
<li>Third item</li>
</ol>
</body>
Explanation
- <ol type="I">: Defines the start of an ordered list with uppercase Roman numerals.
- <li>: Defines each list item within the ordered list.
- <ol type="A">: Defines the start of a nested ordered list with uppercase letters
Tables
Tables allow you to organize data into rows and columns, making it easy to compare and analyze. Key tags and attributes include:
- <table>: Defines the table.
- <tr>: Defines a table row.
- <th>: Defines a table heading.
- <td>: Defines table data.
- Attributes like border, height, width, cellpadding, cellspacing, and align.
<body>
<h1>Table Example</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Raj</td>
<td>24</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Priya</td>
<td>30</td>
<td>Delhi</td>
</tr>
</table>
</body>
Explanation
- <table border="1">: Defines the start of a table with a border.
- This example creates a simple table with three columns (Name, Age, City) and two rows of data with common Indian names (Raj and Priya).
Forms
Forms are used to collect user input and can contain various types of input elements like text fields, checkboxes, radio buttons, and submit buttons. Some common input types include text, number, submit, password, email, radio, and checkbox.
<body>
<h1>Form Example</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
Conclusion
We explored the basics of HTML, covering essential elements for text formatting, entities, lists, tables, forms. Mastering these foundational concepts will set the stage for more advanced HTML and CSS topics in the upcoming weeks. Keep practising and experimenting with these elements to build a strong foundation in front-end development. Happy coding!