-
Notifications
You must be signed in to change notification settings - Fork 0
Week 2_2(en): Semantics & Organization
Now let's learn to use tags that add semantic meaning or help organize our page!
Structural elements are elements that contain other elements and give additional semantic meaning or organization to parts of our web page.
Copy and paste the following code to your index.html file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Blog!</title>
</head>
<body>
<h1>My Blog</h1>
<p>Pura Vida!</p>
<h2>Seoul, the city for Tech Junkies</h2>
<p>Posted on July 14, 2018</p>
<img src="img/seoul.jpg" width="100%">
<p>
Digital addicts will be relieved to know they’ll never have to wait too long for their internet fix in South Korea. The country was judged to have the world’s fastest internet connection speed for the 12th consecutive quarter last year, according to Akamai - the content delivery network (CDN) responsible for serving between 15 and 30 per cent of all web traffic.
</p>
<p>3 Comments | 2 Likes</p>
<h2>Jejudo, South Korea's Hawaii</h2>
<p>Posted on July 16, 2018</p>
<p>
Jeju is the capital of an island, Jejudo, which might just be the most popular holiday destination you’ve never heard of. Unesco-listed, and billed as South Korea’s answer to Hawaii, it's pure Instagram gold, and home to dramatic volcanic landscapes, underground caves, hiking trails and scenic beaches. Halla Mountain, at 1,940m above sea level, is South Korea’s highest peak, while the cone of Seongsan Ilchulbong, or “Sunrise Peak”, is particularly spectacular.
</p>
<p>
The most crowded flight path on Earth is the 280-mile hop from Seoul to Jeju International. More than 26 million passengers use Jeju airport each year - that’s more than any UK airport bar Gatwick and Heathrow. There were a staggering 64,991 departures between these two airports in 2017 – that works out at around 178 a day.
</p>
<p>2 Comments | 5 Likes</p>
<p>© YURI Corp. </p>
</body>
</html>Try viewing it on the browser.
We can use semantic structural elements to add semantic meaning to chunks of the page.
The <article> tag is for a content that can stand on its own, without any other content on the page.
In our code, we can say we have two articles, each consisted of a title, date, text, and the number of comments and likes on the bottom of each article (metadata).
The <header> tag is used for headers.
In the case of our code, the title and slogan of our blog can be considered as the header of the whole page.
Also the article title and date have the semantic meaning of headers of each article, so they can be wrapped with <header> tags.
The <footer> tag is used for footers.
In the case of our code, the corporation name on the bottom can be considered as the footer of the whole page.
Also the metadata has the semantic meaning of a footer of each article, so they can be wrapped with <footer> tags.
Your code should look like this now.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Blog!</title>
</head>
<body>
<header>
<h1>My Blog</h1>
<p>Pura Vida!</p>
</header>
<article>
<header>
<h2>Seoul, the city for Tech Junkies</h2>
<p>Posted on July 14, 2018</p>
</header>
<img src="img/seoul.jpg" width="100%">
<p>
Digital addicts will be relieved to know they’ll never have to wait too long for their internet fix in South Korea. The country was judged to have the world’s fastest internet connection speed for the 12th consecutive quarter last year, according to Akamai - the content delivery network (CDN) responsible for serving between 15 and 30 per cent of all web traffic.
</p>
<footer>
<p>3 Comments | 2 Likes</p>
</footer>
</article>
<article>
<header>
<h2>Jejudo, South Korea's Hawaii</h2>
<p>Posted on July 16, 2018</p>
</header>
<p>
Jeju is the capital of an island, Jejudo, which might just be the most popular holiday destination you’ve never heard of. Unesco-listed, and billed as South Korea’s answer to Hawaii, it's pure Instagram gold, and home to dramatic volcanic landscapes, underground caves, hiking trails and scenic beaches. Halla Mountain, at 1,940m above sea level, is South Korea’s highest peak, while the cone of Seongsan Ilchulbong, or “Sunrise Peak”, is particularly spectacular.
</p>
<p>
The most crowded flight path on Earth is the 280-mile hop from Seoul to Jeju International. More than 26 million passengers use Jeju airport each year - that’s more than any UK airport bar Gatwick and Heathrow. There were a staggering 64,991 departures between these two airports in 2017 – that works out at around 178 a day.
</p>
<footer>
<p>2 Comments | 5 Likes</p>
</footer>
</article>
<footer>
<p>© YURI Corp. </p>
</footer>
</body>
</html>One page should contain only one header and one footer at its highest level.
Also, one chunk of code should have only one header and footer at its highest level.
You might not see changes in what you see in the browser now.
However, it is meaningful to add semantic structural elements to your code because
- You can easily recognize the whole logical structure of the page from the name of the elements.
- You can add style to your elements in a consistent way. (We will get to this in CSS!)
The <nav> tag is used for navigating through pages. In order to do this, let's make 2 more pages, each named about.html and memo.html.
Let's put the following code to each file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Blog!</title>
</head>
<body>
<header>
<h1>About me</h1>
<p>I will tell you about me.</p>
</header>
<h2>Yuri Kim</h2>
<p>
I am a student who loves HTML and CSS!<br/>
Welcome to my blog!
</p>
<footer>
<p>© YURI Corp. </p>
</footer>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Blog!</title>
</head>
<body>
<header>
<h1>Memos</h1>
<p>Some memos are written here.</p>
</header>
<article>
<header>
<h2>Things to do</h2>
<p>Posted on July 14, 2018</p>
</header>
<p>
<ul>
<li>Learn HTML</li>
<li>Learn Illustrator</li>
<li>Learn Photoshop</li>
</ul>
</article>
<article>
<header>
<h2>My favorite Movies</h2>
<p>Posted on July 16, 2018</p>
</header>
<p>
<ul>
<li>Good Will Hunting</li>
<li>Attila Marcel</li>
<li>Midnight in Paris</li>
</ul>
</p>
</article>
<footer>
<p>© YURI Corp. </p>
</footer>
</body>
</html>Now let's make a navigation bar using the <nav> tag on the top of index.html page.
<header>
<h1>My Blog</h1>
<p>Pura Vida!</p>
<nav>
<ul>
<li><a href='index.html'>Blog</a></li>
<li><a href='about.html'>About</a></li>
<li><a href='memo.html'>Memo</a></li>
</ul>
</nav>
</header>Let's add the same code to about.html and memo.html!
Now we can freely navigate through pages.
Non-semantic structural elements are structural elements that have no semantic meaning, but is used for organizing the page.
One of them is the <div> element.
The <div> element is is a block level element used to divide a page into chunks. Unlike <header>, <footer>, or <article>, the <div> tag does not have any meaning but just that it divides parts of the page.
When there is no semantic structural element to fit a job related to dividing the page into sections, we can use the <div> element for fallback.
Let's look at our index.html page. Where could we add the <div> tag?
The content of each article is inside <p> tags.
But we might want to add style to each article content in a consistent way.
To do this, we can use the <div> tag with the class attribute like below.
<header>
<h2>Seoul, the city for Tech Junkies</h2>
<p>Posted on July 14, 2018</p>
</header>
<div class="article-body">
<img src="img/seoul.jpg" width="100%">
<p>
Digital addicts will be relieved to know they’ll never have to wait too long for their internet fix in South Korea. The country was judged to have the world’s fastest internet connection speed for the 12th consecutive quarter last year, according to Akamai - the content delivery network (CDN) responsible for serving between 15 and 30 per cent of all web traffic.
</p>
</div>
<footer>
<p>3 Comments | 2 Likes</p>
</footer>
</article>
<article>
<header>
<h2>Jejudo, South Korea's Hawaii</h2>
<p>Posted on July 16, 2018</p>
</header>
<div class="article-body">
<p>
Jeju is the capital of an island, Jejudo, which might just be the most popular holiday destination you’ve never heard of. Unesco-listed, and billed as South Korea’s answer to Hawaii, it's pure Instagram gold, and home to dramatic volcanic landscapes, underground caves, hiking trails and scenic beaches. Halla Mountain, at 1,940m above sea level, is South Korea’s highest peak, while the cone of Seongsan Ilchulbong, or “Sunrise Peak”, is particularly spectacular.
</p>
<p>
The most crowded flight path on Earth is the 280-mile hop from Seoul to Jeju International. More than 26 million passengers use Jeju airport each year - that’s more than any UK airport bar Gatwick and Heathrow. There were a staggering 64,991 departures between these two airports in 2017 – that works out at around 178 a day.
</p>
</div>The value of the class attribute, "article-body" is a value that we created.
By making each article content have the same class value, we can later give style to each article content easily in the same way.
We can say that <div> is the non-semantic version of block level semantic elements like <header>, <footer>, and <article>.
<span> is the non-semantic version of in-line elements <strong> and <em>.
While <strong> adds the semantic meaning that the content is important, and <em> adds the meaning that the content needs to be emphasized, the <span> tag does not have any semantic meaning by itself.
Just like the <div> tag, by using the <span> tag with the class attribute, we can add style to some content in a consistent way.
For example, we can add the <span> tag like below.
<span class="south-korea">South Korea</span>