Added semantic html tags

nikhiljohn10 · nikhiljohn10 · commit a9dbbf582e5e · 2020-12-02T01:22:30.000+05:30
diff --git a/en/css/README.md b/en/css/README.md
@@ -123,16 +123,16 @@ Your file should now look like this:
         <link rel="stylesheet" href="{% static 'css/blog.css' %}">
     </head>
     <body>
-        <div>
+        <header>
             <h1><a href="/">Django Girls Blog</a></h1>
-        </div>
+        </header>
 
         {% for post in posts %}
-            <div>
-                <p>published: {{ post.published_date }}</p>
+            <article>
+                <time>published: {{ post.published_date }}</time>
                 <h2><a href="">{{ post.title }}</a></h2>
                 <p>{{ post.text|linebreaksbr }}</p>
-            </div>
+            </article>
         {% endfor %}
     </body>
 </html>
@@ -181,26 +181,26 @@ Great!
 
 As mentioned above, CSS has a concept of classes. These allow you to name a part of the HTML code and apply styles only to this part, without affecting other parts. This can be super helpful! Maybe you have two divs that are doing something different (like your header and your post).  A class can help you make them look different.
 
-Go ahead and name some parts of the HTML code. Replace the `div` that contains your header with the following:
+Go ahead and name some parts of the HTML code. Replace the `header` that contains your header with the following:
 
 {% filename %}blog/templates/blog/post_list.html{% endfilename %}
 ```html
-<div class="page-header">
+<header class="page-header">
     <div class="container">
         <h1><a href="/">Django Girls Blog</a></h1>
     </div>
-</div>
+</header>
 ```
 
-And now add a class `post` to your `div` containing a blog post.
+And now add a class `post` to your `article` containing a blog post.
 
 {% filename %}blog/templates/blog/post_list.html{% endfilename %}
 ```html
-<div class="post">
-    <p>published: {{ post.published_date }}</p>
+<article class="post">
+    <time>published: {{ post.published_date }}</time>
     <h2><a href="">{{ post.title }}</a></h2>
     <p>{{ post.text|linebreaksbr }}</p>
-</div>
+</article>
 ```
 
 We will now add declaration blocks to different selectors. Selectors starting with `.` relate to classes. There are many great tutorials and explanations about CSS on the Web that can help you understand the following code. For now, copy and paste it into your `blog/static/css/blog.css` file:
