Semantic HTML


7 shares
what is semantic HTML
Sponsored Links

What is Semantic HTML?

Semantic tags are html elements that do the same thing as word meaning. For example; The <article> tag is a semantic element. Because the article refers to an article, and the <article> tag is really used to add an article element to your page. Briefly we can say HTML5 is a semantic HTML.

Elements like <span> and <div> work different from the meaning of the its title. Thus there is no similarity between their content and their title meanings.

HTML5 and Semantic Elements

It is possible to see the following HTML codes for different parts of the pages on lots ofwebsites;


< div id="nav" > < div id="header" >, < div id="footer" >

HTML5 allows you to define these parts of the pages as independent HTML5 elements, not like div elements. HTML5 has many elenmets;

< article >
 < header >
 < main >
 < mark >
 < nav >
 < section >
 < summary >
 < time >
 < aside >
 < details >
 < figcaption >
 < figure >
 < footer >

It shows on a page like;

<article>

It is preferred to create an independent and derived from the article for the newspaper. Typically, it is a preferred HTML5 element for creating article style elements such as blog or forum articles. Here is a code example for this element:

< article >  
< H1 > Alpinpon < / h1 >   < p > Alpinpon is an informative website 
< / article >


These codes will look like this in our browser: 


          Alpinpon

          Alpinpon is an informative website

<section>


With the section element content can be summarized thematically in groups. It is used to create a separate section on an html page that contains related content. An html page can have multiple

elements, hosting links, promoting the site, and hosting more content according to the designer's wishes. 


Here is a code example for this element:



< section >  
< H1 > Alpinpon < / h1 >   < p > Alpinpon is an informative website 
< / section >
These codes will look like this in our browser: 

Alpinpon

Alpinpon is an informative website

<header>

The < header > element is used to mark the header area of a section of meaning. It is also used for the head of the entire site and usually contains the company logo, slogan or menu.

Here is a code example for this element:

< header >  
< H1 > Alpinpon < / h1 >   < p > Alpinpon is an informative website 
< / header >
These codes will look like this in our browser: 


Alpinpon

Alpinpon is an informative website

<footer>

We use this element to describe the content that we will place at the bottom of your page. The < footer > element can have many elements, or we can use more than one element on a page.

The element usually contains content such as information about the page's author, copyright information, site usage conditions, and so on.

Here is a code example for this element:

< footer >
< p >by: Alper Tufan< /p >
< p >Contact: < a href="mailto:aalpertufan@gmail.com" >
aalpertufan@gmail.com< /a > < /p >< /footer >

These codes will look like this in our browser: 

by: Alper Tufan
Contact:
aalpertufan@gmail.com

<nav>

The < nav > element identifies navigation elements. For example: Menu sections of a site.

Here is a code example for this element:

< nav >
< a href="#" >Informative< /a > | < a href="#" >Helath< /a > | < a href="#" >Scientific < /a > | < a href="#" >Technology< /a >
< /nav >

These codes will look like this in our browser: 

Informative | Health | Scientific | Technology

<aside>

It is used for  a content that does not count as the main content of a page. We can use to create content at the edge of our page or give information about something. For example, < aside > can be used to set up a sidebar on the site.

Here is a code example for this element:

< p >I had a decent job in Miami < /p>
< aside >
<  h4 >Miami < /h4 >
< p >Miami has lots of possibilities to find a job < /p >
< /aside>

These codes will look like this in our browser: 

I had a decent job in Miami

<figure> and <figcaption>

It is responsible for the images and the images of the titles above / below shown. 

Here is a code example for this element:

< figure >
< img src="a_picture.jpg" alt="the logo of alpinpon" width="304" height="228" >
< figcaption >This is the logo of Alpinpon< /figcaption >
< /figure >

These codes will look like this in our browser:

This is the logo of Alpinpon
 

Sponsored Links

Beğendin mi? Arkadaşlarınla Paylaş O Zaman!

7 shares

Sizin Tepkiniz Nedir?

Funny Funny
26
Funny
I like that I like that
31
I like that
Dislike Dislike
20
Dislike
OMG OMG
16
OMG
alpinpon

0 Comments

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir