In the previous two installments of Getting Started with HTML, I gave you a brief history of HTML and I showed you how to make a very basic web page to start off with. If you happened to miss part one and two you can always take a look here: HTML Tutorial Part 1, HTML Tutorial Part 2
To begin, let’s go ahead and open the website that you created in the previous blog up in notepad. Now no web page is complete without structural elements. Structural elements are the things that define the basic structure of the contents in your web page. There are 6 basic structural elements that any starting web page should have. The 6 basic structural elements are <body>, <header>, <section>, <article>, <aside>, and <footer>. Now all structural elements that aren’t the <body> are contained within the <body> tags.
Let’s start with adding the <header> tag into your web page. Inside the <header> section, you are going to add an introduction to your web page. Just like before make sure you add the opening and closing tags within the body section. Once you finish your page should look like this.
For now we’re going to leave the <header> section blank. Once we get into adding images into your web page, then we’ll add that image into the header section.
Right under the <header> goes the <section> tags. The <section> element marks where there is a major section on your web page. Once that is added to your page, the <article> elements goes inside of the <section> element. The <article> element contains content that will highlight specific areas of interest. With the <article> tag you can have as many as you want. For now, lets just add one. Your page should now look like this.
To finish with the structural elements, you are going to add an <aside>, which allows you to add extra content on the page in a sidebar, and a <footer>, which usually contains an address or summary information. Make sure to add these two elements after the closing </section> tag and your page will look like this.
Now that we’ve added all of the structural elements into your page, let’s go ahead and start adding some heading elements and structural elements.
We’ll start with the heading elements which will be inside the <header> section. Heading elements range from <h1> to <h6> and will vary in boldness and size. Now it’s important to note that the <h> tag should not be used to make your text bold or larger. Making text bold or larger can be done with other elements that we’ll use in a different session. Let’s add some of the <h> tags into the <header> section and see how they look on your actual web page. Here is an example.
Pick the heading that works for you and add the text that you want inside of it. I’m going to go with an <h1> heading and a simple “Welcome!” for now.
To end this session, we’ll go ahead and add some <p> tags. <p> tags are for paragraphs which need to be added into your web page in order to keep things in line and formatted correctly. Let’s go ahead and add a <h2> tag and a <p> tag into the <article> section. Your page should now look like this.
In part 4 I’ll show you how to add some more content elements as well as how to add images to your web page. – Toni
