HTML Basics #1: Elements and Attributes

    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>

    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>

    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>

    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>

    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.

    <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>

    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>

    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>

    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>

    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>

    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>

    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>

    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>

    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>

    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>

    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>

    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.

    Leave a Reply

    Your email address will not be published. Required fields are marked *