Hi, I'm Dr. B and welcome to my digital composing instructional video series.
In this tutorial, I start the process of explaining some of the more semantically linked elements in HTML.
Specifically, I explain why semantic markup is important and then I'll show you how to semantically markup the text for an article.
Once you've opened up your HTML editor and have started a new HTML document, the next step in the process is to gather together the content we are going to be using in this tutorial.
To do so, go back to the HTML tutorial home page, find a link that says "click this link to access the text used in the following tutorials."
Scroll down to where it says semantic markup for articles, highlight that bit of content, copy it, and then head over to your HTML editor.
Once you've copied the content you're going to be using in this tutorial, the next step in the process is to add that content to our HTML document.
To do so, find the open and close body tag, give yourself a little bit of room, and then paste the content you copied into the space you just created.
Next, go ahead and save your file.
I'm going to call this one semantic1 and, as usual, I'm going to save it to my desktop for easy reference.
Next, I'm going to go ahead and give my HTML document a title.
Here, again, I'm going to call this Semantic One.
Next, we're going to add some block level elements to our content.
So we're going to go in and we're going to add an open and close h1 tag around where it says Semantic Markup for Articles.
I'm gonna have an h3 tag around where it says by.
I'm then going to add a paragraph tag around this first bit of content here and an open and closed paragraph tag around our second paragraph.
Next, I'm going to go ahead and replace [Your name here] with my name, you should, of course, include your name.
Alright, let's go ahead and save our work, head on over to our Internet browser, and then let's open up the file that we are working on.
As you can see, we've got some formatting here.
We've got our content marked up with block level elements and we're ready for the next step.
So, let's go ahead and go back to our HTML editor.
The next thing we have to do, then, is we need to add some semantic labels to the content we created.
We use semantic elements for two different reasons.
First, we use it to help the Internet browser understand what type of content is going to be presented when it loads a web page.
We also use it so that the people who markup content and the developers who add it to our web pages understand the type of content we're creating.
In this case, we're working with an article, so we're going to start with that specific HTML element.
So, up above where you have your h1 tag, go ahead and add an article tag.
At the end of your content, up above where the closed body tag is, go ahead and close out your article tag.
As you can see, we've basically labeled our entire content here as an article.
Articles are used, then, when you have standalone content that you can basically transfer around to different places, like if you're creating something that is going to be added to an RSS feed.
So, if we save this, go back to our Internet browser, and refresh your page, you can see nothing's really happened here.
However, when we look at the text, or when somebody reading your page looks at your code, they will know that this is an article.
Now, if we go back to our HTML editor, the next thing we want to add then is we want to differentiate our content of our article from our heading information.
So, underneath the open tag for article go ahead and put a header open tag and, then, under our h3 where we have our byline go ahead and close your header tag.
So, here, we basically said, inside our article this information here is our heading information.
It isn't part of our content, it's probably our article title and various information about the content that was to follow.
So, if we save our work, go back to our Internet browser, refresh our page, you can see, once again, nothing's changed.
But when someone reads our code, they can understand what the content is more effectively, which will help us out as we move forward.
In later tutorials, we are going to be using semantic markup to create page layouts for our documents.
We're going to do so by combining HTML with CSS. For now, however, just remember that when you're creating content for the Internet, it's always a good idea to semantically indicate what type of content you're building so that you and other people who read your code can understand what the content is that you developed.
That's it that brings us to the end of today's tutorial.
I hope you enjoyed today's tutorial and that you are enjoying building your own digital compositions.
As I always say, thank you for playing along and for trusting in the process.
Dr. B’s instructional video series is brought to you in cooperation with the Bacha Design Group.
For more information about the Bacha Design Group, or to view more tutorials, please visit us online at jeffbacha.com.