HTML5 markup for blog article

Question

Recently I started a blog project. It is my first time that I create something so advance. I use task runners, SEO optimization, preprocessors, I will code in full stack environment and all the other stuffs that needs a project.

After many days, structuring my page through UX and UI, think about HTML5 tags usage and keep in mind the meaning of simplicity, I have end up with a simple design pattern. Before I continue, I wanted someone to review my html structure. (As a holiday season, all of my buddies are on vacation.)

Bellow is the html file structure with only the tags names. I removed some of the class and ids attributes and the links to external resources.

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- STYLESHEETS AND OTHER META -->
</head>

<body>
    <div class="container">
        <header>
            <div class="nav-icon">
                <a href="">
                    <span class="home-page-icon"></span>
                </a>
            </div>
            <h1>BLOG NAME</h1>
            <p>... FUNKY TEXT ...</p>
        </header>
        <div class="container-fluid">
            <section id="post-content-description">
                <article class="quote">
                    A DESCRIPTION OF TH EARTICLE
                </article>
            </section>
            <section id="article-section">
                <header class="article-title text-center">
                    <h1>ARTICLE'S TITLE</h1>
                    <h2>AUTHOR NAME </h2>
                </header>
                <article class="article-body">
                    THE MAIN ARTICLE'S CONTENT
                </article>
                <footer class="fav-button">
                    <span class="fav"></span>
                </footer>
            </section>
            <section id="social-section">
                <div class="comments">
                    <ol class="comment-list">
                        <li class="single-comment clearfix">
                            <div class="user">
                                userName
                                <span class="comment-fav"></span>
                                <span class="comment-fav-count">COMMENT'S FAV COUNTER</span></div>
                            <div class="comment">THE ACTUAL COMMENT BODY</div>
                            <div class="comment-date">posted date</div>
                        </li>
                    </ol>
                </div>
                <div class="comment-post-area">
                    <div class="comment-alert">
                        MESSAGE ALERT WHEN THE USER POST A COMMENT
                    </div>
                    <form class="comment-post-form">
                        <div class="user">
                            <input type="text" />
                        </div>
                        <div class="email">
                            <input type="text" />
                        </div>
                        <div class="comment-editor">
                            <textarea></textarea>
                        </div>
                        <div class="footer" id="submit-section">
                            <button type="submit">
                                <span class="submit-text"><span class="glyphicon glyphicon-send"></span>Post</span>
                            </button>
                            <span class="pull-right" id="comment-alert"></span>
                        </div>
                    </form>
                </div>
            </section>
        </div>
        <footer>
            Copyright (c) Author's Name
        </footer>
    </div>
    <!-- JAVASCRIPT -->
</body>

</html>