@@ -232,7 +232,6 @@ h4 {
 
 .date {
     color: #828282;
-    float: right;
 }
 
 .save {
@@ -262,9 +261,9 @@ h4 {
     color: #000000;
 }
 
-.post .actions {
+.post > .date,
+.post > .actions {
     float: right;
-    margin: auto 10px;
 }
 
 .btn-default,
@@ -285,33 +284,33 @@ Then surround the HTML code which displays the posts with declarations of classe
 {% filename %}blog/templates/blog/post_list.html{% endfilename %}
 ```html
 {% for post in posts %}
-    <div class="post">
-        <p>published: {{ post.published_date }}</p>
+    <article class="post">
+        <time>published: {{ post.published_date }}</time>
         <h2><a href="">{{ post.title }}</a></h2>
         <p>{{ post.text|linebreaksbr }}</p>
-    </div>
+    </article>
 {% endfor %}
 ```
 
 in the `blog/templates/blog/post_list.html` with this:
 
 {% filename %}blog/templates/blog/post_list.html{% endfilename %}
 ```html
-<div class="content container">
+<main class="container">
     <div class="row">
         <div class="col">
             {% for post in posts %}
-                <div class="post">
-                    <div class="date">
+                <article class="post">
+                    <time class="date">
                         {{ post.published_date }}
-                    </div>
+                    </time>
                     <h2><a href="">{{ post.title }}</a></h2>
                     <p>{{ post.text|linebreaksbr }}</p>
-                </div>
+                </article>
             {% endfor %}
         </div>
     </div>
-</div>
+</main>
 ```
 
 Save those files and refresh your website.
diff --git a/en/django_forms/README.md b/en/django_forms/README.md
@@ -48,7 +48,7 @@ Before we add the link, we need some icons to use as buttons for the link. For t
 
 > Note: To download the SVG image, open the context menu on the link (usually by right-clicking on it) and select "Save link as". In the dialog asking you where to save the file, navigate to the `djangogirls` directory of your Django project, and within that to subdirectory `blog/templates/blog/icons/`, and save the file there.
 
-It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follow. In the `div` named `container` inside `page-header` `div` tag, we will add a link:
+It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follow. In the `div` tag inside `header` section, we will add a link before `h1` tag:
 
 {% filename %}blog/templates/blog/base.html{% endfilename %}
 ```html
@@ -75,22 +75,22 @@ After editing the line, your HTML file should now look like this:
         <link rel="stylesheet" href="{% static 'css/blog.css' %}">
     </head>
     <body>
-        <div class="page-header">
+        <header class="page-header">
             <div class="container">
                 <a href="{% url 'post_new' %}" class="top-menu">
                     {% include './icons/file-earmark-plus.svg' %}
                 </a>
                 <h1><a href="/">Django Girls Blog</a></h1>
             </div>
-        </div>
-        <div class="content container">
+        </header>
+        <main class="content container">
             <div class="row">
                 <div class="col">
                     {% block content %}
                     {% endblock %}
                 </div>
             </div>
-        </div>
+        </main>
     </body>
 </html>
 ```
@@ -285,15 +285,15 @@ Now we know how to add a new post. But what if we want to edit an existing one?
 
 First, let's save the icon which represents the edit button. Download [pencil-fill.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/pencil-fill.svg) and save it to the location `blog/templates/blog/icons/`.
 
-Open `blog/templates/blog/post_detail.html` in the code editor and add the line
+Open `blog/templates/blog/post_detail.html` in the code editor and add the following code inside `article` tag:
 
 {% filename %}blog/templates/blog/post_detail.html{% endfilename %}
 ```html
-<div class="actions">
+<aside class="actions">
     <a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}">
       {% include './icons/pencil-fill.svg' %}
     </a>
-</div>
+</aside>
 ```
 
 so that the template will look like this:
@@ -303,20 +303,20 @@ so that the template will look like this:
 {% extends 'blog/base.html' %}
 
 {% block content %}
-    <div class="post">
-        <div class="actions">
+    <article class="post">
+        <aside class="actions">
             <a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}">
                 {% include './icons/pencil-fill.svg' %}
             </a>
-        </div>
+        </aside>
         {% if post.published_date %}
-            <div class="date">
+            <time class="date">
                 {{ post.published_date }}
-            </div>
+            </time>
         {% endif %}
         <h2>{{ post.title }}</h2>
         <p>{{ post.text|linebreaksbr }}</p>
-    </div>
+    </article>
 {% endblock %}
 ```
 
@@ -380,7 +380,7 @@ If you need more information about Django forms, you should read the documentati
 
 Being able to create new posts by clicking a link is awesome! But right now, anyone who visits your site will be able to make a new blog post, and that's probably not something you want. Let's make it so the button shows up for you but not for anyone else.
 
-Open `blog/templates/blog/base.html` in the code editor, find our `container` `div` inside `page-header` `div` and the anchor tag you put in there earlier. It should look like this:
+Open `blog/templates/blog/base.html` in the code editor, find our `div` inside `header` and the anchor tag you put in there earlier. It should look like this:
 
 {% filename %}blog/templates/blog/base.html{% endfilename %}
 ```html
diff --git a/en/django_templates/README.md b/en/django_templates/README.md
@@ -47,16 +47,16 @@ It works! But we want the posts to be displayed like the static posts we created
 
 {% filename %}blog/templates/blog/post_list.html{% endfilename %}
 ```html
-<div>
+<header>
     <h1><a href="/">Django Girls Blog</a></h1>
-</div>
+</header>
 
 {% for post in posts %}
-    <div>
-        <p>published: {{ post.published_date }}</p>
+    <article>
+        <time>published: {{ post.published_date }}</time>
         <h2><a href="">{{ post.title }}</a></h2>
         <p>{{ post.text|linebreaksbr }}</p>
-    </div>
+    </article>
 {% endfor %}
 ```
 
diff --git a/en/extend_your_application/README.md b/en/extend_your_application/README.md
@@ -19,13 +19,13 @@ We will start with adding a link inside `blog/templates/blog/post_list.html` fil
 
 {% block content %}
     {% for post in posts %}
-        <div class="post">
-            <div class="date">
+        <article class="post">
+            <time class="date">
                 {{ post.published_date }}
-            </div>
+            </time>
             <h2><a href="">{{ post.title }}</a></h2>
             <p>{{ post.text|linebreaksbr }}</p>
-        </div>
+        </article>
     {% endfor %}
 {% endblock %}
 ```
@@ -142,15 +142,15 @@ Enter the following code:
 {% extends 'blog/base.html' %}
 
 {% block content %}
-    <div class="post">
+    <article class="post">
         {% if post.published_date %}
-            <div class="date">
+            <time class="date">
                 {{ post.published_date }}
-            </div>
+            </time>
         {% endif %}
         <h2>{{ post.title }}</h2>
         <p>{{ post.text|linebreaksbr }}</p>
-    </div>
+    </article>
 {% endblock %}
 ```
 
diff --git a/en/html/README.md b/en/html/README.md
@@ -111,6 +111,14 @@ You can now have a little fun and try to customize your template! Here are a few
 - `<a href="https://djangogirls.org">link</a>` creates a link
 - `<ul><li>first item</li><li>second item</li></ul>` makes a list, just like this one!
 - `<div></div>` defines a section of the page
+- `<nav></nav>` defines a set of navigation links
+- `<article></article>` specifies independent, self-contained content
+- `<section></section>` defines a section in a document
+- `<header></header>` specifies a header for a document or section
+- `<main></main>` specifies the main content of a document
+- `<aside></aside>` defines some content aside from the content it is placed in (like a sidebar)
+- `<footer></footer>` defines a footer for a document or section
+- `<time></time>` defines a specific time (or datetime)
 
 Here's an example of a full template, copy and paste it into `blog/templates/blog/post_list.html`:
 
@@ -122,29 +130,29 @@ Here's an example of a full template, copy and paste it into `blog/templates/blo
         <title>Django Girls blog</title>
     </head>
     <body>
-        <div>
+        <header>
             <h1><a href="/">Django Girls Blog</a></h1>
-        </div>
+        </header>
 
-        <div>
-            <p>published: 14.06.2014, 12:14</p>
+        <article>
+            <time>published: 14.06.2014, 12:14</time>
             <h2><a href="">My first post</a></h2>
             <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
-        </div>
+        </article>
 
-        <div>
-            <p>published: 14.06.2014, 12:14</p>
+        <article>
+            <time>published: 14.06.2014, 12:14</time>
             <h2><a href="">My second post</a></h2>
             <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.</p>
-        </div>
+        </article>
     </body>
 </html>
 ```
 
-We've created three `div` sections here.
+We've created one `header` section and two `article` section here.
 
-- The first `div` element contains the title of our blog – it's a heading and a link
-- Another two `div` elements contain our blog posts with a published date, `h2` with a post title that is clickable and two `p`s (paragraph) of text, one for the date and one for our blog post.
+- The `header` element contains the title of our blog – it's a heading and a link
+- Another two `article` elements contain our blog posts with a published date in `time` element, `h2` with a post title that is clickable and a `p` (paragraph) of text for our blog post.
 
 It gives us this effect:
 
diff --git a/en/template_extending/README.md b/en/template_extending/README.md
