Intro to HTML Tags

Tags are the building blocks of webpages, as we saw in the previous article of this series on web development.

Each tag has its own meaning. Combined with other tags, we can obtain a variety of rich documents.

Each HTML tag is interpreted by the browser and can be displayed differently as needed using Cascading Style Sheets (CSS), instructions containing presentation rules, like the position of the tag, its color, its size, and so on.

Tags inserted in the body of the HTML document (inside the tag) will be visible by the reader. 

That’s how we manage to write text documents, for example.

Paragraphs are written inside

tags. 

Titles are described by a series of tags from h1 to h6 (the most important title will be header 1, the second most important will be header 2, and so on): 

<h1>This is the main title!</h1>

Images are inserted using the tag, links in-between and (a for anchor), unordered lists with

    , etc. There are many more tags to know to craft texts, but I will let you discover them yourself.

    These tags could be called “primitive” tags, because they have a meaning by themselves. There are seven other “composite” tags that are meant to wrap others, to organize the overall semantic structure of an HTML document and create advanced design layouts: header (the header of an article, a card, etc.), nav (navigation, typically a navigation bar), footer (at the bottom of a website, where you can find contact information), section, main (main part of a web document), article, and aside (additional information).

    You will also find generic tags that have no semantic meaning but can be used to design the document: for textual data, and

    for block-level design.

    Using all the previously mentioned tags, a webpage might look like this:

    <!DOCTYPE html>
<html>
  <head>
    <title>A webpage</title>
  </head>
  <body>
    <header>
        <h1>A title</h1>
    </header>
    <nav>
        <a href="/">Home</a>
        <a href="https://twitter.com/BasileSamel">Twitter</a>
    </nav>
    <main>
        <div>
            <article>
                <p>This is an article paragraph</p>
                <img src="picture.jpg"/>
            </article>
            <article>
                <p>This is a second article</p>
                <img src="picture2.jpg"/>
            </article>
        </div>
    </main>
    <footer>
        <p>© Basile Samel, 2020</p>
    </footer>
  </body>
</html>