HTML Basics #2: Block and Inline Level Elements

    In this article, we are going to talk about the basic structure of a typical HTML file. Let’s first revisit the example we talked about in the previous article.

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

    In this HTML document, the first line declares the DOCTYPE. This will inform the browser that the document being rendered is an HTML document. Then, there is an <html> element, which wraps around two other elements, <head>, and <body>.

    The <head> Element

    The <head> element is a container for metadata and is placed inside the <html> element and before the <body> tag.

    The <meta> Element

    The <meta> element is typically used to specify meta-information like the character set, page description, keywords, author of the document, and viewport settings. These information will not be displayed on the page, but are used by browsers and search engines.

    <meta charset="UTF-8">
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="John Doe">
    

    The <title> Element

    The <title> element defines the title of the document. It will be displayed on the page’s tab in the browser.

    The <style> Element

    The <style> element is used to define style information (CSS) for a single HTML page. We’ll talk about CSS later.

    <style>
      body {background-color: powderblue;}
      h1 {color: red;}
      p {color: blue;}
    </style>
    

    The <body> Element

    The <body> element is a container for all the other elements. It contains everything that will be displayed in the browser.

    There are two types of such elements. Block level elements and inline level elements.

    Block Level Elements

    As the name suggests, each block-level element defines a “block” in the web page. It always starts on a new line, and without CSS, it always takes up the full width available, and it always has a top and a bottom margin.

    Again, to not make this article too boring, the following table only consists of several most commonly used block-level elements. If you are interested, here is the complete list from W3Schools: https://www.w3schools.com/html/html_blocks.asp

    The <div> element is a non-semantic element, it does not have a specific meaning, which means it can be used to define any “block” in the web page.
    The <section> element defines a section in a document. A section is a group of content under the same topic. Typically, there are multiple sections in a single HTML document. For instance, a web page could be split into sections for introduction, content, and contact information.
    The <article> element specifies independent, self-contained content. An article should make sense on its own, and it should be possible to distribute it independently from the rest of the website, like a blog post, or a newspaper article.
    The <header> element represents a container for introductory content or a set of navigational links. The header of an HTML page usually contains the name of the website, a logo, a navigation bar, and maybe a short introduction of the website.
    The <footer> element defines a footer for a document or section, and as the name suggests, it is always at the bottom of a web page. A <footer> element typically contains copyright information, contact information, and sometimes a sitemap for the website.
    The <nav> element defines a set of navigation links, and sometimes a search button.
    The <aside> element defines some content aside from the content it is placed in (like a sidebar). The <aside> content should be indirectly related to the surrounding content, like a search bar, a signup form, and some related articles.

    With these block-level elements, we are able to design a basic layout for the HTML page like this:

    <body>
        <header>This is a header</header>
        <nav>
            <ul>
                <li><a>First Link</a></li>
                <li><a>Second Link</a></li>
                <li><a>Third Link</a></li>
            </ul>
        </nav>
    
        <div>
            <h2>This is the div block</h2>
            <p>This is the content of the div block</p>
        </div>
    
        <section>
            <h2>This is the section block</h2>
            <p>This is the content of the section block</p>
        </section>
    
        <article>
            <h2>This is the article block</h2>
            <p>This is the content of the article block</p>
        </article>
    
        <aside>This is a sidebar.</aside>
        <footer>This is a footer.</footer>
    </body>
    

    We’ll talk about how to make this layout more appealing when we discuss CSS in the future.

    Inline Level Elements

    Inline elements do not start on a new line, and they only take up as much width as necessary. The most commonly used inline element is <span>.

    The <span> element

    The <span> element is an inline container used to mark up a part of a text, or a part of a document. When used together with CSS, the <span> element can be used to style parts of the text.

    <p>This is a <span style="color:red;">paragraph</span>.</p>
    

    Besides <span>, the link element (<a>) and the formatting elements (<i>, <b>…) are also inline elements. To save us some time, I will not repeat all of them here.

    Last but not least, please note that a block-level element can contain multiple inline-level elements, but an inline element cannot contain a block-level element.

    Leave a Reply

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