I want you to keep in mind that SEO is a high priority. I will use microdata further in my developing circle. Also both the main article section and the comment one, will be generated dynamically. (I haven't decided yet if I use PHP or Node.js).

I also post a sketch of what do I expect my blog structure to be.

Perhaps I'm being dense, but why not use WordPress for a blog? — pacmaninbw, Jul 14, 2016 at 15:32
@pacmaninbw I'd like to learn how a full stack developer works. How he's utilize things, set hes workflow, version control, collaborate with others. I don't care mainly for the project as I do for the experience I get from the whole procedure. — user61343, Jul 14, 2016 at 15:47
@pacmaninbw I use gulp connected with git, sass, uglify, etc plugins to automate some working. I use SCSS as preprocessor for my styles and also jquery, mansory, and other plug ins. My site will generate contents dynamically so I might use react.js or stick with the classical JQuery AJAX method. As I said above I don't know if I go for js or php back end yet. I just build the front end. — user61343, Jul 14, 2016 at 20:19
I have rolled back the last edit. Please see What to do when someone answers. Feel free to post a follow-up question. — Mast, Jul 16, 2016 at 9:46

Vogel612 · Accepted Answer · 2016-07-16 12:41:52Z

Just scratching the surface of the html code. Bear in mind it's difficult to review html since we are not focusing on the CSS and Javascript sections . Since am a Bootstrap fan most of my comments are aimed at improving your presentation.

Minimise the use of "class" if the css defined is only for this element. Please restrict yourself to "id"

                <div class="email">
                    <input type="text" />
                </div>

use

                <div id="email">
                    <input type="text" />
                </div>

except this was defined by twitter bootstrap structure.

Note there are symbols for copyright
```
<p>  Copyright &copy; Author's Name<p>
```

This section of code

   <header>
        <div class="nav-icon">
            <a href="">
                <span class="home-page-icon"></span>
            </a>
        </div>

        <h1>BLOG NAME</h1>
        <p>... FUNKY TEXT ...</p>
    </header>

can be written as

<div class ="jumbotron"> <h1>BLOG NAME</h1> <p> ... FUNKY TEXT ...</p> </div>

If you ask me I would rather use <div class= "row">....</div> in place of <section>...</section> because the class properly aligns your content within the container- fluid and also the class has some defined css for media queries. Note this bootstrap standard for specifying a row.

Note- most of the examples are from this page Forms Twitter Bootstrap

Please don't stick too the html contents. I removed most of them for readability. I used the copy symbol both placeholders for inputs. — user61343, Jul 14, 2016 at 13:41

Community · Accepted Answer · 2017-05-23 11:33:44Z

Accessibility of CSS icons

This will not be accessible, because the icon is added via CSS and there’s nothing in the HTML, so users without CSS support (or users that can’t perceive the CSS icons) can’t use the link:

<div class="nav-icon">
  <a href="">
    <span class="home-page-icon"></span>
  </a>
</div>

Probably the same problem with these, too:

<footer class="fav-button">
    <span class="fav"></span>
</footer>

<span class="comment-fav"></span>

The fix is to provide actual content (i.e., on the HTML level), either using img, or a text alternative (that can be visually hidden with CSS).

Copyright

You can use the small element for the copyright notice.

<footer>
  <small>© Author's Name</small>
</footer>

Comments

Each comment can be in its own article element, which allows you to use header/footer for the comment metadata (e.g., author name, publication date).

Using a ol is possible, but not really needed.

Main article

Each blog post should be an article. This article element includes the title of the blog post, the actual text, and things like fav buttons.

But you seem to use a section element for the blog post, and the article element for the text. This is not correct.

It’s also not correct to use a heading for the author name. This creates a sub-section that sets the scope for the following content, so the actual blog post text would be in scope of the h2 (= the author name), not the h1 (= the blog post title).

I think you’ll want to use something like this:

<article>

  <header>
    <h1>ARTICLE'S TITLE</h1>
    <p>AUTHOR NAME</p>
  </header>

  <p>THE MAIN ARTICLE'S CONTENT</p>

  <footer><!-- fav buttons --></footer>

</article>

You can use the main element as parent for this article to denote that it represents the main content for that page.

(I don’t understand what "A DESCRIPTION OF THE ARTICLE" is supposed to be. Why having a description of the blog post that immediately follows? Anyway, without understanding what it represents, I can’t say if the markup is appropriate; but it seems to me that using two sectioning content elements isn’t appropriate.)

thank you @unor. I have a question though. What does the "so users without CSS support" means? How can someone don't have css support? Also the comments-section fix is a good idea that I haven't though it.I have understant how the header works. Altough my approach suits me well. I also set the main page title the same as h1 so no problems there. For the main article's content, I use many <p> tags for every paragraph. The contents we are place within the article's body is from a range of simple text to multimedia iframes (think youtube and codepen) or code text. Just to have in mind. — user61343, Jul 16, 2016 at 9:14
can you also add an example on how to structure the comments area with your example based on my code? — user61343, Jul 16, 2016 at 9:17

Stack Exchange Network

HTML5 markup for blog article

2 Answers 2

Accessibility of CSS icons

Copyright

Comments

Main article

Hot Network Questions

HTML5 markup for blog article

2 Answers 2

Accessibility of CSS icons

Copyright

Comments

Main article

Related

Hot Network Questions