HTML Basics #1: Elements and Attributes
source link: https://dev.to/ericnanhu/html-basics-1-elements-and-attributes-1995
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
You can download the source code for this tutorial here:
What is HTML
The HyperText Markup Language (HTML) is the most fundamental component of the web. It defines the structure and content of every web page. Generally, other technologies are used alongside, CSS, for example, can be used to describe the page's appearance, and JS can be used to define the web page's behavior and make it more interactive with the user. We will talk about these technologies in detail later.
Here is an example of a typical HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My HTML page</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Enter fullscreen mode
Exit fullscreen mode
Elements
Elements are the basic building blocks of an HTML file.
An HTML element is usually defined by a start tag and an end tag, and with some content in between like this:
<tag>Some content...</tag>
Enter fullscreen mode
Exit fullscreen mode
However, there are some exceptions, <hr>, for example, does not need content nor an end tag. It defines a horizontal rule on the web page, which usually indicates a thematic change between content.
The HTML elements are usually in a nested structure, which means one element can contain other elements like this:
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<div>
<p>This is also a paragraph.</p>
</div>
</body>
Enter fullscreen mode
Exit fullscreen mode
The <body> has three elements inside, a heading <h1>, a paragraph <p>, and a <div>. And the <div> element has another paragraph <p> inside.
The plot on the right side is how the structure tree looks like, and there is no limit on how long or how complex this tree could be. This is related to a very important concept in frontend development called the document object model (DOM).
With the DOM, we will be able to find and change any element in an HTML file. We will talk about this in detail later.
One other important note is that you should never escape the end tag (if it needs one). Sometimes the elements will display correctly, but you should never rely on that. It can cause unexpected consequences.
Attributes
Attributes provide additional information to the HTML elements. They are always specified in the start tag, and they usually come in name/value pairs like this:
<tag name="value">An Example</tag>
Enter fullscreen mode
Exit fullscreen mode
There are some important things you should notice before I give you some examples:
First, the attributes should always be in lower case. It is not a requirement, but it is highly recommended. XHTML, the strict version of HTML actually demands that.
Second, the value of the attributes should always be in quotes. It doesn't matter if you use single or double quotes, but they should always match.
Examples
Next, let's take a look at some examples. Please note that this is not a full list of all elements for HTML. That would make this article long and tedious. However, here is a full tutorial on HTML from w3schools: https://www.w3schools.com/html/html_intro.asp
Headings and Paragraphs
Headings define hierarchy and structure of the web page. HTML offers six different levels of heading, from <h1> to <h6>. <h1> is the most important heading and it should summarize your entire page content. Which is why there should only be one <h1> heading in the HTML file.
<body>
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
</body>
Enter fullscreen mode
Exit fullscreen mode
The output should look like this:
Paragraphs on the other hand are defined like this:
<p>This is a paragraph.</p>
<p>This is also a paragraph.</p>
Enter fullscreen mode
Exit fullscreen mode
For HTML, you cannot change how the paragraphs are displayed in the browser by adding extra spaces for extra lines in the code. They will be automatically removed by the browser. For instance, the following two paragraphs are exactly the same.
<p>This is a paragraph.</p>
<p>This is a
paragraph.</p>
Enter fullscreen mode
Exit fullscreen mode
However, now we have a problem, what happens if we do want a line break? The answer is simple, we use a <br> element:
<p>This is a <br> paragraph.</p>
Enter fullscreen mode
Exit fullscreen mode
The output is:
Formatting Elements
The formatting elements are a special collection of elements that give texts special meaning and appearance.
-
<b>- Bold text -
<strong>- Important text -
<i>- Italic text -
<em>- Emphasized text -
<mark>- Marked text -
<small>- Smaller text -
<del>- Deleted text -
<ins>- Inserted text -
<sub>- Subscript text -
<sup>- Superscript text
Let's see how each of them look like in the browser:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Vestibulum volutpat pretium turpis, sodales facilisis metus
porta a.</b> Morbi condimentum porta massa, eu mattis turpis cursus sit amet. <strong>cursus ut tellus a convallis. In nec
nisl nisl.</strong> Mauris a ligula et ligula malesuada luctus. <i>Fusce placerat id tortor at tristique.</i> Quisque non vulputate
eros. <em>Pellentesque malesuada interdum ligula, et dignissim arcu vestibulum tincidunt.</em></p>
<p><mark>Aliquam imperdiet volutpat lorem, in viverra lorem ultricies sed.</mark> Integer bibendum velit sit amet hendrerit
venenatis. <small>Suspendisse interdum ornare molestie.</small> Nulla porttitor venenatis purus eu sollicitudin. <del>In quis aliquet
ipsum. Curabitur eu feugiat sem.</del> Etiam rhoncus lectus eget dolor cursus, a viverra tellus faucibus. <ins>Nam aliquam
rhoncus urna.</ins> Vivamus pulvinar eleifend nibh quis semper. <sub>Sed finibus neque in</sub> sollicitudin cursus. <sup>Curabitur ut ex
</sup>egestas, suscipit lectus a, auctor ante.</p>
Enter fullscreen mode
Exit fullscreen mode
Links
Links are found on nearly all web pages. They allow users to click their way from page to page. When you click on a link, it takes you to another HTML file, and this simple action forms the foundation of the internet.
The links are defined as follows:
<a href="https://www.example.com/">link text</a>
Enter fullscreen mode
Exit fullscreen mode
By default, the browser will display an underlined text link text, and when you click on it, it will take you to https://www.example.com/.
The target Attribute
By default, when you click on a link, the target shows up in the same browser window/tab. You can change this with the target attribute.
-
_self- Default. Opens the document in the same window/tab as it was clicked -
_blank- Opens the document in a new window or tab -
_parent- Opens the document in the parent frame -
_top- Opens the document in the full body of the window
For example, the following link will take you to a new tab:
<a href="https://www.example.com/" target="_blank">link text</a>
Enter fullscreen mode
Exit fullscreen mode
Tables and Lists
In HTML, tables are defined using the <table> tag.
Each row is defined with a <tr> tag, and each data cell is defined with a <td> tag. If you want a header for the table, you need to use the <th> tag.
By default, the text in <td> elements are regular and left-aligned, and the text in <th> elements are bold and centered.
Here is an example:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Enter fullscreen mode
Exit fullscreen mode
This may look a little strange to you since this table is borderless. To add a border to this table we need a technology called the Cascading Style Sheets (CSS) like this:
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
Enter fullscreen mode
Exit fullscreen mode
We'll talk about CSS in the future.
Lists are also commonly used in web pages. They are defined with a <ul> tag, and each element in the list is defined with a <li> tag.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Enter fullscreen mode
Exit fullscreen mode
IDs and Classes
The IDs and classes are not HTML elements. They are two attributes that require our special attention.
ID is unique, it can only be used to identify one element in an HTML file. Class does not have to be unique, it is used to identify a group of elements in an HTML file.
One element can have both a class and an ID.
<h1 id="myHeader">Cities</h1>
<div class="city">
<h2 id="city1" class="city-title">London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2 id="city2" class="city-title">Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2 id="city3" class="city-title">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
Enter fullscreen mode
Exit fullscreen mode
When combined with technologies like CSS and JavaScript, these IDs and classes allow us to change the appearance and behavior of any part of our web page. And we will talk about both of them in detail in the future.
In the next article, we are going to talk about the basic file structure for a typical HTML document.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK